ボックスレイアウトで簡単リキッドレイアウト

　前回の「CSS 3における新しいレイアウト手法：ボックスレイアウト」に引き続き、「display: box」と指定して実現するボックスレイアウトの特徴を見ていきたい。

　今回は、ボックスレイアウトでリキッドレイアウトを作成する方法と、段組みの段の表示順序を指定する方法を紹介する。これまでのfloatやpositionプロパティを使ったレイアウトと比較すると、簡単に設定できるのが特徴だ。

　なお、ボックスレイアウトはCSS 3の「Advanced Layout Module」という草案で提案されている新しいレイアウト手法で、現在のところFirefoxとSafari、Google Chromeが対応している。

リキッドレイアウトで段組みを作成する

　ブラウザウィンドウの大きさに合わせて横幅が変わるレイアウトを「リキッドレイアウト」と呼ぶ。これまでのようにfloatプロパティを使ったレイアウトではネガティブマージンを利用するなど複雑な設定が必要になるが、ボックスレイアウトではCSSのプロパティを1つ追加するだけで簡単にリキッドレイアウトを作成することができる。

　まず、次のサンプルはボックスレイアウトを利用して作成した3段組みだ。段組み全体をマークアップした

には「display: box」と指定し、ボックス要素として表示するようにしてある。これで、ボックス要素内の3つの子要素「左サイドバー」「コンテンツ」「右サイドバー」は自動的に高さを揃え、横に並べて表示される。

　なお、この段階では「左サイドバー」と「右サイドバー」の横幅を200ピクセル、「コンテンツ」の横幅を300ピクセルと指定しているので、リキッドレイアウトではなく固定幅の3段組みのレイアウトとなる。

固定幅の3段組みのレイアウト

#container{
display: -moz-box;
display: -webkit-box;
}

#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;
}

左サイドバー
…略…




コンテンツ
…略…



右サイドバー
…略…

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

　これをリキッドレイアウトにするためには、横幅を可変にしたい子要素に「box-flex: 1」と指定する。

　たとえば、「コンテンツ」の横幅を可変にするには、以下のように

に対してbox-flexプロパティを指定する。このとき、widthプロパティによる横幅の指定は削除しておく。なお、box-flexプロパティはFirefoxでは「-moz-box-flex」、SafariとGoogle Chromeでは「-webkit-box-flex」と指定する。

　これで、「コンテンツ」は表示可能なスペースの横幅いっぱいに表示されるようになり、ブラウザのウィンドウサイズを変えると横幅も変わるようになる。

「コンテンツ」の横幅を可変にしたもの

↓

ウィンドウサイズを変えると「コンテンツ」の横幅も変わる

…略…
#contents{
-moz-box-flex:1;
-webkit-box-flex:1;
padding: 20px;
background-color: yellow;
}
…略…

「-moz-box-flex:1;」と「-webkit-box-flex:1;」に注目

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

　なお、box-flexプロパティの「flex」は「flexible（フレキシブル）」の略で、「柔軟」や「しなやか」という意味を持つ。