We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CSSdisplay プロパティは、要素に使用されるレンダリングボックスの種類を指定します。 HTML では、display プロパティの既定値は、 HTML 仕様に記述されたふるまいか、ブラウザー/ユーザーの既定のスタイルシートに記述されたふるまいから採られます。 XML での既定値は、 SVG 要素を含め inline です。

さまざまなディスプレイボックスタイプに加えて、値 none を使用すると、要素を非表示にできます。 none は、すべての子孫要素も非表示にします。文書は、要素が文書木に存在しないかのようにレンダリングされます。

/* <display-outside> 値 */
display: block;
display: inline;
display: run-in;

/* <display-inside> 値 */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;

/* <display-outside> 値と <display-inside> 値 */
display: block flow;
display: inline table;
display: flex run-in;

/* <display-listitem> 値 */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* <display-internal> 値 */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* <display-box> 値 */
display: contents;
display: none;

/* <display-legacy> 値 */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* グローバル値 */
display: inherit;
display: initial;
display: unset;

初期値inline
適用対象全要素
継承不可
メディアすべて
計算値指定通り。ただし位置指定された要素とフロート、ルート要素を除く。これらは計算値が指定したものと違うキーワードになる可能性があります
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

display プロパティは、キーワード値を使用して指定します。キーワード値は 6 つのカテゴリーに分類されます:

現在は、1 つのキーワードを使用して display を指定することが最善です。最新の仕様書では複数のキーワードを組み合わせることができますが、ブラウザーの対応が不十分です。

<display-outside>
これらのキーワードは、要素の outer display type を指定します。これは本質的には、フローレイアウトにおける要素の役割です。以下の値が定義されています。
説明
block 要素は、ブロック要素ボックスを生成します。
inline 要素は、1 つ以上のインライン要素ボックスを生成します。
run-in 要素は、ランインボックスを生成します。ランイン要素は、周囲の要素に応じてインラインボックスまたはブロックボックスのようにふるまいます。
  • ランインボックスがブロックボックスを含んでいる場合は、ブロックボックスと同じになります。
  • ブロックボックスが後続する場合は、ブロックボックスの最初のインラインボックスになります。
  • インラインボックスが後続する場合は、ブロックボックスになります。
<display-inside>
これらのキーワードは、要素の inner display type を指定します。これは、要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。以下の値が定義されています:
説明
flow 要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。

outer display type が inline または run-in であり、またブロックまたはインラインの整形コンテキストに関係する場合は、インラインボックスを生成します。そうでない場合は、ブロックコンテナーボックスを生成します。

ほかのプロパティ (positionfloatoverflow など) の値や、要素自体がブロックまたはインラインの整形コンテキストに関係するかによって、新たな ブロック整形コンテキスト を生成する、または内容物が親の整形コンテキストに吸収されます。

flow-root 要素は、新たな ブロック整形コンテキスト を確立するブロック要素ボックスを生成します。
table <table> HTML 要素と同じようにふるまいます。これは、ブロックレベルボックスを定義します。
flex 要素は、ブロック要素のようにふるまいつつ、そのコンテンツを flexbox モデル に従ってレイアウトします。
grid 要素は、ブロック要素のようにふるまいつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。
subgrid 親要素で display:grid を指定しているとき、要素自体とその内容物をグリッドモデルに従ってレイアウトします。
ruby  要素は、インライン要素のようにふるまいつつ、そのコンテンツをルビ (ruby) モデルに従って、レイアウトします。HTML 要素の <ruby> のようにふるまいます。
<display-listitem>

要素は内容物のためのブロックボックスと、別にリストアイテムのインラインボックスを生成ます。

<display-inside> 値が指定されていない場合は、主ボックスの inner display type のデフォルト値が flow になります。<display-outside> 値が指定されていない場合は、主ボックスの outer display type のデフォルト値が block になります。

<display-internal>

table や ruby といったレイアウトモデルは、子孫が満たすことのできる役割が複数あり、内部構造が複雑です。このセクションではそれらの "internal" display 値を定義しており、この値は特定のレイアウトモード内でしか使用できません。

特に指定がない限り、これらの display 値を使用する要素の inner display type と outer display type の両方が、指定した値に設定されます。

説明
table-row-group 要素は <tbody> HTML 要素と同じようにふるまいます。
table-header-group 要素は <thead> HTML 要素と同じようにふるまいます。
table-footer-group 要素は <tfoot> HTML 要素と同じようにふるまいます。
table-row 要素は <tr> HTML 要素と同じようにふるまいます。
table-cell 要素は <td> HTML 要素と同じようにふるまいます。
table-column-group 要素は <colgroup> HTML 要素と同じようにふるまいます。
table-column 要素は <col> HTML 要素と同じようにふるまいます。
table-caption 要素は <caption> HTML 要素と同じようにふるまいます。
ruby-base 要素は、<rb> 要素のようにふるまいます。
ruby-text 要素は <rt> 要素のようにふるまいます。
ruby-base-container  要素は、無名ボックスとして生成される <rbc> 要素のようにふるまいます。
ruby-text-container  要素は <rtc> 要素のようにふるまいます。
<display-box>
これらの値は、要素がディスプレイボックスを生成するかを定義します。
説明
contents  この要素自身では特定のボックスを生成しません。疑似要素のボックスまたは子要素のボックスによって置換されます。CSS Display Level 3 仕様書では、"unusual elements" (置換要素のように、CSS のボックスの概念に従って描画されない要素) へ contents 値がどのように影響するべきかを定義していることに注意してください。詳しくは Appendix B: Effects of display: contents on Unusual Elements をご覧ください。
これはアクセシビリティツリーから要素を削除します。 — 読み上げソフトはその中が何であるかを見なくなります。
none

