サムネイル画像ありの横並びの一覧で、 数行の本文があるブロックを想定。

 
本文の読みやすさを考慮し、スマホでは1段レイアウトです。
カラムのwidth設定はなしの3分割。スマホレイアウトではカラムのpaddingに上下余白を設定。各項目で説明文の文字数があるときスマホでは1カラムが読みやすい。
画像は、サイズ:幅640px、BulkResizeの画質85で処理したものを配置しています。

吾輩は猫である

名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩は猫である吾輩は猫である吾輩は猫である

名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩は猫である

名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

features_001a

リンクは画像・小見出し・本文全体を「リンクの開始タグ」と「リンクの終了タグ」で挟み、画像・文字全体に対して設定しています。画像の差し替えや文字の変更がリンク設定とは独立するので、変更 がやりやすくなります。


  • 本文、小見出しのサイズ・色は指定していません。サイト全体のDRESSでの設定が反映されますが、任意に指定したいときにはfeatures_001のCSSに指定してください。
  • 画像の下に余白(margin-bottom)を設定し、見出しとの間に余白を設定しています。
  • スマホではカラムに対して余白(padding)を設定し、下に並ぶカラム間の間が開くようにしています。

Tablet View

features_001

SP View

features_001