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>
これらのキーワードは、本質的にフローレイアウトにおける要素の役割である、要素の外側の表示種別を指定します。以下の値が定義されています。
説明
block 要素は、ブロック要素ボックスを生成し、通常フローでは要素の前後に改行を生成します。
inline 要素は自分自身の前後に改行を生成しない、1 つ以上のインライン要素ボックスを生成します。通常フローでは、
run-in 要素は、ランインボックスを生成します。 display: run-in が定義された要素の隣接する兄弟がブロックボックスの場合、ランインボックスはその次のブロックスボックスの最初のインラインボックスになります。

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

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

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

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

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

説明
list-item  

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

XUL 値

非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

Firefox は以下の -moz- の接頭辞が付いた XUL 表示値に対応しています。

説明
-moz-box XUL ボックス、 flex とほぼ等価
-moz-inline-box XUL インラインボックス、 inline-flex とほぼ等価
-moz-grid Gecko 62 で廃止 XUL グリッド
-moz-inline-grid Gecko 62 で廃止 XUL インライングリッド
-moz-grid-group Gecko 62 で廃止 XUL グリッドグループ
-moz-grid-line Gecko 62 で廃止 XUL グリッド線
-moz-stack Gecko 62 で廃止 XUL スタック
-moz-inline-stack Gecko 62 で廃止 XUL インラインスタック
-moz-deck Gecko 62 で廃止 XUL デッキ
-moz-popup Gecko 62 で廃止 XUL ポップアップ

XUL 表示値はすべて、 -moz-box 及び -moz-inline-box を除き、 バグ 1288572 で削除されました。詳しくは this Firefox Site Compatibility post をご覧ください。

-moz-box 及び -moz-inline-box の値は後に バグ 879275 で削除される予定です。詳細は this Firefox Site Compatibility post をご覧ください。

形式文法

[ <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 を要素で使用すると、その要素はアクセシビリティツリーから削除されます。すなわち、その要素とすべての子孫要素は読み上げ技術によって読み上げられなくなります。

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

display: contents;

ブラウザーは display の値が contents であるすべての要素をアクセシビリティツリーから削除します。これにより、要素とその子孫要素すべてが読み上げ技術でアナウンスされなくなります。

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

仕様書

仕様書 状態 備考
CSS Display Module Level 3
display の定義
草案 run-in, flow, flow-root, contents, 複数のキーワード値を追加。
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
Multi-keyword values ? ? なし なし ? ?
list-item1121671
inline-block1121

8

61

71
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 — 283

11

84

16

15 -webkit-

12.1 — 15

9

6.1 -webkit-

inline-flex

29

21 -webkit-

12

202

18 —?5

11

86

16

15 -webkit-

9

6.1 -webkit-

grid57

16

12 -ms-

5210 -ms- 744 あり
inline-grid57

16

12 -ms-

5210 -ms- 744 ?
subgrid なし なし なし なし なし なし
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container ?12

38

34 — 388

? ? ?
run-in1 — 329 なし なし87 — 151 — 810
flow-root58 ?53 ?45 ?
contents

65

58 — 6511

なし

37

36 — 5312

なし5211.1
-moz-box and -moz-inline-box なし なし あり13 なし なし なし
-moz-grid, -moz-inline-grid, -moz-grid-group and -moz-grid-line なし なし あり — 62 なし なし なし
-moz-stack and -moz-inline-stack なし なし あり — 62 なし なし なし
-moz-deck なし なし あり — 62 なし なし なし
-moz-popup なし なし あり — 62 なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり124 あり あり あり
Multi-keyword values ? ? ? なし ? ? ?
list-item あり あり124 あり あり あり
inline-block あり あり124 あり あり あり
inline-table あり あり124 あり あり あり
table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, and table-row-group あり あり124 あり あり あり
flex

29

21 -webkit-

29

25 -webkit-

12

202

18 — 283

16

14 -webkit-

12.1 — 14

9

7.1 -webkit-

あり
inline-flex

29

21 -webkit-

29

25 -webkit-

12

202

18 —?5

16

14 -webkit-

9

6.1 -webkit-

あり
grid5757

16

12 -ms-

5244 あり7.0
inline-grid5757

16

12 -ms-

5244 ?7.0
subgrid なし なし なし なし なし なし なし
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container ? ?12

38

34 — 388

? ? ?
run-in あり — 329 あり — 329 なし なし ? あり — 810 ?
flow-root5858 ?5345 ?7.0
contents6565 なし575211.1 なし
-moz-box and -moz-inline-box なし なし なし あり13 なし なし なし
-moz-grid, -moz-inline-grid, -moz-grid-group and -moz-grid-line なし なし なし あり — 62 なし なし なし
-moz-stack and -moz-inline-stack なし なし なし あり — 62 なし なし なし
-moz-deck なし なし なし あり — 62 なし なし なし
-moz-popup なし なし なし あり — 62 なし なし なし

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 until version 28 (exclusive): 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. 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.

6. Supported as -ms-inline-flexbox.

7. Internet Explorer implements an older version of the specification.

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

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

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

11. 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.

12. From version 36 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.

13. Scheduled for removal (See bug 879275).

関連情報

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

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