CSSでマルチカラムレイアウト

クロスブラウザなレイアウトデザインテクニック 第7回

ヘッダとフッタを追加する

　より実践的になるよう、これまでのサンプルに、ヘッダ（div#header）とフッタ（div#footer）を追加してみましょう。ヘッダ、メイン、サブ、フッタの順に記述し、全体をコンテナで囲みます。ソースは次のようになります。

リスト4　（X）HTMLソース：ヘッダとフッタを追加しコンテナで囲む／01.html

<div id="container">
  <div id="header">ヘッダ</div>
  <div id="main">メイン</div>
  <div id="sub">サブ</div>
  <div id="footer">フッタ</div>
</div>

　左サイドバーのレイアウトになるようCSSを適用してみましょう。メインコンテンツを右、サブコンテンツを左にフロートさせます。また、分かりやすいように、それぞれの領域に背景色を設定しておきましょう。コンテナは緑、ヘッダとフッタは黒、メインコンテンツは赤、サブコンテンツは青の背景色を指定します。

リスト5　CSSソース：左サイドバーレイアウトにし、それぞれの領域に背景色を指定／01.css

div#container {
  background-color: green; /* 背景色：緑 */
}
div#header {
  background-color: black; /* 背景色：黒 */
}
div#main {
  width: 70%; /* 幅：70% */
  float: right; /* 右フロート */
  background-color: red;  /* 背景色：赤 */
}
div#sub {
  width: 30%; /* 幅：30% */
  float: left; /* 左フロート */
  background-color: blue;  /* 背景色：青 */
}
div#footer {
  width: 100%;
  background-color: black;  /* 背景色：黒 */
}

「clearプロパティ」でフッタの回り込みを解除する

　メインとサブにフロートを設定しているため、このままでは、図3のように、後続のフッタも回り込んでしまいます。また、コンテナの背景色（緑を指定）も反映されません。

図3　フッタの回り込み

　これは、バグではなく、「フロートされた要素は親要素（例ではコンテナ）の高さとは無関係に配置される」というCSSの仕様です。親要素の高さが、フロートされた要素を包むように一番下までくるようにするには、図4のように、最後の子要素でフロートを解除する必要があります。

図4　最後の子要素でフロートを解除

　このサンプルの場合、フロートされた要素の親要素はコンテナで、コンテナの最後にはフッタが含まれています。従って、フッタに「clear: both」を指定すれば、回り込みが解除され、コンテナの高さをフッタの下まで広げることができます。

リスト6　CSSソース：clearプロパティでフッタの回りこみを解除／01.css

div#footer { clear: both; }

図5　フッタの回り込みを解除