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

エ・ビスコム・テック・ラボ
2008-05-08 17:00:00
今回はFirefox 3のdisplayプロパティの値を検証していこう。
最新特集【一覧】

EPUB生成ツール「ReVIEW」について達人出版会の高橋氏に聞いてみた

1つのソースでEPUBとPDFを生成できる「ReVIEW」を試す

Snow Leopard探索記 最終回：線路は続くよどこまでも

　Firefox 3は、displayプロパティの値である「inline-block」と「inline-table」に対応した。これで、CSS 2.1で定義されたdisplayプロパティの値に一通り対応したことになる。そこで今回は、displayプロパティの基本と「inline-block」について紹介していきたい。また、SafariやOpera、Internet Explorerの対応状況も紹介する。

displayプロパティと基本的なボックスの種類

　displayはボックスの種類を指定するプロパティだ。まずは、基本的なボックスの種類を再確認しておこう。

　HTML/XHTMLではタグでマークアップした部分が四角形のボックスとして扱われる。ボックスにはいくつかの種類があり、タグごとに標準でどのボックスになるかが定義されている。

　基本となるボックスの種類は「block（ブロック）」と「inline（インライン）」の2種類。たとえば、

や

でマークアップした部分はblockボックス、やでマークアップした部分はinlineボックスとなる。

　たとえば、

との表示を比べると以下のようになる。ここではボックスの範囲をわかりやすくするため、
の背景を黄緑色に、の背景をオレンジ色に設定した。すると、
で構成されるblockボックスは横幅いっぱいの大きさになるが、で構成されるinlineボックスはコンテンツの大きさになることがわかる。また、blockボックスは1行ずつ独立して表示されるが、inlineボックスは横に並んで表示される。

blockボックス（黄緑色）とinlineボックス（オレンジ色） blockボックス（黄緑色）とinlineボックス（オレンジ色） 
div{
background-color: #aaff00;
}

span{
background-color: #ffaa00
}




DIVでマークアップ



DIVでマークアップ


SPANでマークアップ

SPANでマークアップ
※ブラウザで表示を確認する

　ここでdisplayプロパティを利用すると、

やで構成されるボックスの種類を変えることができる。次のように指定すると、
をinlineボックスに、をblockボックスに変えることが可能だ。

<div>と<span>のボックスの種類を逆にしたもの
とのボックスの種類を逆にしたもの 
div{
display: inline;
background-color: #aaff00;
}

span{
display: block;
background-color: #ffaa00
}
※ブラウザで表示を確認する
  • コメント（1件）
#1 anonymous   2008-12-05 11:56:20
こちら↓でinline-block はIE6から使用できると書かれてるので試したところ、ちゃんと表示されました。

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

IE8 の仕様と何か違うところがあるのでしょうか？
  • 新着記事
  • 特集
  • ブログ