ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

CSSのmicro clearfix最新版!親要素からはみ出さない方法も

クリアな顔の子猫

最近のブログやサイトは2カラム、3カラムが主流です。カラム分けはCSSでfloatを使っている場合が多いです。しかしfloatの解除忘れでは不具合が発生する場合があります。それを解消するのがclearfixです。

ゆめぴょん(@yume_pyon)です。こんちはっ!

ひと昔前のカラム制御はtableタグで行っていましたが面倒でした。floatを使うようになってからは、かなり楽になりました。しかしtableもfloatも本来の使い方にカラム制御はないので、もっと良い手法が現れる気がしています。

しかしまだしばらくはfloatの時代が続きそうです。だからfloatを使う時にかかせない、clearfixについて簡単に説明します。

floatの問題点

メインカラムと、サイドバーの2カラムでブログを作成したとします。その時のCSS(スタイルシート)には、メインカラムには「float: left;」、サイドバーには「float: right;」と設定したとします。

するとメインカラムとサイドバーの両方を囲む親要素に色や背景などを設定している場合、子要素を包み込んでくれないことに気づきます。具体的には親要素の高さがなくなってしまいます。

この現象は子要素にfloatを使うのをやめると、元に戻ります。だから原因はfloatだけです。

1つの解決策:floatの解除

この問題点を解決するために一番簡単な方法は「clear: both;」です。具体的にはfloatを使った後に、下のよう(2とおり)に記述する場合が多いです。

  • <div sytle=”clear: both;”></div>
  • <br sytle=”clear: both;” />

私もこの記述法は楽なのでよく使います。しかしHTMLの構造的に意味のないタグを記述することになるため、あまりスマートではありません。

もう1つの解決策:micro clearfix

この問題を解決するべく考案された手法が「clearfix」と呼ばれます。これはCSSのみでfloatの解除を行うことができるため、HTMLの構造を崩しません。

そしてclearfixにも改良が加えられました。IE6,7を含むあらゆるブラウザに対応して、しかもコードも短くできる「micro clearfix」が開発されました。具体的なコードは下のとおりです。

floatを使う要素の親要素に「class=”cf”」を設定するだけで、子要素のfloatを適切に解除することができます。コードも充分に短いので私は好んで利用しています。

まとめ:今日のゆめぴょんの知恵

float解除は他にも「overflow: hidden;」を利用する方法や、IE6,7を無視して更に短縮化する方法などもあります。自分の好みで選べばいいと思います。

「micro clearfix」が開発される過程でもいろいろ考案されたようです。今回はその変遷やCSSの説明ははぶいています。興味ある方は、私も参考にした次のブログを読んでみてください。

floatを解除する手法のclearfix と 次世代のレイアウトの話|Web Design KOJIKA17
[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix | コリス

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:スタイルシート/CSSの優先順位について解説!Webデザインに生かそうjQueryのautopagerで次ページを画面遷移なしで自動読込みする方法:次記事»
ページ
↑先頭
ホーム