Webtech Walker

画像が左側で右にタイトルと本文があるときのマークアップ

今回は下記のようなデザインがあったときのマークアップを順を追って考えてみたいと思います。(下記のデザインはCSS Happy Lifeのコーディングコンテストのものです)

デザイン

  • 画像が左、タイトルと本文が右にある。
  • 画像の幅は固定。(今回は200pxとする)
  • 右側(本文とタイトル)の幅も固定(今回は400pxとする)
  • 全体の幅は600px
  • 画像、本文ともに高さは可変
  • 画像とタイトルは同じリンク先

構造を考える

まずはデザインを見て構造を考えます。これは人それぞれ違うだろうし、一番大事なところだと思います。僕の場合以下のように考えます。実際書いたりはしませんが、書くと分かりやすいですね。

  • 商品の一覧と考えるとリストでマークアップ。順序の関係性は見られないのでulを使う
  • タイトルはhタグであるべき。当然一番上にくる
  • 画像がタイトルより先にくることはありえない。hタグの中に入るのもおかしい
  • サムネイル的な画像が最後にくるのも変な感じなので本文の前にもってくる
  • 本文と画像は別物だと思うので分ける(同じpタグの中に入れたりしない)

マークアップする

これを踏まえて(X)HTMLにすると、以下のようなマークアップになります。(h3というは適当です。状況によってh2だったりh4だったり)

<ul>
  <li>
    <h3><a href="#">WWW WATCH 時計</a></h3>
    <p class="thumb"><a href="#"><img src="dammy.jpg" alt"ダミー" /></a></p>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
  </li>
  (以下<li>が続く)
</ul>

画像にpタグってどうなのよ、とちょっと思うので画像のpタグに「class="thumb"」を指定してサムネイルですよっていう役割を示してます。つまり見た目のためのclassではなく役割を与えるためのclassです。

CSSで見た目を整える

マークアップができたらCSSを書きましょう。CSSを書く前に考えることは以下のようなこと。

  • 画像と本文のどちらが高くなるかがわからないのでpositionは使えない。floatを使わねば
  • 幅は固定なのでfloatのみでなんとかなりそう
  • 全要素floatしないといけなさそうなのでclearfixは使わねば

それらを踏まえて書きました。で、下記のようなCSSになりました。

ul {
  width: 600px;
}

li:after {
  height: 0;
  visibility: hidden;
  content: ".";
  display: block;
  clear: both;
}

li {
  zoom: 1;
}

li h3,
li p {
  width: 400px;
  float: right;
}

li p.thumb {
  width: 200px;
  float: left;
}

余白とか考えてないけど、大丈夫そう。あとは微調整して終わりです。今回は最初のマークアップでうまくいったけど、デザインによっては余計なid、classを振ったりdivを追加したりすることもあります。

まとめ

こんな感じの流れででマークアップしてるよっていう例を書いてみました。実際はこんなに簡単にいってないんですけどね。割と悩んでCSSもいろいろやってみてここまで行き着きました。

一番悩んだのはh3のaタグの中に画像含めたほうがいいんじゃないかというところです。そうすると、タイトルと画像のリンク判定が同じになるので使いやすさを優先するのならそっちのほうがいいかなぁとか、かなり迷いました。

このエントリーをはてなブックマークに追加