CodeZine(コードジン)

特集ページ一覧

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

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

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

ヘッダとフッタを追加する

 より実践的になるよう、これまでのサンプルに、ヘッダ(div#header)とフッタ(div#footer)を追加してみましょう。ヘッダ、メイン、サブ、フッタの順に記述し、全体をコンテナで囲みます。ソースは次のようになります。

リスト4 (X)HTMLソース:ヘッダとフッタを追加しコンテナで囲む/01.html
<div id="container">
  <div id="header">ヘッダ</div>
  <div id="main">メイン</div>
  <div id="sub">サブ</div>
  <div id="footer">フッタ</div>
</div>

 左サイドバーのレイアウトになるようCSSを適用してみましょう。メインコンテンツを右、サブコンテンツを左にフロートさせます。また、分かりやすいように、それぞれの領域に背景色を設定しておきましょう。コンテナは緑、ヘッダとフッタは黒、メインコンテンツは赤、サブコンテンツは青の背景色を指定します。

リスト5 CSSソース:左サイドバーレイアウトにし、それぞれの領域に背景色を指定/01.css
div#container {
  background-color: green; /* 背景色:緑 */
}
div#header {
  background-color: black; /* 背景色:黒 */
}
div#main {
  width: 70%; /* 幅:70% */
  float: right; /* 右フロート */
  background-color: red;  /* 背景色:赤 */
}
div#sub {
  width: 30%; /* 幅:30% */
  float: left; /* 左フロート */
  background-color: blue;  /* 背景色:青 */
}
div#footer {
  width: 100%;
  background-color: black;  /* 背景色:黒 */
}

「clearプロパティ」でフッタの回り込みを解除する

 メインとサブにフロートを設定しているため、このままでは、図3のように、後続のフッタも回り込んでしまいます。また、コンテナの背景色(緑を指定)も反映されません。

図3 フッタの回り込み
図3 フッタの回り込み

 これは、バグではなく、「フロートされた要素は親要素(例ではコンテナ)の高さとは無関係に配置される」というCSSの仕様です。親要素の高さが、フロートされた要素を包むように一番下までくるようにするには、図4のように、最後の子要素でフロートを解除する必要があります。

図4 最後の子要素でフロートを解除
図4 最後の子要素でフロートを解除

 このサンプルの場合、フロートされた要素の親要素はコンテナで、コンテナの最後にはフッタが含まれています。従って、フッタに「clear: both」を指定すれば、回り込みが解除され、コンテナの高さをフッタの下まで広げることができます。

リスト6 CSSソース:clearプロパティでフッタの回りこみを解除/01.css
div#footer { clear: both; }
図5 フッタの回り込みを解除
図5 フッタの回り込みを解除

  • 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