CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/03/17 14:00
目次

「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 フッタで回り込みを解除しても、コンテナの背景色は塗りつぶされない
図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」適用後:コンテナの背景色が指定した緑色になる
図7 「clearfix」適用後:コンテナの背景色が指定した緑色になる

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

図8 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 メインとサブの背景色の段差
図9 メインとサブの背景色の段差

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

図10 コンテナの背景画像
図10 コンテナの背景画像

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

リスト10 コンテナに背景画像を設定する/04.html,04.css
div#container {
  background: green url("bg.gif") repeat-y; /* 背景画像を指定 */
  color: black;
}

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:クロスブラウザなレイアウトデザインテクニック

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5