CSS 3における新しいレイアウト手法：ボックスレイアウト

　ウェブページのレイアウトでは、ヘッダーやサイドバー、コンテンツなどをどのように配置するかがポイントとなる。現在、配置のコントロールにはfloatやpositionプロパティを利用するのが一般的だが、CSS 3の「Advanced Layout Module」という草案では、新しいレイアウト手法が提案されている。

　このレイアウト手法は「行と列のレイアウト」や「ボックスレイアウト」と呼ばれ、FirefoxとSafari、Google Chromeが対応している。

　ボックスレイアウトの機能を利用すれば、これまでのfloatやpositionプロパティでは困難だった「段の高さを揃えた段組み」なども簡単に作成できるようになる。

　そこで今回は、floatプロパティとボックスレイアウトを利用した段組みを比較していく。また、CSS 3で段組みのレイアウトを実現する「Multi Column」との違いも確認したい。

段の高さを揃えた段組み。左右のサイドバーをコンテンツの高さに揃えている

段の高さを揃えた段組みを作成する

　ボックスレイアウトの機能を利用して、段の高さを揃えた段組みを作成してみよう。

　まずは、次のように左サイドバー、コンテンツ、右サイドバーの3つのパーツを用意する。この段階では段組みの設定をしていないので、3つのパーツは記述した順に縦に並んで表示される。なお、左右のサイドバーは200ピクセル、コンテンツは300ピクセルの横幅に設定し、全体は<div id="container">〜</div>でマークアップしている。

段組み用の3つのパーツ

#left-sidebar	{
	width: 200px;
	padding: 20px;
	background-color: orange;
	}

#contents	{
	width: 300px;
	padding: 20px;
	background-color: yellow;
	}

#right-sidebar	{
	width: 200px;
	padding: 20px;
	background-color: limegreen;
	}

<div id="container">

<div id="left-sidebar">
<h2>左サイドバー</h2>
…略…
</div>


<div id="contents">
<h2>コンテンツ</h2>
…略…
</div>

<div id="right-sidebar">
<h2>右サイドバー</h2>
…略…
</div>

</div>

※ブラウザで表示を確認する