要素がレイアウトに影響しないようにするため、要素を非表示にします (文書は、要素が存在しなかったかのようにレンダリングされます)。すべての子孫要素も非表示になります。

要素は通常どおり領域を占めさせつつ、実際は何も描画させないようにするには、visibility プロパティを使用してください。

<display-legacy>
CSS 2 では display プロパティでキーワードが 1 個の構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。以下の値が定義されています:
説明
inline-block

要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては 1 個のインラインボックスであるかのようにふるまい、一緒に流し込まれるようになります (このふるまいは置換要素と同じです)

これは inline flow-root と等価です。

inline-table

inline-table 値は、HTML には直接的に対応するものがありません。これは、<table> HTML 要素と同じようにふるまいつつ、ブロックレベルボックスではなく、インラインボックスのようにふるまいます。テーブルボックスの内部はブロックレベルのコンテキストになります。

これは inline table と等価です。

inline-flex

要素は、インライン要素のようにふるまいつつ、そのコンテンツを flexbox モデルに従ってレイアウトします。

これは inline flex と等価です。

inline-grid 要素は、インライン要素のようにふるまいつつ、そのコンテンツをグリッドモデルに従って、レイアウトします。

形式文法

[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>

where
<display-outside> = block | inline | run-in
<display-inside> = flow | flow-root | table | flex | grid | subgrid | ruby
<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item
<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
<display-box> = contents | none
<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid

要素を隠す

HTML コンテンツ

<p>Visible text</p>
<p class="secret">Invisible text</p>

CSS コンテンツ

p.secret {
  display: none;
}

表示結果

アクセシビリティへの配慮

display: none;

display の値 none 又は content を要素で使用すると、その要素はアクセシビリティツリーから削除されます。すなわち、その要素とすべての子孫要素は読み上げ技術によって読み上げられなくなります。

要素を視覚的に隠したい場合は、よりアクセシブルな代替手段として、画面から視覚的に要素を削除しますが、読み上げソフトのような支援技術が解析可能な状態を維持するための、プロパティの組み合わせ を使用できます。

table 要素の display の値を blockgrid、あるいは flex に変更すると、アクセシビリティツリー での表現が変わります。これにより、表が読み上げ技術によって適切に読み上げられなくなります。

仕様書

仕様書 状態 備考
CSS Display Module Level 3
display の定義
草案 run-inflowflow-rootcontents、複数のキーワード値を追加。
CSS Ruby Layout Module Level 1
display の定義
草案 rubyruby-baseruby-textruby-base-containerruby-text-container の値を追加
CSS Grid Layout
display の定義
勧告候補 grid box モデルの値を追加
CSS Flexible Box Layout Module
display の定義
勧告候補 flexible box モデルの値を追加
CSS Level 2 (Revision 1)
display の定義
勧告 テーブルモデルの値と inline-block の値を追加
CSS Level 1
display の定義
勧告 初期定義。基本的な値として noneblockinlinelist-item

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1121471
list-item1121671
inline-block11216171
inline-table1123871
table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, and table-row-group1121871
flex

29

21 -webkit-

12

202

18 —?3

11

84

あり

9

6.1 -webkit-

inline-flex21 -webkit- 12

202

18 —?3

11

85

あり6.1 -webkit-
grid57

16

12 -ms-

5210 -ms- 44 ?
inline-grid5712 -ms- 5210 -ms- 44 ?
subgrid ? なし ? なし ? ?
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container ?12346 ? ? ?
run-in1 — 327 なし なし87 — 151 — 88
flow-root58 ?53 ?45 ?
contents

65

58 — 659

なし

37

あり — 5310

なし5211.1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり あり あり あり あり
list-item ? ? ? ? ? ? ?
inline-block ? ? ? ? ? ? ?
inline-table ? ? ? ? ? ? ?
table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, and table-row-group ? ? ? ? ? ? ?
flex ? ? ? ? ? ? ?
inline-flex ? ? ? ? ? ? ?
grid5757 ?5244 ?7.0
inline-grid5757 ?5244 ?7.0
subgrid ? ? ? ? ? ? ?
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container ? ? ? ? ? ? ?
run-in ? ? ? ? ? ? ?
flow-root5858 ? ?45 ?7.0
contents6565 ?575211.1 なし

1. Until Internet Explorer 8, inline-block is only for natural inline elements.

2. Firefox 28 added multi-line flexbox support.

3. From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

4. Supported as -ms-flexbox.

5. Supported as -ms-inline-flexbox.

6. From version 34: this feature is behind the layout.css.ruby.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

7. Before Chrome 4, run-in was not supported before inline elements.

8. Before Safari 5, run-in was not supported before inline elements.

9. From version 58 until version 65 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

10. Until version 53 (exclusive): this feature is behind the layout.css.display-contents.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, Sebastianz, dskmori, mokeke, ethertank, sosleepy, Foomin10
最終更新者: mfuji09,