決定版!?Clearfixのソースコードはここまで短くなった

|

マルチカラム構造にしたときなど、ブロック要素の回り込みを解除するのに、Clearfixと呼ばれるテクニックを使用するのが便利です。ブラウザの移り変わりにより、動作対象とする古いブラウザを考慮しなくなってもよくなってきたこの頃ですので、Clearfixのソースコードも以下のようにここまでスリムになりました。

CSSコード

element{
   ⁄zoom:1;
}

element:after {
   content:'';
   display:block;
   clear:both;
}

これはNetScapeとMacのIEを考慮していないソースコードになります。「/zoom:1;」のようにプロパティの前にスラッシュをつけるとIE6と7だけに適用されるようです。今まで知りませんでした。

このclearfixを使う他に、単純に回り込みを解除させたい要素に「overflow:hidden」を適用すればよいというのもあります。印刷時に問題があるらしいのですが、印刷用のCSSを用意する場合は「overflow:auto;」などとしておけばよいので、結構使える技ではあります。

参考

CSSの小技に関する記事(53)

参考サイト

お勧めCSS教本

Powered by Movable Type 4.21-ja

最近のブログ記事