builder Top
HTML/CSS
- XHTML
- Internet Explorer
- Webデザイン
- HTML
- Firefox
- ...

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

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

2008/05/09 12:06

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

inline-blockボックスを利用した横組みメニューのレイアウト

　横組みのメニューも、floatプロパティを利用するレイアウトの1つだ。メニューは<ul>と<li>によるリスト形式で記述することが多いが、<li>でマークアップした部分はblockボックスの一種であるlist-itemボックスとなる。そのため、標準では縦に並んだレイアウトになり、横に並べるためにはfloatプロパティを利用することになる。

リスト形式でマークアップしたメニューの表示（スタイルシートの設定なし）

<ul>
<li><a href="～">AAAAAA</a></li>
<li><a href="～">BBBBBB</a></li>
<li><a href="～">CCCCCC</a></li>
<li><a href="～">DDDDDD</a></li>
</ul>

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

　ここでも、段組みのときと同じように「display: inline-block」を利用することができる。<li>のボックスをinline-blockボックスに変更すれば、次のようにメニューを横に並べて表示することができる。ここでは、各リンクを四角いボタンの形で表示するため、横幅や背景色なども設定している。

メニューを横に並べて表示したもの

ul	{
	margin: 0;
	padding: 0;
	}

li	{
	display: inline-block;
	width: 100px;
	padding: 10px 0;
	background-color: #00ccff;
	border: solid 1px #666666;
	text-align: center;
	}

a	{
	color: #000000;
	text-decoration: none;
	}

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

　なお、上のソースではリンクは文字の上でしか機能しない。<a>でマークアップした部分はinlineボックスとなるためだ。<a>の背景をオレンジ色で表示すると次のようになっていることがわかる。

<a>の背景をオレンジ色で表示したもの

ul	{
	margin: 0;
	padding: 0;
	}

li	{
	display: inline-block;
	width: 100px;
	padding: 10px 0;
	background-color: #00ccff;
	border: solid 1px #666666;
	text-align: center;
	}

a	{
	color: #000000;
	text-decoration: none;
	background-color: #ffcc00;
	}

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

　ボタン全体でリンクを機能させるには、<a>でマークアップした部分の横幅と高さを指定しなければならない。しかし、inlineボックスに対する横幅や高さの設定は無効となる。このような場合も、inline-blockボックスを利用することが可能だ。

　<a>のボックスをinline-blockボックスに変更して、ボタンの横幅と高さを指定したwidthとpaddingの設定を<a>に適用するように変更すれば、ボタン全体でリンクを機能させることができる。

ボタン全体を<a>のボックスで表示したもの

ul	{
	margin: 0;
	padding: 0;
	}

li	{
	display: inline-block;
	background-color: #00ccff;
	border: solid 1px #666666;
	text-align: center;
	}

a	{
	color: #000000;
	text-decoration: none;
	background-color: #ffcc00;
	display: inline-block;
	width: 100px;
	padding: 10px 0;
	}