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ボックスは横に並んで表示される。
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 {
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回
オンラインマーケティングの最重要課題