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

inline-blockボックス

　inline-blockボックスは、CSS 2.1から追加されたボックスの種類だ。これまではSafariとOperaが対応していたが、Firefoxもバージョン3で対応した。また、Internet Explorerはバージョン8（ベータ版）で対応している。

　inline-blockボックスはblockボックスの一種だが、inlineボックスのように表示されるのが特徴だ。たとえば、<div>に対して「display: inline-block」と指定すると、「display: inline」と指定した場合と同じ表示になる。ここでは、inline-blockボックスを水色、inlineボックスを黄緑色で表示している。

Firefox 3の表示

div.inlineblock	{
	display: inline-block;
	background-color: #00aaff;
	}

div.inline	{
	display: inline;
	background-color: #aaff00;
	}

<div>
	<div class="inlineblock">Inline-Block</div>
	<div class="inlineblock">Inline-Block</div>
</div>

<div>
	<div class="inline">Inline</div>
	<div class="inline">Inline</div>
</div>

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

　inline-blockとinlineボックスの違いは、widthやheightプロパティを適用するとはっきりする。widthとheightは横幅と高さを指定するプロパティで、blockボックスにだけ適用することが認められている。そのため、次のようにwidthプロパティを指定すると、inline-blockボックスは指定した横幅で表示されるが、inlineボックスの横幅は変化しない。

ボックスの横幅を300ピクセルに指定したもの

div.inlineblock	{
	display: inline-block;
	background-color: #00aaff;
	width: 300px;
	}

div.inline	{
	display: inline;
	background-color: #aaff00;
	width: 300px;
	}

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

　SafariやOpera、Internet Explorer 8（ベータ版）での表示を確認すると、inline-blockボックスの表示に対応していることがわかる。

Safariの表示

Operaの表示

Internet Explorer 8の表示

　なお、blockボックスを横に並べて表示しようとした場合、floatやpositionプロパティを利用する必要があり、どうしてもスタイルシートの設定が複雑になる。しかし、inline-blockボックスを利用すれば、floatやpositionを利用せずに段組みなどのレイアウトを作成できるようになる。

　次回は、inline-blockボックスを利用した段組みの細かな設定方法などを紹介する。