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

HTML&CSS

2008.09.17

イメージ

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

前回までは画像の横並びの解説でしたが、今回は段組みさせるブロック要素（サンプルの場合は div 要素）の内容が画像のみとは限らない場合です。

ボックスと余白の幅の値は以下です。

HTML ソースはこちら。シンプルなソースになっています。

<div id="content">
<div class="section">

<div class="box">
<h2>会社案内</h2>
<p>株式会社シーブレインのご紹介</p>
<!-- /.box --></div>

<div class="box">
<h2>採用情報</h2>
<p>プログラマ中途採用募集中！ まずはお問い合わせください。</p>
<!-- /.box --></div>

<div class="box">
<h2>サービス概要</h2>
<p>マニュアル制作、WEBサイト制作、ローカライゼーション</p>
<!-- /.box --></div>

<!-- /.section --></div>
<!-- /#content --></div>

全体の横幅（div#content {width:500px}）が決まっていて、段組みした要素の左右を全体の幅に揃えたい、さらに各ボックスの下辺のラインも合わせたい場合、以下のように CSS を記述すれば HTML をシンプルに保ったまま段組み表示を実現することができます。

div#content {
  width: 500px;
}
div.section {
  width: 510px;
  margin-right: -10px; /* ※1 */
}

div.box {
  display: inline; /* ※2 */
  float: left;
  width: 158px;
  min-height: 6.5em;       /* ※3 */
  height: auto !important; /* ※3 */
  height: 6.5em;           /* ※3 */
  margin-right: 10px;
  border: 1px #999999 solid;
}

div.box h2 {
  margin: 0;
  padding: 2px;
  background: #999999;
  font-size: 80%;
}
div.box p {
  margin: 5px;
  font-size: 80%;
  line-height: 1.5;
}

※1：
ネガティブマージンで全体の幅に対してはみ出した分の値を打ち消します。
※2：
IE6 の場合、サンプルでいうところの div#content を float すると、表示が少しズレてしまいます。
IE6 における既知のバグ（マージンが倍になる系？）だと思いますが、発生条件の検証はしていません（すみません…）
display: inline; を指定しておくことで、IE6 のバグは回避することができます。
※3：
下辺を合わせるために、ここでは min-height を使用しています。
文字サイズを拡大していき min-height の値を超えると内容によっては下辺もズレてきますので万能ではありません。
ある程度の文字サイズの拡大を考慮して、あらかじめ高めに設定しておくのがコツかと。
IE6 では min-height が使えませんので、以下の記事を参考に IE6 用の対策をしてあります。
→IE6のmin-width、min-heightハックに関して

企業サイトなどを制作していると、上記サンプルのようなレイアウトが意外とよく出てくるのではないかと思います。
テクニックとして身に付けておけば、色々なレイアウトに応用ができるようになりますので、オススメです。