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

最新特集【一覧】

EPUB生成ツール「ReVIEW」について達人出版会の高橋氏に聞いてみた

1つのソースでEPUBとPDFを生成できる「ReVIEW」を試す

Snow Leopard探索記 最終回：線路は続くよどこまでも

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

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

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

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

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

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

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

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

段組み用の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;
}

左サイドバー
…略…




コンテンツ
…略…



右サイドバー
…略…

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