Firefox 3が対応したdisplayプロパティの値（2）

エ・ビスコム・テック・ラボ

2008/05/09 12:06

前回に続いて、Firefox 3が対応したdisplayプロパティの値「inline-block」を紹介する。

　今回はinline-blockボックスを利用して段組みのレイアウトと横組みのメニューを作成してみたい。なお、displayプロパティやinline-blockボックスについては、前回の記事を参照して欲しい。

inline-blockボックスを利用した段組みのレイアウト

　「display: inline-block」と指定すると、HTML/XHTMLタグでマークアップした部分をinline-blockボックスで表示することができる。inline-blockボックスを利用すれば、floatやpositionプロパティを利用せずに段組みのレイアウトを作ることが可能だ。

　段組みのレイアウトは、一般的には<div>で構成したblockボックスを横に並べて作成する。しかし、blockボックスはそのままでは横に並べて表示することができないので、floatプロパティで回り込みを指定したり、positionプロパティで表示位置を指定しなければならない。

　たとえば、次のソースではAとBのblockボックスにfloatプロパティを適用して、横に並べて2段組みで表示している。また、Cを2段組みの下に表示するため、clearプロパティで回り込みを解除する設定も記述している。

AとBのblockボックスを横に並べて表示したもの

div#a, div#b	{
	display: block;
	width: 200px;
	float: left;
	}

div#a	{
	background-color: #0088ff;
	}

div#b	{
	background-color: #00ccff;
	}

div#c	{
	clear: both;
	width: 400px;
	background-color: #ffff00;
	}

<div id="a">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A</div>

<div id="b">B B B B B B B B B B B B B B B B B B B B B B B B B B B B</div>

<div id="c">C C C C C C C C C C C C C</div>

※ブラウザで表示を確認する

　一方、AとBをinline-blockボックスに変更すれば、floatプロパティを指定しなくても横に並べて表示することができる。また、clearプロパティで回り込みを解除しなくても、Cを2段組みの下に表示することが可能だ。

AとBをinline-blockボックスに変更したもの

div#a, div#b	{
	display: inline-block;
	width: 200px;
	}

div#a	{
	background-color: #0088ff;
	}

div#b	{
	background-color: #00ccff;
	}

div#c	{
	width: 400px;
	background-color: #ffff00;
	}

※ブラウザで表示を確認する

　ただし、そのままではinline-blockボックスの下を揃えた表示になるので、上で揃えて表示するにはvertical-align:topを指定する。また、AとBの間の白い余白を削除するには、<div id="a">と<div id="b">の間に改行やスペースを入れずに記述する。

ボックスの上を揃えて、ボックス間の余白を削除したもの

div	{
	display: inline-block;
	width: 200px;
	vertical-align: top;
	}

div#a	{
	background-color: #0088ff;
	}

div#b	{
	background-color: #00ccff;
	}

<div id="a">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A</div><div id="b">B B B B B B B B B B B B B B B B B B B B B B B B B B B B</div>