HTML・CSSリファレンス

CSSで要素の表示形式を指定（display）

displayプロパティではその要素の表示形式を指定します。

指定できる値

displayプロパティに指定できる値は様々なものがありますが、ブラウザのサポート状況はまちまちのようです。

殆どのブラウザでサポートされている値

プロパティ: 値	説明
display: inline	指定された要素をインライン要素として扱う
display: block	指定された要素をブロック要素として扱う
display: none	指定された要素を生成しない。 「非表示にする」にはvisibility: hiddenを指定。
display: list-item	要素に主要ブロックボックスとリスト項目のマーカーボックスを生成させる。HTMLのli要素と似た働き。

サポート状況がまちまちな値

プロパティ: 値	説明	IE 6	Fx	Op
display: run-in	通常のブロックボックスが次に続く場合、そのランインボックスは、後に続くブロックボックスの最初の子供インラインボックスになります。
display: compact	dl要素 の compact属性(値) を付けたものと同じ効果。通常のブロックボックスが次に続く場合、その左の余白内に、コンパクトボックスが一行で収まる場合にはその余白内にコンパクトボックスを置きます。	×	×	○
display: marker	あるボックスの前又は後に生成内容としてマーカーを宣言します。この値は、ブロック要素に取り付けた':before'又は':after'にのみ適用可能です。それ以外の要素に適用した場合、この値は[inline]扱いになります。	×	○	○

table関係の値

プロパティ: 値	説明	IE 6	Fx	Op
display: table	当該要素をブロックの表要素にする HTMLでいうtable要素	×	○	○
display: inline-table	当該要素をインラインレベルの表要素にする HTMLでいうtable要素 ただし、ブロックでは無くインラインレベルで生成	×	○	○
display: table-row	当該要素を表の行要素にする HTMLでいうtr要素	×	○	○
display: table-row-group	当該要素を行グループ要素にする HTMLでいうtbody要素	×	○	○
display: table-header-group	[table-row-group]と同じ 視覚整形の際にはあらゆるほかの行より先に、表題より後に表示される 印刷を行うUAは、表が複数のページに渡る場合、各ぺージの先頭にこの行グループを繰り返しても良い ただし、この値を伴った要素が同じ表要素内に複数出現した場合、どう処理するかは決まっていない HTMLでいうthead要素	×	○	○
display: table-footer-group	[table-row-group]と同じ 視覚整形の際にはあらゆるほかの行より後に、下部表題より先に表示される ページ媒体を用いるUA は、表が複数のページに渡る場合、各ぺージの末尾にこの行グループを繰り返しても良い ただし、この値を伴った要素が同じ表要素内に複数出現した場合、どう処理するかは決まっていない HTMLでいうtfoot要素	×	○	○
display: table-column	当該要素を列要素にする HTMLでいうcol属性	×	○	○
display: table-column-group	当該要素を列グループ要素にする HTMLでいうcolgroup属性	×	○	○
display: table-cell	当該要素を表のセル要素にする HTMLでいうtd、th要素	×	○	○
display: table-caption	当該要素を表題にする ただし、この値を伴った要素が同じ表要素内に複数出現した場合、どう処理するかは決まっていない HTMLでいうcaption要素	×	○	○