今回は下記のようなデザインがあったときのマークアップを順を追って考えてみたいと思います。(下記のデザインはCSS Happy Lifeのコーディングコンテストのものです) 画像が左、タイトルと本文が右にある。 画像の幅は固定。(今回は200pxとする) 右側(本文とタイトル)の幅も固定(今回は400pxとする) 全体の幅は600px 画像、本文ともに高さは可変 画像とタイトルは同じリンク先 構造を考える まずはデザインを見て構造を考えます。これは人それぞれ違うだろうし、一番大事なところだと思います。僕の場合以下のように考えます。実際書いたりはしませんが、書くと分かりやすいですね。 商品の一覧と考えるとリストでマークアップ。順序の関係性は見られないのでulを使う タイトルはhタグであるべき。当然一番上にくる 画像がタイトルより先にくることはありえない。hタグの中に入るのもおかしい サムネイル
![画像が左側で右にタイトルと本文があるときのマークアップ - Webtech Walker](https://cdn-ak-scissors.b.st-hatena.com/image/square/c4c16447eff126477daf44f3258b48b98d139942/height=288;version=1;width=512/http%3A%2F%2Fwebtech-walker.com%2Fimg%2Fcommon%2Ficon.png)