menu
menu

キーワード検索

 

最近の投稿

CSS3でレイアウト

  • Labs

CSS3

こんにちは(・∀・)

今日はCSS3のレイアウトで使うbox系プロパティのご紹介です。

とはいってもブラウザシェアの大半を占めるIEでいまだ対応していないためPC系のレイアウトでは使用しづらいのですが...

と言っておりましたが、flexboxでIE対応しました(IE10以上)。

flexboxでレイアウト

1. display: box;

複数のカラムで構成されるWebページはfloatとclearfix等を使用してレイアウトしてきました。

しかし、今後普及が予想されるCSS3のdisplay: box;を使えば簡単に横並びのレイアウトが作れちゃいます。さらに、高さも一番大きい要素に自動で揃えて表示されます。

ただし、これらのプロパティはIEではまだ対応されていませんので実際に使えるようになるのももう少し先になるかもしれません。

また、現在使えるChrome、Safari、Firefox、Operaでも独自実装という形で先行実装しているのでCSS3の仕様が確定するまではベンダープレフィクスを付ける必要があります。

サンプルデモ

サンプルデモはこちら

HTML

<div id="contents">
<div id="container">
<div class="mainbox">
<h2>mainbox</h2>
<p>自動で横並びになり、高さも一番大きい<b>box</b>に揃えます。<b>IEでは対応されていません。</b></p>
<!--mainbox--></div>
<div class="leftbox">
<h2>leftbox</h2>
<!--leftbox--></div>
<div class="rightbox">
<h2>rightbox</h2>
<!--rightbox--></div>
<!--container--></div>
<!--contents--></div>
CSS

#contents {
	width: 1060px;
	margin: 0 auto;
}
#contents #container {
	display: -webkit-box;/*Safari,Chrome*/
	display: -moz-box;/*Firefox*/
	display: -ms-box;/*IE*/
	display: -o-box;/*Opera*/
	display: box;
}
#contents #container p {
	padding: 10px;
}
#contents #container .mainbox {
	width: 760px;
	min-height: 400px;
	background: #9fb7d4;
}
#contents #container .leftbox {
	width: 150px;
	min-height: 300px;
	background: #d49fc2;
}
#contents #container .rightbox {
	width: 150px;
	min-height: 200px;
	background: #ccc;
}
2. box-ordinal-group

container内に配置されたboxの並び順を指定します。

HTMLで記述されている順番に関係なく並び順を指定することができます。IEではまだ対応されておりません。ベンダープレフィクスを付ける必要があります。

サンプルデモ

サンプルデモはこちら

HTML

<div id="contents">
<div id="container">
<div class="mainbox">
<h2>mainbox</h2>
<p><b>box-ordinal-group</b>で指定した番号順に左から自動で並びます。<b>IEでは対応されていません。</b></p>
<!--mainbox--></div>
<div class="leftbox">
<h2>leftbox</h2>
<!--leftbox--></div>
<div class="rightbox">
<h2>rightbox</h2>
<!--rightbox--></div>
<!--container--></div>
<!--contents--></div>
CSS

#contents {
	width: 1060px;
	margin: 0 auto;
}
#contents #container {
	display: -webkit-box;/*Safari,Chrome*/
	display: -moz-box;/*Firefox*/
	display: -ms-box;/*IE*/
	display: -o-box;/*Opera*/
}
#contents #container p {
	padding: 10px;
}
#contents #container .mainbox {
	width: 760px;
	min-height: 400px;
	background: #9fb7d4;
	-webkit-box-ordinal-group: 2;/*Safari,Chrome*/
	-moz-box-ordinal-group: 2;/*Firefox*/
	-ms-box-ordinal-group: 2;/*IE*/
	-o-box-ordinal-group: 2;/*Opera*/
}
#contents #container .leftbox {
	width: 150px;
	min-height: 300px;
	background: #d49fc2;
	-webkit-box-ordinal-group: 1;/*Safari,Chrome*/
	-moz-box-ordinal-group: 1;/*Firefox*/
	-ms-box-ordinal-group: 1;/*IE*/
	-o-box-ordinal-group: 1;/*Opera*/
}
#contents #container .rightbox {
	width: 150px;
	min-height: 200px;
	background: #ccc;
	-webkit-box-ordinal-group: 3;/*Safari,Chrome*/
	-moz-box-ordinal-group: 3;/*Firefox*/
	-ms-box-ordinal-group: 3;/*IE*/
	-o-box-ordinal-group: 3;/*Opera*/
}
3. box-flex

