Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。6CSSで3カラムレイアウトを実現するフロート型:3カラムレイアウトポジショニング型:3カラムレイアウトまとめ「clearfix」でフッタの回り込みを解除する次に、(X)HTMLのソース上、コンテナにフッタが含まれていない場合の例を見てみましょう。id="footer">フッタ</div>この場合、先の例のように「clear:both」を指定しても、コンテナの背景色は緑色にならず、白色のままです。フッタで回り込みを解除しても、コンテナの背景色は塗りつぶされないこのように、フッタがコンテナに含まれない場合には、「clearfix」というテクニックを使用するのが一般的です。「clearfix」にも、いろいろな種類がありますが、ここでは一般的に知られている「clearfix」を紹介します。*/やや複雑な仕組みになりますが、これは、after擬似要素を利用して、「.」を生成し、「clear:both」を適用するという仕組みです。inline-block」を使ってfloatをクリアする効果を得ています。IEを除外しています。使い方は、フロートを解除したい親要素(ここではコンテナ)に適用させて使います。例では複数の箇所で使えるように、クラスを利用していますが、一箇所しか使用しない場合には、「div#container」に直接適用しても良いでしょう。「clearfix」適用後、コンテナの背景色は指定した緑色になります。「clearfix」適用後:コンテナの背景色が指定した緑色になるポジションニング型のレイアウトでは、フッタの重なりを制御するのが少々ネックになりますが、フロートを使ったレイアウトでは、「clearプロパティ」または「clearfix」を使用することで、フッタの回り込みを解除し、重なりを制御することができるのが特徴です。「clearプロパティ」と「clearfix」は、フッタがコンテナに含まれているかどうかで使い分けると良いでしょう。5をスタイルの適用対象から外すことができるコメントハック。5にスタイルが適用されない。全体をセンタリングするこれまでの例では、全体幅を100%としていますが、コンテナの幅をピクセルで指定し、幅を固定することも可能です。このとき、全体をセンタリング(中央寄せ)するには、全体を囲むコンテナの左右マージンの値に「auto」を指定します。center」と指定します。left」の指定を併記しておくようにしましょう。背景色の段差を解消するメインコンテンツとサブコンテンツの高さは、それぞれの内容量によって決定します。そのため、これらの領域に背景色を設定している場合、次の図9のように、メインとサブの内容量によって、背景色の領域に段差が生じてしまうことになります。メインとサブの背景色の段差この背景色の段差を回避するには、サブとメインの背景色を基にした1ピクセルの高さの画像を用意し、コンテナの背景画像として、垂直方向に繰り返し表示するよう指定します。コンテナの背景画像ただし、この手法を使うには、コンテナの幅が固定幅で、さらにメインかサブのどちらかあるいは両方が固定幅である必要があります。NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Technologies。執筆コミュニティ「WINGSプロジェクト」代表。