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

HTML&CSS

2008.07.18

イメージ

「HTML をシンプルに保ったままブロック要素を段組みする方法」のパート 2 です。

前回の記事では、float と position の合わせ技により、全体の横幅ピッタリに要素を段組みしました。
今回は、position を使わない方法をご紹介します。

ボックスと余白の幅の値は前回と同じく以下です。

HTML ソースも前回と同じくこちら。無駄な ID や class のないシンプルなソースになっています。

<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）が決まっていて、段組みした要素の左右を全体の幅に揃えたい場合、position を使用しないでも次のように CSS を記述すれば、HTML をシンプルに保ったまま段組み表示を実現することができます。

* { /* デフォルトCSSのリセット */
  margin: 0;
  padding: 0;
}
div#photo {
  width: 500px; /* 全体の横幅 */
  height: 120px;
}
div#photo ul {
  width: 510px;
  height: 120px;
  margin-right: -10px; /* ここがポイント！ */
  list-style-type: none;
}
div#photo li {
  float: left; /* floatで段組み */
  width: 160px;
  height: 120px;
  margin-right: 10px; /* 写真間の余白 */
}

写真間の余白があるため、段組みで表現するボックス（ul）の横幅が親ボックス（div#photo）の横幅を超えてしまいますが、ul の margin にはみ出した分の値をネガティブ値で指定することにより、段組みが崩れるのを防いでいます。

ネガティブな値を指定するのはなんとなく裏ワザっぽくて躊躇してしまう方も多いかと思いますが、上手く使えば段組みにも応用することができるので、オススメのテクニックです。