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

はじめに

　本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。

　今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト（段組レイアウト）を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した「floatプロパティ」および「positionプロパティ」を利用した、「フロート型」と「ポジショニング型」のレイアウトテクニックを紹介します。同時にページレイアウトで起こりがちな問題とその対処方法についても扱います。

対象読者

• XHTMLとCSSの基本を理解している方。
• Web標準サイトの実践的な作り方に興味のある方。

必要な環境

　（X）HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は必要ありませんが、CSSをよくサポートした最新版のブラウザがあれば望ましいです。

フロート型の2カラムレイアウト

　フロートによるレイアウトは、現在主要のブラウザであれば、まず問題なく表示され、仕組みも非常にシンプルなため、クロスブラウザなデザインを目指すうえで比較的導入しやすいレイアウト方法だと言えるでしょう。

フロート型レイアウトのポイント

　フロート型のレイアウトは、メインコンテンツ（div#main）とサブコンテンツ（div#sub）の双方にfloatプロパティを指定し、全体をコンテナ（div#container）で囲むことで実現します。

<div id="container">
  <div id="main">メイン</div>
  <div id="sub">サブ</div>
</div>

　フロート型レイアウトのポイントは、widthプロパティで、それぞれの領域の幅を指定することです。CSSの書式上、floatプロパティを適用する要素は、画像などの内在寸法を備えるもの以外widthプロパティで幅を指定する必要があります。従って、メインコンテンツ、サブコンテンツは、widthプロパティで幅を指定し、安定した表示を確保するようにしましょう。

　さらに、全体を囲むコンテナの幅を指定しておくことで、ウィンドウサイズを変更した際に起こりがちなカラム落ち（メインコンテンツやサブコンテンツのどちらか一方が下にずれ落ちること）を防ぐことができます。

　それでは実際にフロート型レイアウトの具体例をみていくことにしましょう。

フロート型：左サイドバーレイアウト

　左サイドバーのレイアウトは、図1のように、メインコンテンツ（div#main）を右に、サブコンテンツ（div#sub）を左にフロートさせることで実現することができます。

図1　フロート型：左サイドバーレイアウト（メイン右、サブ左）

　CSSコードは、次のようになります。

div#container {
  width: 100%; /* 全体の幅を指定 */
}
div#main {
  width: 70%; /* メインコンテンツの幅を指定 */
  float: right; /* 右にフロート */
}
div#sub {
  width: 30%; /* サブコンテンツの幅を指定 */
  float: left; /* 左にフロート */
}

フロート型：右サイドバーレイアウト

　さきほどの左サイドバーとは逆の方向にフロートさせると、右サイドバーのレイアウトになります。図2のように、メインコンテンツ（div#main）を左に、サブコンテンツ（div#sub）を右にフロートさせます。

図2　フロート型：右サイドバーレイアウト

　CSSコードは、次のようになります。

div#container {
  width: 100%; /* 全体の幅を指定 */
}
div#main {
  width: 70%; /* メインコンテンツの幅を指定 */
  float: left; /* 左にフロート */
}
div#sub {
  width: 30%; /* サブコンテンツの幅を指定 */
  float: right; /* 右にフロート */
}