CSS3 でのレイアウトで使える box 系プロパティのまとめ

CSS3 でのレイアウトで使える box 要素系のまとめ

今は 3カラムのレイアウトをする際 float を使い clearfix や clear を使ったりと覚えたての頃は頭を悩まされた人も少なくはないかと思います。

でも今後普及するであろう CSS3 で 3カラムのレイアウトする際も display: box; を使うだけで簡単に出来ちゃうんですよね。って事でbox 要素系のプロパティについての紹介をしておきます。

demo page

…ここからが続き

display: box; の使い方

指定された要素内のブロック要素(div や dl や p など)は、自動的に横並びになり、かつ最大の高さを持つ要素に高さを揃えてくれます。

対応ブラウザ(2010 3/5 現在)
Safari , Google Chrome , Firefox

指定方法・表示例

#container	{
	width: 100%;
	display: -webkit-box; /* Safari,Google Chrome用 */
	display: -moz-box; /* Firefox用 */
}
#main	{
	width: 500px;
	background: #EEE;
	min-height: 500px;
}
#leftBox	{
	width: 250px;
	background: #999;
	min-height: 300px;
}
#rightBox	{
	width: 250px;
	background: #666;
	min-height: 100px;
}

display: box;

display: box; のデモページ

box-ordinal-group の使い方

display: box 内に配置されたブロック要素(div や dl や p など)の表示させる順番を指定します。
HTML の記述順序に関わらず順序を変更したい際に使用して下さい。

対応ブラウザ(2010 3/5 現在)
Safari , Google Chrome , Firefox

指定方法・表示例

#container	{
	width: 100%;
	display: -webkit-box;
	display: -moz-box;
}
#main	{
	width: 500px;
	background: #EEE;
	min-height: 500px;
	-webkit-box-ordinal-group: 2; /* Safari,Google Chrome用(2番目に表示 */
	-moz-box-ordinal-group: 2; /* Firefox用(2番目に表示) */
}
#leftBox	{
	width: 250px;
	background: #999;
	min-height: 300px;
	-webkit-box-ordinal-group: 1; /* Safari,Google Chrome用(1番目に表示) */
	-moz-box-ordinal-group: 1; /* Firefox用(1番目に表示) */
}
#rightBox	{
	width: 250px;
	background: #666;
	min-height: 100px;
	-webkit-box-ordinal-group: 3; /* Safari,Google Chrome用(3番目に表示) */
	-moz-box-ordinal-group: 3; /* Firefox用(3番目に表示) */
}

box-ordinal-group

box-ordinal-group のデモページ

box-flex の使い方

display: box を指定された要素内に配置されたブロック要素(div や dl や p など)の幅を指定します。
ブロック要素のうち、box-flex で指定された数値の合計に対する割合が算出幅となります。簡単に言うとブラウザの横幅に合わせて伸縮してくれます。

対応ブラウザ(2010 3/5 現在)
Safari , Google Chrome , Firefox

指定方法・表示例

#container	{
	width: 100%;
	display: -webkit-box;
	display: -moz-box;
}
#main	{
	-webkit-box-flex: 1; /* Safari,Google Chrome用 */
	-moz-box-flex: 1; /* Firefox用 */
	background: #EEE;
	min-height: 500px;
	-webkit-box-ordinal-group: 2;
	-moz-box-ordinal-group: 2;
}
#leftBox	{
	width: 250px;
	background: #999;
	min-height: 300px;
	-webkit-box-ordinal-group: 1;
	-moz-box-ordinal-group: 1;
}
#rightBox	{
	width: 250px;
	background: #666;
	min-height: 100px;
	-webkit-box-ordinal-group: 3;
	-moz-box-ordinal-group: 3;
}

box-flex

box-flex のデモページ

box-sizing の使い方

box-sizing プロパティで指定できる値は content-box と border-box の2種類となっています。
content-box と指定した場合は padding と border の大きさを含まずに、border-box と指定した場合は含めて処理を行います。

対応ブラウザ(2010 3/5 現在)
Safari , Google Chrome , Firefox , Opera , Internet Explorer 8

指定方法・表示例

div     {
	width: 600px;
	border: 10px solid #CCC;
	margin: 0 auto 20px;
	min-height: 100px;
	padding: 50px;
}
#content-box	{
	-webkit-box-sizing: content-box; /* Safari,Google Chrome用 */
	-moz-box-sizing: content-box; /* Firefox用 */
	-ms-box-sizing: content-box; /* Internet Explorer 8用 */
	box-sizing: content-box; /* Opera用 */
}
#border-box	{
	-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用 */
}

box-sizing

box-sizing のデモページ

関連記事のサイトさんもご参考に下さい

demo page

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article