2010年08月18日

clearfixの使い方

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

clearfixの使い方


以前、floatで崩れた?コレでなおせ!という記事でfloatによるレイアウト崩れの対処方法をご紹介しました。そこでは、overflowプロパティを使った方法を取り上げましたが、clearfixはさらっとスルーしたので、改めて見てみたいと思います。

clearfixとは


まずclearfixとはテクニックにつけられたただの通称であって、そのようなセレクターやプロパティがあるわけではありません。

clearfixはfloatによって親要素の高さが足りなくなる、またはなくなってしまったときに、高さを元に戻すために使います。

clearfixの意味


clearfixのコード自体は検索すればいくらでもでてきます。バリエーションも様々ですが、今回はスタンダードと思われるものを取り上げて、そのコードの意味を解説します。

/* afterに対応したブラウザ向け */
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
/* IE6 */
* htm .clearfix {
height: 1%;
}
/* IE7 */
*:first-child+html .clearfix {
height: 1%;
}

ポイントはafterに対応したブラウザ向けの部分です。

after疑似要素はIE8以上、firefoxやsafari、chrome等の標準仕様に準拠したブラウザーで使えます。
afterとcontentプロパティを使って「高さが足りない/なくなっている要素の直後に文字(ピリオド)を追加」します。その文字をdisplayプロパティでブロックレベル要素の様に表示します。そこでclearをするという寸法です。つまりclearできる要素がないなら追加してしまうという考えなのですが、HTMLのソースコードを汚さずに解決できます。

この例では汎用性をもたせるために.clearfixというクラスセレクターで適用していますが、たとえば#contents:afterというようなピンポイントな書き方もできます。

ですが、これだけではafterが使えないIE6や7では解決できません。そこで、IE6と7向けにはハックが必要になります。ハックの内容は正直おまじない的なものですが…IEのバグを使った裏技です。

その他のバリエーションとしてはMac版 IEを考慮したものもありますが、シェアとしてはもう無視してもよいのではないかと思います。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 01:37
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック