マーカーネット株式会社

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制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【多言語サイトデザインの参考になる!】世界のWEBデザインギャラリーサイト

【多言語サイトデザインの参考になる!】世界のWEBデザインギャラリーサイト

本日はクリスマス、また一年の終わりが近ついてきましたが、 皆さんはいかがお過ごしでしょうか? サイトのデザイン制作に入る前に、よくWEBデザインギャラリーサイトで同じ業種やジャンルのサイトを参考してか …

10月のPYPLプログラミング言語人気ランキング

10月のPYPLプログラミング言語人気ランキング

10月のPYPLプログラミング言語人気ランキング PYPL PopularitY of Programming Language index 10月のプログラミング言語人気ランキングの発表によりますと …

【WEBデザインレシピ】 暑い夏にヒヤッとするホラーなデザインの作り方

【WEBデザインレシピ】 暑い夏にヒヤッとするホラーなデザインの作り方

もうすぐ夏がきますね! 今年は冷夏という噂も耳にしますが、日本の各地でちらほら真夏日が記録されていたりして… そこで今日は夏の暑さも吹き飛ぶ!?ホラーデザインの簡単レシピをご紹介させていただきます。 …

多言語対応で1000億円の経済効果!WEBサイトも多言語化を

多言語対応で1000億円の経済効果!WEBサイトも多言語化を

近ごろのニュースで、訪日観光客の増加という記事をよく見かけるようになりました。東京の街を歩いても日本への訪日客が増えたことを実感できるほど外国語が飛び交ってますね。2015年は【多言語化元年】と言われ …

背景に動画を取り入れたWEBデザイン

背景に動画を取り入れたWEBデザイン

動画を取り入れたWEBサイト。 大分主流となってきて、見かける頻度も一段と増えました。 動画 = 重い という概念もどこへやら。。 最近のWEB動画はとても軽い。 背景として動画を入れ、飽きさせること …