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

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

「clearfix」でフッタの回り込みを解除する

　次に、（X）HTMLのソース上、コンテナにフッタが含まれていない場合の例を見てみましょう。

リスト7　（X）HTMLソース：フッタがコンテナに含まれない場合／02.html

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

　この場合、先の例のように「clear:both」を指定しても、コンテナの背景色は緑色にならず、白色のままです。

図6　フッタで回り込みを解除しても、コンテナの背景色は塗りつぶされない

　このように、フッタがコンテナに含まれない場合には、「clearfix」というテクニックを使用するのが一般的です。「clearfix」にも、いろいろな種類がありますが、ここでは一般的に知られている「clearfix」を紹介します。

リスト8　CSSソース：「clearfix」の例／02.css

.clearfix:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  line-height:0;
  visibility:hidden;
}
.clearfix {
  display: inline-block; /* for IE 7 */
}
/* Hides from Mac IE \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from Mac IE */

　やや複雑な仕組みになりますが、これは、after擬似要素を利用して、「.」を生成し、「clear:both」を適用するという仕組みです。Win IE 7以下は、after擬似要素に対応していないので、「display: inline-block」を使ってfloatをクリアする効果を得ています。「display: inline-block」は、Mac IEでもfloatをクリアする効果がありますが、Win IEと異なり、「display: block」に戻すと、floatをクリアする効果も消えてしまうので、その部分にHolly Hack（注1）を用い、適用対象からMac IEを除外しています。

　使い方は、フロートを解除したい親要素（ここではコンテナ）に適用させて使います。例では複数の箇所で使えるように、クラスを利用していますが、一箇所しか使用しない場合には、「div#container」に直接適用しても良いでしょう。「clearfix」適用後、コンテナの背景色は指定した緑色になります。

図7　「clearfix」適用後：コンテナの背景色が指定した緑色になる

　ポジションニング型のレイアウトでは、フッタの重なりを制御するのが少々ネックになりますが、フロートを使ったレイアウトでは、「clearプロパティ」または「clearfix」を使用することで、フッタの回り込みを解除し、重なりを制御することができるのが特徴です。「clearプロパティ」と「clearfix」は、フッタがコンテナに含まれているかどうかで使い分けると良いでしょう。

図8　clearプロパティ」と「clearfix」の使い分け

注1：Holly Hack

　Mac IE 5をスタイルの適用対象から外すことができるコメントハック。CSSのコメントの書式は、「*/」で閉じることになっているが、「\*/」というように、「\（欧文フォントではバックスラッシュ）」を付けて閉じると、次の「*/」が現れるまで、Mac IE 5にスタイルが適用されない。

全体をセンタリングする

　これまでの例では、全体幅を100%としていますが、コンテナの幅をピクセルで指定し、幅を固定することも可能です。このとき、全体をセンタリング（中央寄せ）するには、全体を囲むコンテナの左右マージンの値に「auto」を指定します。

リスト9　全体のセンタリング／03.html

body {
  text-align: center; /* for Win IE 6 */
}
div#container {
  width: 500px;
  margin: 0 auto; /* 左右のマージンを「auto」に指定 */
  background-color: green;
  text-align: left; /* for Win IE 6 */
}

　ただし、Win IE 6の過去互換モードでは、このように指定してもセンタリングされない（「標準モード」ではセンタリングされる）ため、この問題を回避するには、body要素に「text-align: center」と指定します。IE 6の場合、さらに問題があり、body要素に「text-align: center」を指定すると、直接の子要素のコンテナ（div#container）だけでなく、子要素となるすべてのブロックレベル要素がセンタリングされてしまうため、コンテナに「text-align: left」の指定を併記しておくようにしましょう。

背景色の段差を解消する

　メインコンテンツとサブコンテンツの高さは、それぞれの内容量によって決定します。そのため、これらの領域に背景色を設定している場合、次の図9のように、メインとサブの内容量によって、背景色の領域に段差が生じてしまうことになります。

図9　メインとサブの背景色の段差

　この背景色の段差を回避するには、サブとメインの背景色を基にした1ピクセルの高さの画像を用意し、コンテナの背景画像として、垂直方向に繰り返し表示するよう指定します。

図10　コンテナの背景画像

　ただし、この手法を使うには、コンテナの幅が固定幅で、さらにメインかサブのどちらかあるいは両方が固定幅である必要があります。

リスト10　コンテナに背景画像を設定する／04.html,04.css

div#container {
  background: green url("bg.gif") repeat-y; /* 背景画像を指定 */
  color: black;
}