CSSでレイアウト

CSSでレイアウトを指定するには、「box-ordinal-group」と「box-flex」等のboxプロパティを使います。

プロパティ	内容
box-orient	子要素の並べ方。 horizontal:水平（左から右） vertical:垂直（上から下） inline-axis:水平方向の設定に従う block-axis:垂直方向の設定に従う
box-direction	子要素の並べ方を指定。 normal:左上から右下へ reverse:右下から左上へ
box-align	子要素を揃える縦位置を指定。 start:親要素の上辺に end:親要素の下辺に center:親要素の中央に stretch:子要素の高さを親要素に合わせる
box-pack	子要素を揃える横位置を指定。 start:左寄せ end:右寄せ center:中央 justfy:余白を分割して子要素の間に割り当てる

記事一覧

メイン記事

日付順記事

---

<style type="text/css">
#columnLayout {
    width:100%;
    height:400px;
    display:box;
    display:-moz-box;
    display:-webkit-box;
}
#leftColumn {
    width:80px;
    height:400px;
    background:#CACAFF;
    box-ordinal-group:1;
    -moz-box-ordinal-group:1;
    -webkit-box-ordinal-gruop:1;
}
#centerColumn {
    height:400px;
    background:#FFFFFF;
    box-ordinal-group:2;
    -moz-box-ordinal-gruop:2;
    -webkit-box-ordinal-group:2;
    box-flex:1;
    -moz-box-flex:1;
    -webkit-box-flex:1;
}
#rightColumn {
    width:50px;
    height:400px;
    background:#FFCACA;
    box-ordinal-group:3;
    -moz-box-ordinal-gruop:3;
    -webkit-box-ordinal-group:3;
}
</style>
<div id="columnLayout">
    <div id="leftColumn" >記事一覧</div>
    <div id="centerColumn" >メイン記事</div>
    <div id="rightColumn" >日付順記事</div>
</div>

---