Firefox 3が対応したdisplayプロパティの値（1）
今回はFirefox 3のdisplayプロパティの値を検証していこう。
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種類。たとえば、<div>や<p>でマークアップした部分はblockボックス、<span>や<a>でマークアップした部分はinlineボックスとなる。
たとえば、<div>と<span>の表示を比べると以下のようになる。ここではボックスの範囲をわかりやすくするため、<div>の背景を黄緑色に、<span>の背景をオレンジ色に設定した。すると、<div>で構成されるblockボックスは横幅いっぱいの大きさになるが、<span>で構成されるinlineボックスはコンテンツの大きさになることがわかる。また、blockボックスは1行ずつ独立して表示されるが、inlineボックスは横に並んで表示される。
blockボックス（黄緑色）とinlineボックス（オレンジ色）
div {
background-color: #aaff00;
}
span {
background-color: #ffaa00
}
<body> <div>DIVでマークアップ</div> <div>DIVでマークアップ</div> <span>SPANでマークアップ</span> <span>SPANでマークアップ</span> </body>
※ブラウザで表示を確認する
ここでdisplayプロパティを利用すると、<div>や<span>で構成されるボックスの種類を変えることができる。次のように指定すると、<div>をinlineボックスに、<span>をblockボックスに変えることが可能だ。
<div>と<span>のボックスの種類を逆にしたもの
div {
display: inline;
background-color: #aaff00;
}
span {
display: block;
background-color: #ffaa00
}
※ブラウザで表示を確認する
- 特集: FirefoxとSafariのCSS徹底検証 （20件）
現場の知見から得られるノウハウを共有しましょう- 2日前のトップ記事
- 3日前
- 4日前
- 5日前
仮想化によるコスト削減を見える化：オンラインTCOカリキュレータ
Ruby・Python・JavaScript・PHPについてどう思いますか？：Tim Brayに聞いてみた
来日したゲイツ氏が経団連で行ったスピーチ全文
グリーンITと「幼年期の終わり」
Web開発者向けツール Opera Dragonflyのアルファ版が登場
あなたがプログラムを理解できない10の理由：第1回
Rubyでどう書く？：RubyでPDF履歴書を作成する
Neil YoungがJavaOneにやってきた- ホワイトペーパー
内部統制対策を実現するIT運用管理ツール
-Simplify IT- ITをシンプルに 連載第2回
オンラインマーケティングの最重要課題- 話題のタグ
