display プロパティ

display 要素

Last update: 2008-09-09

display は要素が生成するボックスの表示方法を設定するプロパティで、大きな特徴としては、CSS においてブロック要素とインライン要素の２つに分けられる、これら「全ての要素」に対して block または inline を指定することができる。

display プロパティで指定できる値は CSS のレベルによって異なり、CSS 3 ではほとんどの値が利用可能になる。とはいえ、現在の各ブラウザの対応には差があり、対応数が多いのは Safari → Opera → Firefox という順番だ。Internet Explorer はほとんど対応しておらず、バージョン 8 での実装を待って確認する必要がある。

Firefox 3 の display プロパティへの対応

Firefox 3 では display の値inline-block と inline-table が実装された。これによって Firefox 3 の display の値への対応状況はこうなる。

注意：
項目の CSS level は Firefox 3 の話題ということで 2.1 と 3 のみの記載とします。
各値は詳細ページを置きますが、Firefox が対応していないプロパティは保留扱いです。
table プロパティの子要素 (table-row など) は一つのページにまとめています。
display property value
Allowed Values Validity CSS Outline
none ≫  ○ ∼ 2.1, 3 なにも生成されない
block ≫  ○ ∼ 2.1, 3 ブロック要素にする
inline ≫  ○ ∼ 2.1, 3 インライン要素にする
inline-block ≫  ○ 2.1, 3 インラインブロック要素にする
list-item ≫  ○ ∼ 2.1, 3 リスト要素の li 要素にする
run-in  × 2.1, 3 ランインボックスにする
compact  × 3 コンパクトボックスを置く
marker  × 対応無し 要素のボックス外側にマーカー用ボックスを生成する
table ≫  ○ 2.1, 3 table 要素にする
inline-table ≫  ○ 2.1, 3 インラインの table 要素にする
table-row ≫  ○ 2.1, 3 tr 要素にする
table-cell ≫  ○ 2.1, 3 td 要素, th 要素にする
table-row-group ≫  ○ 2.1, 3 tbody 要素にする
table-header-group ≫  ○ 2.1, 3 thead 要素にする
table-footer-group ≫  ○ 2.1, 3 tfoot 要素にする
table-column ≫  ○ 2.1, 3 col 要素にする
table-column-group ≫  ○ 2.1, 3 colgroup 要素にする
table-caption ≫  ○ 2.1, 3 caption 要素にする
ruby  × 3 ルビに関する値（未収集）
ruby-base  × 3 ルビに関する値（未収集）
ruby-text  × 3 ルビに関する値（未収集）
ruby-base-group  × 3 ルビに関する値（未収集）
ruby-text-group  × 3 ルビに関する値（未収集）
inherit  ○ 2.1 親要素の値を継承する

▲ Return to Top