マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

CSS WEB制作

知ってそうで知らないCSS3の便利な使い方【その3:box系プロパティ】

投稿日:2015年5月28日 更新日:

今回はCSS3を使ったレイアウトで使えるbox系プロパティを使ってみました。

このbox系のプロパティを使えばCSS2等で使っていたfloatやtable-cellプロパティを使わずに横並びレイアウトが可能になります。

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の便利な使い方もご覧下さい。

知ってそうで知らないCSS3の便利な使い方【その2:属性セレクタ編】

知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】

-CSS, WEB制作

執筆者:

関連記事

デザイナーなら必ず見ておきたいWEBデザイン(可愛い系統)

デザイナーなら必ず見ておきたいWEBデザイン(可愛い系統)

資生堂のマシェリ公式HP http://www.shiseido.co.jp/macherie/index.html リボンのあしらいと女性が好みそうなお花やフルーツなどをモチーフにしていて、 沢山の …

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

webフォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第一弾として「個性的な英字フォント( …

参考になるスマホサイト

皆さん・・・ こんばんは・・・・ webデザインを新人デザイナーKです・・・ 何故私がこんなに落ち込んでいるかというと・・・最近、5kgも太っ”#$#”$!!! ことではなく! 最近、スマホのデザイン …

手軽に雰囲気を変える!無料英字webフォントのまとめ -素敵な明朝フォント編-

webフォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第二弾として「素敵な明朝英字フォント …

【Photoshop マジック】ビンテージ風の素材がさくさくカンタンに作れちゃう!

Webデザインのトレンド手法のひとつとして、「レトロ感」や「ヴィンテージ感」のあるwebデザインがよく見かけます。 素材がなくても、Phoshopを使えば普通の写真もステキな素材になります! ここで写 …