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

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

 Firefox 3は、displayプロパティの値である「inline-block」と「inline-table」に対応した。これで、CSS 2.1で定義されたdisplayプロパティの値に一通り対応したことになる。そこで今回は、displayプロパティの基本と「inline-block」について紹介していきたい。また、SafariOperaInternet 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 の仕様と何か違うところがあるのでしょうか?
  • 新着記事
  • 特集
  • ブログ