マーカーネット株式会社

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

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

関連記事

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

画面いっぱいに背景写真を敷くWEBデザインが流行っている今日この頃、 見栄えのする写真を探すのもなかなかの一苦労だったりしますよね。 そんな悩めるデザイナーさんたちにオススメしたい、高クオリティな写真 …

面白い動きや便利な機能をJSで実装! その4:ちょっと変わったマウスオーバーを実装してみました。

面白い動きや便利な機能をJSで実装! その4:ちょっと変わったマウスオーバーを実装してみました。

【今までにご紹介したJSの一覧】 面白い動きや便利な機能をJSで実装! その3:一目で印象に残るアニメーション背景を作成! 面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作 …

デザインの幅が広がる!クオリティの高いイラストサイトまとめ

デザインの幅が広がる!クオリティの高いイラストサイトまとめ http://www.markernet.co.jp/blog/2015/08/07/post-5940/ Facebook

脱初心者!CSSのちょっとしたテクニック!CSSが効かない問題を回避!

脱初心者!CSSのちょっとしたテクニック!CSSが効かない問題を回避!

「CSSを設定したのに効かない!?」っていうことありますよね。 その場合、一概には言えませんが、もしかしたらCSSの書き方が原因かもしれません。 下記を参考に、CSSを書き直せば直る可能性もぐっと高ま …

どこでも!いつでも!自由に使えるアイコン集

どこでも!いつでも!自由に使えるアイコン集

皆さん! お久しぶりです!こんばんは!! 心はいつも新人であるデザイナーKです。 この一ヶ月の間、私には色んなことがありました。 新しく買ったシャツが家のドアノブに引っかかって破れたり、ひどい風邪をひ …