Tweet

Pocket

CSS3で作成するカラムレイアウトをご紹介します。

CSS3からdisplayプロパティに「box」という値が追加されました。displayプロパティにboxが指定されていると、その要素の子要素のレイアウトを指定することが出来ます。
例として下図のような3段組のカラムレイアウトを作成してみます。

【使用例（css）】

#wrapper {
　　width:100%;
　　display:-webkit-box;  //（1）
　　display:-moz-box;
　　display:box;
　　}

#centerColumn {
　　height:500px;
　　background:#e6e6fa;
　　-webkit-box-ordinal-group:2;  //（2）
　　-moz-box-ordinal-group:2;
　　box-ordinal-group:2;
　　-webkit-box-flex:1;  //（3）
　　-moz-box-flex:1;
　　box-flex:1;
　　}

#leftColumn {
　　width:200px;
　　height:500px;
　　background:#b0c4de;
　　-webkit-box-ordinal-group:1;
　　-moz-box-ordinal-group:1;
　　box-ordinal-group:1;
　　}

#rightColumn {
　　width:200px;
　　height:500px;
　　background:#a9a9a9;
　　-webkit-box-ordinal-group:3;
　　-moz-box-ordinal-group:3;
　　box-ordinal-group:3;
　　}

【使用例（html）】

<div id="wrapper">
　　<div id="centerColumn">CENTER</div>
　　<div id="leftColumn">LEFT</div>
　　<div id="rightColumn">RIGHT</div>
</div>

（1）カラムレイアウトを適応させる領域を指定し、displayプロパティの値にboxを指定します。
（2）box-ordinal-groupプロパティで子要素の並び順を指定します。デフォルトの並び順は左から右なので、その順番に数字を指定します。
（3）box-flexプロパティで子要素が並ぶ場合の幅の比率を指定します。子要素の幅は、box-flexプロパティで指定された数値の合計値に対しての割合で割り当てられます。使用例ではidがcenterColumnの子要素に1と指定されているので、この子要素に割り当てられる幅は使える領域の100%となります。他の子要素はwidthプロパティで幅を指定していますので、親要素の幅からその分を引いた幅がidがcenterColumnの子要素が使える幅となります。

上記の例のhtmlを実際にブラウザで表示させてみると、左右の幅は変わりませんが真ん中のbox-flexを指定したカラム幅は、画面幅により可変します。

上記の例で紹介した以外にも、display:boxを指定した親要素と、その子要素に対してのレイアウトに関するプロパティは以下のようにもあります。

【レイアウトに関するプロパティ（親要素に関するもの）】
box-orient
[意味]･･･子要素の並べ方を指定
[指定する値]･･･horizonal（右から左）、vertical（上から下）、inline-axis（水平方向の設定に従う）、block-axis（垂直方向の設定に従う）

box-direction
[意味]･･･子要素の表示方向を指定
[指定する値]･･･normal（左から右へ、上から下へ）、reverse（右から左へ、下から上へ）

box-align
[意味]･･･子要素を揃える縦位置を指定
[指定する値]･･･start（親要素の上辺に）、end（親要素の下辺に）、center（親要素の中央に）、stretch（子要素の高さを親要素に合わせる）

box-pack
[意味]･･･子要素を揃える横位置を指定
[指定する値]･･･start（左寄せ）、end（右寄せ）、center（中央）、justfy（余白を分割して子要素の間に割り当てる）

【レイアウトに関するプロパティ（子要素に関するもの）】
box-ordinal-group
[意味]･･･子要素の並び順を指定
[指定する値]･･･数値で指定

【対応ブラウザ】
FireFox3以降、Safari3以降、Chrome4以降