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

エ・ビスコム・テック・ラボ
2008-05-08 17:00:00
  • このエントリーをはてなブックマークに追加

inline-blockボックス

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

 inline-blockボックスはblockボックスの一種だが、inlineボックスのように表示されるのが特徴だ。たとえば、

に対して「display: inline-block」と指定すると、「display: inline」と指定した場合と同じ表示になる。ここでは、inline-blockボックスを水色、inlineボックスを黄緑色で表示している。

Firefox 3の表示 Firefox 3の表示
div.inlineblock{
display: inline-block;
background-color: #00aaff;
}

div.inline{
display: inline;
background-color: #aaff00;
}
Inline-Block
Inline-Block
Inline
Inline
ブラウザで表示を確認する

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

ボックスの横幅を300ピクセルに指定したもの ボックスの横幅を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の表示 Safariの表示
Operaの表示 Operaの表示
Internet Explorer 8の表示 Internet Explorer 8の表示

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

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

  • コメント(1件)
#1 anonymous   2008-12-05 11:56:20
こちら↓でinline-block はIE6から使用できると書かれてるので試したところ、ちゃんと表示されました。

http://d.hatena.ne.jp/disable/20080701/p1

IE8 の仕様と何か違うところがあるのでしょうか?
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]