Firefox 3が対応したdisplayプロパティの値(2)
エ・ビスコム・テック・ラボ
2008-05-09 12:06:01
前回に続いて、Firefox 3が対応したdisplayプロパティの値「inline-block」を紹介する。
inline-blockボックスを利用した横組みメニューのレイアウト
横組みのメニューも、floatプロパティを利用するレイアウトの1つだ。メニューは
- と
- によるリスト形式で記述することが多いが、
- でマークアップした部分はblockボックスの一種であるlist-itemボックスとなる。そのため、標準では縦に並んだレイアウトになり、横に並べるためにはfloatプロパティを利用することになる。
リスト形式でマークアップしたメニューの表示(スタイルシートの設定なし)
※ブラウザで表示を確認する
ここでも、段組みのときと同じように「display: inline-block」を利用することができる。
- のボックスを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; }※ブラウザで表示を確認する
なお、上のソースではリンクは文字の上でしか機能しない。でマークアップした部分はinlineボックスとなるためだ。の背景をオレンジ色で表示すると次のようになっていることがわかる。
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; }※ブラウザで表示を確認する
ボタン全体でリンクを機能させるには、でマークアップした部分の横幅と高さを指定しなければならない。しかし、inlineボックスに対する横幅や高さの設定は無効となる。このような場合も、inline-blockボックスを利用することが可能だ。
のボックスをinline-blockボックスに変更して、ボタンの横幅と高さを指定したwidthとpaddingの設定をに適用するように変更すれば、ボタン全体でリンクを機能させることができる。
ボタン全体をのボックスで表示したもの
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; }※ブラウザで表示を確認する
SafariやOpera、Internet Explorer 8(ベータ版)での表示は次のようになる。
Safariの表示
Operaの表示
Internet Explorer 8の表示
なお、Internet Explorer 6と7は、やといったインライン要素に対する「display: inline-block」の指定にだけは対応している。そのため、上記のメニューを表示してみると、に対するinline-blockの設定だけが機能することがわかる。
Internet Explorer 7の表示
次回は、Firefox 3がもうひとつ対応したdisplayプロパティの値「inline-table」を紹介する。
- ホワイトペーパー