display: box;内に配置されたboxの横幅を指定します。

box-flexを指定したboxをリキッド表示します。IEではまだ対応されておりません。ベンダープレフィクスを付ける必要があります。

サンプルデモ

サンプルデモはこちら

HTML

<div id="contents">
<div id="container">
<div class="mainbox">
<h2>mainbox</h2>
<p><b>box-flex</b>を指定した<b>box</b>を<b>リキッド表示</b>します。<b>IEでは対応されていません。</b></p>
<!--mainbox--></div>
<div class="leftbox">
<h2>leftbox</h2>
<!--leftbox--></div>
<div class="rightbox">
<h2>rightbox</h2>
<!--rightbox--></div>
<!--container--></div>
<!--contents--></div>
CSS

#contents {
	width: 1060px;
	margin: 0 auto;
}
#contents #container {
	display: -webkit-box;/*Safari,Chrome*/
	display: -moz-box;/*Firefox*/
	display: -ms-box;/*IE*/
	display: -o-box;/*Opera*/
}
#contents #container p {
	padding: 10px;
}
#contents #container .mainbox {
	background: #9fb7d4;
	width: 760px;
	min-height: 400px;
	-webkit-box-ordinal-group: 2;/*Safari,Chrome*/
	-moz-box-ordinal-group: 2;/*Firefox*/
	-ms-box-ordinal-group: 2;/*IE*/
	-o-box-ordinal-group: 2;/*Opera*/
	-webkit-box-flex: 1;/*Safari,Chrome*/
	-moz-box-flex: 1;/*Firefox*/
	-ms-box-flex: 1;/*IE*/
	-o-box-flex: 1;/*Opera*/
}
#contents #container .leftbox {
	width: 150px;
	background: #d49fc2;
	min-height: 300px;
	-webkit-box-ordinal-group: 1;/*Safari,Chrome*/
	-moz-box-ordinal-group: 1;/*Firefox*/
	-ms-box-ordinal-group: 1;/*IE*/
	-o-box-ordinal-group: 1;/*Opera*/
}
#contents #container .rightbox {
	width: 150px;
	background: #ccc;
	min-height: 200px;
	-webkit-box-ordinal-group: 3;/*Safari,Chrome*/
	-moz-box-ordinal-group: 3;/*Firefox*/
	-ms-box-ordinal-group: 3;/*IE*/
	-o-box-ordinal-group: 3;/*Opera*/
}

4. box-sizing

box-sizingで指定できる値はcontent-boxとborder-boxの2種類です。content-boxを指定した場合paddingとborderの大きさは含まないで表示します。border-boxを指定した場合paddingとborderの大きさを含んで表示します。IE7以下は対応されておりません。ベンダープレフィクスを付ける必要があります。

レイアウトには直接関係有りませんがCSSでbox-sizingを指定し、各boxにpaddingとborderを含んでいる場合は表示に影響してきますのでご注意ください。

サンプルデモ

サンプルデモはこちら

HTML

<div class="content-box">
<h2>mainbox</h2>
<p><b>content-box</b>で指定すると<b>padding</b>と<b>border</b>の値も含みます。<b>IE7以下は対応されていません。</b></p>
<!--content-box--></div>
<div class="border-box">
<h2>border-box</h2>
<p><b>border-box</b>で指定すると<b>padding</b>と<b>border</b>の値は含みません。<b>IE7以下は対応されていません。</b></p>
<!--border-box--></div>
CSS

.content-box,
.border-box {
	width: 700px;
	border: 5px solid #ccc;
	margin: 10px auto;
}
.content-box p,
.border-box p {
	padding: 10px;
}
.content-box {
	-webkit-box-sizing: content-box;/*Safari,Chrome*/
	-moz-box-sizing: content-box;/*Firefox*/
	-ms-box-sizing: content-box;/*IE8*/
	-ms-box-sizing: content-box;/*Opera*/
	box-sizing: content-box;
}
.border-box {
	-webkit-box-sizing: border-box;/*Safari,Chrome*/
	-moz-box-sizing: border-box;/*Firefox*/
	-ms-box-sizing: border-box;/*IE8*/
	-ms-box-sizing: border-box;/*Opera*/
	box-sizing: border-box;
}
関連リンク

flexboxでレイアウト

  • カテゴリー:Labs