CSSdisplay プロパティは、要素の表示種別を指定し、これは要素がボックスを生成する方法の二つの基本的な品質から成ります。 — 外部表示種別はボックスがフローレイアウトにどのように加わるのかを定義し、内部表示種別はボックスの子がどのように配置されるのかを定義します。

display の一部の値は完全に個別の仕様書で定義されています。すべての関連する仕様書へのリンクについては、この文書の末尾の表をご覧ください。すべての値は以下の通りです。

/* <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-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 つのカテゴリに分類されます。

<display-outside>
これらのキーワードは、本質的に要素のフローレイアウトの役割を表す、要素の外部表示種別を指定します。
<display-inside>
これらのキーワードは、要素の内部の表示種別を指定します。これは、要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。
<display-listitem>
要素は内容のためにブロックボックスと、個別のリスト項目のインラインボックスを生成します。
<display-internal>
tableruby のような一部のレイアウトモデルでは、複雑な内部構造があり、様々なその子要素や子孫要素が担う様々な役割があります。この節ではこれらを「内部の」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。
<display-box>
これらのキーワードは、要素が表示ボックスを作るかどうかを定義します。
<display-legacy>
CSS 2 では display プロパティで単一のキーワードによる構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。
<display-xul>  非推奨 Gecko 62
主に XUL 文書のスタイル付けに使用される Firefox のみの値です。

display の「従来型」の値

Level 3 仕様書は display プロパティに二つの値を — 外部および内部の表示種別を指定を明示的に行うために — 説明しています。しかし、これはブラウザーの対応が不十分です。

display の従来型の方法は、単一のキーワード値で同じ結果を生み出すので、二つのキーワード値による指定の対応が進むまで利用してください。例えば、二つの値でインラインフレックスコンテナーは次のように指定することができます。

.container {
    display: inline flex;
}

現在は、単一の値を使用して指定することができます。

.container {
    display: inline-flex;
}

形式文法

[ <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 | 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

display で設定できるざまざまな値の型のそれぞれのページでは、その値の例をいくつか紹介しています。 — 構文の節をご覧ください。

加えて、特定の値によって有効になるレイアウトモデルの詳細な説明は、 MDN の他の場所にあります。

アクセシビリティの考慮事項

display: none;

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

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

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 の定義
草案 ruby, ruby-base, ruby-text, ruby-base-container, ruby-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 の定義
勧告 初回定義。基本的な値として none, block, inline, list-item

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Multi-keyword values
実験的
Chrome ? Edge ? Firefox 未対応 なしIE 未対応 なしOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 未対応 なしOpera Android ? Safari iOS ? Samsung Internet Android ?
list-itemChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 6Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
inline-blockChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 8
完全対応 8
部分対応 6
補足
補足 Until Internet Explorer 8, inline-block is only for natural inline elements.
Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
inline-tableChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3IE 完全対応 8Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, and table-row-groupChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 8Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
flexChrome 完全対応 29
完全対応 29
完全対応 21
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 20
補足
完全対応 20
補足
補足 Firefox 28 added multi-line flexbox support.
未対応 18 — 28
無効
無効 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.
IE 完全対応 11
完全対応 11
完全対応 8
代替名
代替名 非標準の名前 -ms-flexbox を使用しています。
Opera 完全対応 16
完全対応 16
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 12.1 — 15
Safari 完全対応 9
完全対応 9
完全対応 6.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 4.4
完全対応 4.4
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 29
完全対応 29
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 12Firefox Android 完全対応 20
補足
完全対応 20
補足
補足 Firefox 28 added multi-line flexbox support.
未対応 18 — 28
無効
無効 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.
Opera Android 完全対応 16
完全対応 16
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 12.1 — 14
Safari iOS 完全対応 9
完全対応 9
完全対応 7.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 あり
inline-flexChrome 完全対応 29
完全対応 29
完全対応 21
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 20
補足
完全対応 20
補足
補足 Firefox 28 added multi-line flexbox support.
未対応 18 — ?
無効
無効 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.
IE 完全対応 11
完全対応 11
完全対応 8
代替名
代替名 非標準の名前 -ms-inline-flexbox を使用しています。
Opera 完全対応 16
完全対応 16
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 9
完全対応 9
完全対応 6.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 4.4
完全対応 4.4
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 29
完全対応 29
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 12Firefox Android 完全対応 20
補足
完全対応 20
補足
補足 Firefox 28 added multi-line flexbox support.
未対応 18 — ?
無効
無効 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.
Opera Android 完全対応 16
完全対応 16
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 9
完全対応 9
完全対応 6.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 あり
grid
実験的
Chrome 完全対応 57Edge 完全対応 16
完全対応 16
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 完全対応 52IE 部分対応 10
接頭辞付き 補足
部分対応 10
接頭辞付き 補足
接頭辞付き -ms- のベンダー接頭辞が必要
補足 Internet Explorer implements an older version of the specification.
Opera 完全対応 44Safari 完全対応 ありWebView Android 完全対応 57Chrome Android 完全対応 57Edge Mobile 完全対応 16
完全対応 16
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox Android 完全対応 52Opera Android 完全対応 44Safari iOS 完全対応 ありSamsung Internet Android 完全対応 7.0
inline-grid
実験的
Chrome 完全対応 57Edge 完全対応 16
完全対応 16
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 完全対応 52IE 部分対応 10
接頭辞付き 補足
部分対応 10
接頭辞付き 補足
接頭辞付き -ms- のベンダー接頭辞が必要
補足 Internet Explorer implements an older version of the specification.
Opera 完全対応 44Safari ? WebView Android 完全対応 57Chrome Android 完全対応 57Edge Mobile 完全対応 16
完全対応 16
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox Android 完全対応 52Opera Android 完全対応 44Safari iOS ? Samsung Internet Android 完全対応 7.0
subgrid
非推奨
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container
実験的
Chrome ? Edge 完全対応 12Firefox 完全対応 38
完全対応 38
未対応 34 — 38
無効
無効 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.
IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile 完全対応 12Firefox Android 完全対応 38
完全対応 38
未対応 34 — 38
無効
無効 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.
Opera Android ? Safari iOS ? Samsung Internet Android ?
run-in
実験的
Chrome 未対応 1 — 32
補足
未対応 1 — 32
補足
補足 Before Chrome 4, run-in was not supported before inline elements.
Edge 未対応 なしFirefox 未対応 なしIE 完全対応 8Opera 未対応 7 — 15Safari 未対応 1 — 8
補足
未対応 1 — 8
補足
補足 Before Safari 5, run-in was not supported before inline elements.
WebView Android 未対応 ? — 4.4.3
補足
未対応 ? — 4.4.3
補足
補足 Before version 4, run-in was not supported before inline elements.
Chrome Android 未対応 ? — 32
補足
未対応 ? — 32
補足
補足 Before Chrome 4, run-in was not supported before inline elements.
Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android ? Safari iOS 未対応 ? — 8
補足
未対応 ? — 8
補足
補足 Before Safari 5, run-in was not supported before inline elements.
Samsung Internet Android ?
flow-root
実験的
Chrome 完全対応 58Edge ? Firefox 完全対応 53IE ? Opera 完全対応 45Safari ? WebView Android 完全対応 58Chrome Android 完全対応 58Edge Mobile ? Firefox Android 完全対応 53Opera Android 完全対応 45Safari iOS ? Samsung Internet Android 完全対応 7.0
contents
実験的
Chrome 完全対応 65
完全対応 65
未対応 58 — 65
無効
無効 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.
Edge 未対応 なしFirefox 完全対応 37
完全対応 37
未対応 36 — 53
無効
無効 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.
IE 未対応 なしOpera 完全対応 52Safari 完全対応 11.1WebView Android 完全対応 65Chrome Android 完全対応 65Edge Mobile 未対応 なしFirefox Android 完全対応 57Opera Android 完全対応 52Safari iOS 完全対応 11.1Samsung Internet Android 未対応 なし
contents: Specific behavior of unusual elements when display: contents is applied to them
実験的
Chrome ? Edge 未対応 なしFirefox 完全対応 59IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 完全対応 59Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?
-moz-box and -moz-inline-box
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 あり
補足
完全対応 あり
補足
補足 Scheduled for removal (See bug 879275).
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 あり
補足
完全対応 あり
補足
補足 Scheduled for removal (See bug 879275).
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
-moz-grid, -moz-inline-grid, -moz-grid-group and -moz-grid-line
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 ? — 62IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 ? — 62Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
-moz-stack and -moz-inline-stack
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 ? — 62IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 ? — 62Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
-moz-deck
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 ? — 62IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 ? — 62Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
-moz-popup
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 ? — 62IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 ? — 62Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

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

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