画像が左側で右にタイトルと本文があるときのマークアップ - Webtech Walker今回は下記のようなデザインがあったときのマークアップを順を追って考えてみたいと思います。（下記のデザインはCSS Happy Lifeのコーディングコンテストのものです） 画像が左、タイトルと本文が右にある。 画像の幅は固定。（今回は200pxとする） 右側（本文とタイトル）の幅も固定(今回は400pxとする） 全体の幅は600px 画像、本文ともに高さは可変 画像とタイトルは同じリンク先 構造を考える まずはデザインを見て構造を考えます。これは人それぞれ違うだろうし、一番大事なところだと思います。僕の場合以下のように考えます。実際書いたりはしませんが、書くと分かりやすいですね。 商品の一覧と考えるとリストでマークアップ。順序の関係性は見られないのでulを使う タイトルはhタグであるべき。当然一番上にくる 画像がタイトルより先にくることはありえない。hタグの中に入るのもおかしい サムネイル
