今回はCSS3を使ったレイアウトで使えるbox系プロパティを使ってみました。
このbox系のプロパティを使えばCSS2等で使っていたfloatやtable-cellプロパティを使わずに横並びレイアウトが可能になります。
Contents
box
指定された要素内のブロック要素を自動的に横並びにします。
さらに最大の高さを持つ要素に高さを揃えてくれます。
サンプル
<style>
#box-container {
width:100%;
display:-webkit-box; /* Safari,Google Chrome用 */
display:-moz-box; /* Firefox用 */
display:box;
}
#box-container .box-main {
width:300px;
background-color:#EEE;
min-height:300px;
}
#box-container .box-sub0 {
width:200px;
background-color:#999;
min-height:200px;
}
#box-container .box-sub1 {
width:120px;
background-color:#666;
min-height:100px;
}box-ordinal-group
display:box;で配置したブロック要素の表示順をHTMLの記述順序に関わらず変更します。
サンプル
<style>
#box-container {
width:100%;
display:-webkit-box; /* Safari,Google Chrome用 */
display:-moz-box; /* Firefox用 */
display:box;
}
#box-container .box-main {
width:300px;
background-color:#EEE;
min-height:300px;
-webkit-box-ordinal-group:2; /* Safari,Google Chrome用（2番目に表示） */
-moz-box-ordinal-group:2; /* Firefox用（2番目に表示） */
box-ordinal-group:2;
}
#box-container .box-sub0 {
width:200px;
background-color:#999;
min-height:200px;
-webkit-box-ordinal-group:1; /* Safari,Google Chrome用（1番目に表示） */
-moz-box-ordinal-group:1; /* Firefox用（1番目に表示） */
box-ordinal-group:1;
}
#box-container .box-sub1 {
width:120px;
background-color:#666;
min-height:100px;
-webkit-box-ordinal-group:3; /* Safari,Google Chrome用（3番目に表示） */
-moz-box-ordinal-group:3; /* Firefox用（3番目に表示） */
box-ordinal-group:3;
}box-flex
display:box;を指定した要素内のブロック要素の幅を指定します。
ブラウザの横幅に合わせて伸縮してくれます。
サンプル
<style>
#box-container {
width:100%;
display:-webkit-box; /* Safari,Google Chrome用 */
display:-moz-box; /* Firefox用 */
display:box;
}
#box-container .box-main {
-webkit-box-flex:1; /* Safari,Google Chrome用 */
-moz-box-flex:1; /* Firefox用 */
box-flex:1;
background-color:#EEE;
min-height:300px;
-webkit-box-ordinal-group:2; /* Safari,Google Chrome用（2番目に表示） */
-moz-box-ordinal-group:2; /* Firefox用（2番目に表示） */
box-ordinal-group:2;
}
#box-container .box-sub0 {
width:200px;
background-color:#999;
min-height:200px;
-webkit-box-ordinal-group:1; /* Safari,Google Chrome用（1番目に表示） */
-moz-box-ordinal-group:1; /* Firefox用（1番目に表示） */
box-ordinal-group:1;
}
#box-container .box-sub1 {
width:120px;
background-color:#666;
min-height:100px;
-webkit-box-ordinal-group:3; /* Safari,Google Chrome用（3番目に表示） */
-moz-box-ordinal-group:3; /* Firefox用（3番目に表示） */
box-ordinal-group:3;
}box-sizing
box-sizingは私が最もよく使うbox系のプロパティです。
box-sizingプロパティで指定できる値はcontent-boxとborder-boxの2種類で、
content-boxはパディングとボーダーを幅と高さに含めない（初期値）
border-boxはパディングとボーダーを幅と高さに含めて処理を行います。
サンプル
<style>
#box-container {
width:100%;
display:-webkit-box; /* Safari,Google Chrome用 */
display:-moz-box; /* Firefox用 */
display:box;
}
#box-container .box-main {
-webkit-box-flex:1; /* Safari,Google Chrome用 */
-moz-box-flex:1; /* Firefox用 */
box-flex:1;
background-color:#EEE;
min-height:300px;
-webkit-box-ordinal-group:2; /* Safari,Google Chrome用（2番目に表示） */
-moz-box-ordinal-group:2; /* Firefox用（2番目に表示） */
box-ordinal-group:2;
-webkit-box-sizing:border-box; /* Safari,Google Chrome用 */
-moz-box-sizing:border-box; /* Firefox用 */
-ms-box-sizing:border-box; /* Internet Explorer 8用 */
box-sizing:border-box; /* Opera用 */
padding:10px;
}
#box-container .box-sub0 {
width:200px;
background-color:#999;
min-height:200px;
-webkit-box-ordinal-group:1; /* Safari,Google Chrome用（1番目に表示） */
-moz-box-ordinal-group:1; /* Firefox用（1番目に表示） */
box-ordinal-group:1;
-webkit-box-sizing:border-box; /* Safari,Google Chrome用 */
-moz-box-sizing:border-box; /* Firefox用 */
-ms-box-sizing:border-box; /* Internet Explorer 8用 */
box-sizing:border-box; /* Opera用 */
padding:10px;
}
#box-container .box-sub1 {
width:120px;
background-color:#666;
min-height:100px;
-webkit-box-ordinal-group:3; /* Safari,Google Chrome用（3番目に表示） */
-moz-box-ordinal-group:3; /* Firefox用（3番目に表示） */
box-ordinal-group:3;
-webkit-box-sizing:border-box; /* Safari,Google Chrome用 */
-moz-box-sizing:border-box; /* Firefox用 */
-ms-box-sizing:border-box; /* Internet Explorer 8用 */
box-sizing:border-box; /* Opera用 */
padding:10px;
}デモ
※非対応プラウザではデモが正常に表示されない場合があります。
box-main
box-sub0
box-sub1
この他のCSS3の便利な使い方もご覧下さい。
