概要
display
CSS プロパティは要素のレンダリングに使用されるボックスの種類を指定します。HTML では、display
プロパティのデフォルト値は、HTML 仕様に記述されたふるまいか、ブラウザ/ユーザのデフォルトのスタイルシートに記述されたふるまいから採られます。XML でのデフォルト値は inline
です。
様々なディスプレイボックスタイプに加えて、値 none
を使用すると、要素を非表示にできます。none
は、すべての子孫要素も非表示にします。文書は、要素が文書木に存在しないかのようにレンダリングされます。
初期値 | inline |
---|---|
適用対象 | 全要素 |
継承 | 不可 |
メディア | all |
計算値 | 指定通り。ただし位置指定された要素とフロート、ルート要素を除く。これらは計算値が指定したものと違うキーワードになる可能性があります |
アニメーションの可否 | 不可 |
正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
display: none; display: inline; display: block; display: contents; display: list-item; display: inline-block; display: inline-table; display: table; display: table-cell; display: table-column; display: table-column-group; display: table-footer-group; display: table-header-group; display: table-row; display: table-row-group; display: flex; display: inline-flex; display: grid; display: inline-grid; display: ruby; display: ruby-base; display: ruby-text; display: ruby-base-container; display: ruby-text-container ; display: run-in; display: inherit display: initial display: unset
値
display-value
- 要素に適用するレンダリングタイプを定義するキーワードです。取り得る値とその意味は以下のとおりです。
値集合 値 説明 Basic values (CSS 1) none
要素の表示を非表示にします(レイアウトに影響しないようになります)。すべての子孫要素も非表示になります。文書は、要素が存在しなかったかのようにレンダリングされます。
要素ボックスは通常どおりレイアウトを占めさせつつ、内容は見えなくさせたい場合は、
visibility
プロパティを参照してください。inline
要素は、1つ以上のインライン要素ボックスを生成します。 block
要素は、ブロック要素ボックスを生成します。 list-item
要素は、コンテンツのためのブロックボックスを1つと、それとは別のリストマーカ用のインラインボックスを1つ生成します。 Extended values (CSS 2.1) inline-block
要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては一個のインラインボックスであるかのようにふるまい、一緒に流し込まれるようになります(このふるまいは置換要素とほぼ同じです) Table model values (CSS 2.1) inline-table
inline-table
値は、HTMLには直接的に対応するものがありません。これは、<table>
要素と同じようにふるまいつつ、ブロックレベルボックスではなく、インラインボックスのようにふるまいます。テーブルボックスの内部はブロックレベルのコンテキストになります。table
<table>
要素と同じようにふるまいます。これは、ブロックレベルボックスを定義します。table-caption
<caption>
要素と同じようにふるまいます。table-cell
<td>
要素と同じようにふるまいます。table-column
<col>
要素と同じようにふるまいます。table-column-group
<colgroup>
要素と同じようにふるまいます。table-footer-group
<tfoot>
要素と同じようにふるまいます。table-header-group
<thead>
要素と同じようにふるまいます。table-row
<tr>
要素と同じようにふるまいます。table-row-group
<tbody>
要素と同じようにふるまいます。Flexbox model values (CSS3) flex
要素は、ブロック要素のようにふるまいつつ、そのコンテンツを flexbox モデルに従ってレイアウトします。 inline-flex
要素は、インライン要素のようにふるまいつつ、そのコンテンツを flexbox モデルに従ってレイアウトします。 Grid box model values (CSS3) grid
要素は、ブロック要素のようにふるまいつつ、そのコンテンツをグリッドモデルに従って、レイアウトします。
これは実験的機能で、ほとんどのブラウザでサポートされていません。特に-moz-grid
はこれのプレフィックス付きバージョンではなく、ウェブサイトで使ってはいけない XUL レイアウトモデル 用です。inline-grid
要素は、インライン要素のようにふるまいつつ、そのコンテンツをグリッドモデルに従って、レイアウトします。 Ruby formatting model values (CSS3) ruby
要素は、インライン要素のようにふるまいつつ、そのコンテンツをルビ (ruby) モデルに従って、レイアウトします。HTML 要素の <ruby>
のようにふるまいます。ruby-base
要素は、 <rb>
要素のようにふるまいます。ruby-text
要素は、 <rt>
要素のようにふるまいます。ruby-base-container
要素は、 <rbc>
要素のようにふるまいます。ruby-text-container
要素は、 <rtc>
要素のようにふるまいます。Experimental values run-in
- ブロックボックスを含んでいる場合は、ブロックボックスと同じになります。
- ブロックボックスが後続する場合は、ブロックボックスの最初のインラインボックスになります。
- インラインボックスが後続する場合は、ブロックボックスになります。
contents
この要素自身では特定のボックスを生成しません。疑似要素のボックスまたは子要素のボックスによって配置されます。
公式文法
none | inline | block | list-item | inline-block | inline-table | table | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | flex | inline-flex | grid | inline-grid | run-in | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents
例
p.secret { display: none } <p style="display:none"> invisible text </p>
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
CSS Basic Box Model The definition of 'display' in that specification. |
草案 | run-in の値を追加 |
CSS Ruby Layout Module Level 1 The definition of 'display' in that specification. |
草案 | ruby 、ruby-base 、ruby-text 、ruby-base-container 、ruby-text-container の値を追加 |
CSS Grid Layout The definition of 'display' in that specification. |
草案 | grid box の値を追加 |
CSS Flexible Box Layout Module The definition of 'display' in that specification. |
Last Call Working Draft | flexible box モデルの値を追加 |
CSS Level 2 (Revision 1) The definition of 'display' in that specification. |
勧告 | テーブルモデルの値とinline-block の値を追加 |
CSS Level 1 The definition of 'display' in that specification. |
勧告 | 基本的な値として none , block , inline , list-item |
ブラウザ実装状況
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
none , inline and block |
1.0 | 1.0 (1.0) | 4.0 | 7.0 | 1.0 (85) |
inline-block |
1.0 | 3.0 (1.9) | 5.5 (-7.0) natural なインライン要素のみ |
7.0 | 1.0 (85) |
list-item |
1.0 | 1.0 (1.0) | 6.0 | 7.0 | 1.0 (85) |
run-in |
1.0 インライン要素より前に置けない |
未サポート | 8.0 | 7.0 | 1.0 (85) インライン要素の前に置けない |
4.0 32 で削除 |
5.0 (532.5) | ||||
inline-table |
1.0 | 3.0 (1.9) | 8.0 | 7.0 | 1.0 (85) |
table , table-cell , table-column , table-colgroup , table-header-group , table-row-group , table-footer-group , table-row , table-caption |
1.0 | 1.0 (1.7 or earlier) | 8.0 | 7.0 | 1.0 (85) |
flex |
21.0-webkit | 18.0 (18.0)(behind a pref) [1] 20.0 (20.0) |
未サポート | 12.50 | 未サポート |
inline-flex |
21.0-webkit | 18.0 (18.0)(behind a pref) [1] 20.0 (20.0) |
未サポート | 12.50 | 未サポート |
grid |
? | 未サポート | 10.0-ms | ? | ? |
inline-grid |
? | 未サポート | 10.0-ms | ? | ? |
ruby , ruby-base , ruby-text , ruby-base-container , ruby-text-container |
? | 34.0 (34.0) (behind a pref) [3] | ? | ? | ? |
contents |
未サポート | 37 (37) [2] | 未サポート | 未サポート | 未サポート |
機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基本サポート | ? | ? | ? | ? | ? |
[1] Firefox は、シングルラインのフレックスボックスだけをサポートします。フレックスボックスのサポートを有効化するには、Firefox 18 と 19 では、ユーザーが about:config 環境設定で "layout.css.flexbox.enabled" を true
に変更する必要があります。