HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法

HTML&CSS

2008.03.18

HTML をシンプルに保ったままブロック要素を段組みする方法です。

↑のように写真を横並びで表示したい、というケースはよくあると思います。

まず、上記の HTML ソースがこちら。

<div id="photo">
<ul>
<li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li>
<li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li>
<li><img src="hoge3.jpg" alt="サンプル3" width="160" height="120" /></li>
</ul>
</div><!-- /#photo -->

今回のサンプルでは、ボックスと余白が以下になっています。

全体の横幅（500px）が決まっていて、左右を全体の幅に揃えたい場合、次のように CSS を記述すれば HTML をシンプルに保ったまま（個別に id や class を適用することなく）段組み表示を実現することができます。

* { /* デフォルトCSSのリセット */
  margin: 0;
  padding: 0;
}
div#photo {
  position: relative; /* 相対配置指定 */
  width: 500px; /* 全体の横幅 */
  height: 120px;
}
div#photo ul {
  position: absolute; /* 絶対配置指定 */
  top: 0;
  left: 0;
  width: 510px;
  height: 120px;
  list-style-type: none;
}
div#photo li {
  float: left; /* floatで段組み */
  width: 160px;
  height: 120px;
  margin-right: 10px; /* 余白 */
}

position と float の合わせ技によるテクニックです。普段 float だけ使用していると結構苦労するレイアウトでも、position を活用することで簡単に段組みを実現することができます。

ブロック要素の段組みでは欠かせないオススメのテクニックです。