Lesson 08 CSS3で実現する柔軟なボックスレイアウト - HTML5＋CSS3 次世代Webコーディングの超・最新動向・CSS3編

HTML5＋CSS3 次世代Webコーディングの 超・最新動向

CSS3編

	Lesson 08			CSS3で実現する柔軟な ボックスレイアウト
	制作・文			高村香奈子（株式会社アークフィリア）

いままでfloatやpositionを駆使して実装していた複数カラムのレイアウトだが、CSS3から新しく追加されたboxに関するプロパティを使うと、より柔軟にレイアウトすることができる。

01

シンプルな3カラムを例に、CSS3でどのようなボックスレイアウトが可能になったのか見ていこう。

まず、floatなどのスタイルを何も適用していない状態が【1-1】になる。親ボックスに対し、子ボックスを3つ配置している【1-2】。

CSSでは親ボックスの幅を指定し、子ボックスに対し余白や色を設定した【1-3】。


【1-1】当然だが、何もしないとボックスは縦に配置される



【1-2】今回はdivにしているが、もちろんulなど他のブロック要素でも問題無い



【1-3】box-sizingプロパティについては【07】で後述する

02

ブロック要素を横並びにする場合、これまではfloatを使用する手法が一般的だったが、CSS3では親ボックスに「display:box;」と記述するだけで、内包されるボックスを横並びにすることが可能になった【2-1】【2-2】。

また、floatでブロック要素を横並びにした場合、コンテンツの高さに応じて背景色や画像が途切れてしまうことがあったが【2-3】、「display: box;」でボックスを横並びにした場合は、一番長さのあるコンテンツに合わせて、すべてのボックスの高さが揃う。

これはコンテンツとナビゲーションそれぞれに背景を設定したい場合などに役立つ。


【2-1】



【2-2】box の値の前にベンダープレフィックスを付ける



【2-3】floatで横並びにすると、高さが揃わず背景色が切れてしまう

03

「display: box;」で横並びにした場合は、HTMLの記述順に左から並んで表示される。HTMLの記述の順番と表示の順番を変えたい場合は「box-ordinal-group」プロパティを使う。「box-ordinal-group: 1;」のように、表示をさせたい順番の値を入れればよい【3-1】【3-2】。


【3-1】



【3-2】子ボックスの表示順が入れ替わった

04

これまでブロック要素を縦方向に揃えることが難しく悩みの種であったが、「boxalign」プロパティを使用することで、子ボックスの縦方向の揃え位置を簡単に指定できるようになる【4-1】【4-2】。値は「start、end、center、baseline、stretch」などが用意されている。


【4-1】わかりやすいように親ボックスの背景色を白にした



【4-2】子ボックスが縦中央揃えになった

05

「box-pack」プロパティではボックスの横方向の揃え位置を指定できる【5-1】【5-2】。

こちらは「start、end、center、justify」の値が用意されている。「justify」を指定すると、親ボックスに対してあまった幅が均等に空けられた表示になる。


【5-1】



【5-2】子ボックスが中央揃えになった

06

「box-flex」はボックスの伸縮比率を指定できるプロパティだ。正の数値を指定すると、その比率に合った幅に伸縮する。たとえば、コンテンツは可変幅にしたいが、ナビゲーションだけを固定幅にしたい場合などに使う【6-1】【6-2】。


【6-1】#Box01のみ固定幅を指定した


【6-2】100pxで固定したボックス以外が、指定した比率で伸縮される

07

「box-sizing」はボックスの幅にpaddingとborderを含めるかどうかを指定できるプロパティだ【7-1】。

現在、Firefoxでボックス配置の際に、幅にpaddingとborder が含まれてしまう。【1-3】では、webkit系ブラウザに対してpadding とborder を含める「borderbox」の値を設定することで、mozilla系とwebkit系のブラウザで同じ見た目にしている。


【7-1】左：border-box / 右：content-box