マーカーネット株式会社

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

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

関連記事

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-2-

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-2-

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-2- どうも、デザイナーのOです。 前回に続けて、Webとグラフィック制作との違いについて紹介していきたいと思います。 画 …

VScodeのおすすめ設定と拡張機能

使用しているエディター こんにちは。2年目コーダーXです。コーデイングをされる方、何のエディターをお使いですか? 私は、コーデイングを始めてからずっと「Sublime Text」を使用してきたのですが …

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

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

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

【Illustrator】多角形を使った簡単な花形の作り方

【Illustrator】多角形を使った簡単な花形の作り方

みなさまこんばんは、新人Aです。 今日は、多角形を使って一瞬でお花の形にする方法をお話しようと思います! 数値をずらすだけで形が簡単に変わるので、とってもおすすめです。     【 …

ホームページ制作にかかわる肩書別完成するまでのプロセスまとめ

ホームページ制作にかかわる肩書別完成するまでのプロセスまとめ

WEBデザイナー、WEBディレクター、WEBプログラマー、WEBプロデューサー、プランナー、ライター、営業さん、ときおりカメラマンANDクライアント。とまぁたったひとつのホームページが出来上がるまでに …