CSS 表示方法

CSS 表示方法は CSS のモジュールの一つで、 CSS 整形ボックスツリーがどのように文書の要素ツリーから生成されるかを定義し、制御するプロパティを定義します。

リファレンス

CSS プロパティ

CSS データ型

ガイド

CSS フローレイアウト (display: block, display: inline)

display: flex

display: grid

仕様書

仕様書 状態 備考
CSS Display Module Level 3
display の定義		 勧告候補 run-in, flow, flow-root, contents および複数キーワードの値を追加。
CSS Level 2 (Revision 1)
display の定義		 勧告 テーブルモデルの値と inline-block を追加。
CSS Level 1
display の定義		 勧告 初回定義。基本的な値: none, block, inline, list-item

CSS Display 仕様書 Level 3 に加え、他の仕様書でも display の様々な値の動作を定義しています。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
displayChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 あり
contentsChrome 完全対応 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 完全対応 52
完全対応 52
未対応 45 — 52
無効
無効 From version 45 until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 11.1WebView Android 完全対応 65Chrome Android 完全対応 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.
Firefox Android 完全対応 57Opera Android 完全対応 47
完全対応 47
未対応 43 — 47
無効
無効 From version 43 until version 47 (exclusive): this feature is behind the Enable experimental Web Platform features preference.
Safari iOS 完全対応 11.3Samsung Internet Android 完全対応 あり
contents: Specific behavior of unusual elements when display: contents is applied to themChrome 完全対応 58Edge 未対応 なしFirefox 完全対応 59IE 未対応 なしOpera 完全対応 45Safari 未対応 なしWebView Android 完全対応 65Chrome Android 完全対応 58Firefox Android 完全対応 59Opera Android 完全対応 43Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
<display-outside>Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
display-outside.run-in
実験的
Chrome 未対応 1 — 32
補足
未対応 1 — 32
補足
補足 Before Chrome 4, run-in was not supported before inline elements.
Edge 未対応 なしFirefox 未対応 なしIE 完全対応 8Opera 未対応 7 — 19Safari 未対応 1 — 8
補足
未対応 1 — 8
補足
補足 Before Safari 5, run-in was not supported before inline elements.
WebView Android 未対応 ≤37 — ≤37Chrome Android 未対応 18 — 32Firefox Android 未対応 なしOpera Android 未対応 10.1 — 19Safari iOS 未対応 1 — 8
補足
未対応 1 — 8
補足
補足 Before Safari 5, run-in was not supported before inline elements.
Samsung Internet Android 未対応 1.0 — 2.0
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
補足
補足 IE incorrectly positions inline block content inside flex containers. See the discussion on Microsoft Answers.
部分対応 8
補足 代替名
補足 IE incorrectly positions inline block content inside flex containers. See the discussion on Microsoft Answers.
代替名 非標準の名前 -ms-flexbox を使用しています。
Opera 完全対応 16
完全対応 16
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 12.1 — 15
Safari 完全対応 9
完全対応 9
完全対応 6.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 4.4
完全対応 4.4
完全対応 ≤37
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 29
完全対応 29
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 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
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 あり
flow-rootChrome 完全対応 58Edge 未対応 なしFirefox 完全対応 53IE 未対応 なしOpera 完全対応 45Safari 未対応 なしWebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 完全対応 53Opera Android 完全対応 43Safari iOS 未対応 なしSamsung Internet Android 完全対応 7.0
gridChrome 完全対応 57Edge 完全対応 16
完全対応 16
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 完全対応 52IE 部分対応 10
接頭辞付き 補足
部分対応 10
接頭辞付き 補足
接頭辞付き -ms- のベンダー接頭辞が必要
補足 Internet Explorer implements an older version of the specification.
Opera 完全対応 44Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57Firefox Android 完全対応 52Opera Android 完全対応 43Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 7.0
inline-blockChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 8
完全対応 8
部分対応 6
補足
補足 Until Internet Explorer 8, inline-block is only for natural inline elements.
Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 あり
inline-flexChrome 完全対応 29
完全対応 29
完全対応 21
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 20
補足
完全対応 20
補足
補足 Firefox 28 added multi-line flexbox support.
未対応 18 — 20
無効
無効 From version 18 until version 20 (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-inline-flexbox を使用しています。
Opera 完全対応 16
完全対応 16
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 9
完全対応 9
完全対応 6.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 4.4
完全対応 4.4
完全対応 ≤37
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 29
完全対応 29
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 20
補足
完全対応 20
補足
補足 Firefox 28 added multi-line flexbox support.
未対応 18 — 20
無効
無効 From version 18 until version 20 (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- のベンダー接頭辞が必要
Safari iOS 完全対応 9
完全対応 9
完全対応 6.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 あり
inline-gridChrome 完全対応 57Edge 完全対応 16
完全対応 16
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 完全対応 52IE 部分対応 10
接頭辞付き 補足
部分対応 10
接頭辞付き 補足
接頭辞付き -ms- のベンダー接頭辞が必要
補足 Internet Explorer implements an older version of the specification.
Opera 完全対応 44Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57Firefox Android 完全対応 52Opera Android 完全対応 43Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 7.0
inline-tableChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3IE 完全対応 8Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 あり
list-itemChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 6Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 あり
list-item: Supported on <legend>Chrome 完全対応 71Edge 未対応 なしFirefox 完全対応 64IE 未対応 なしOpera 完全対応 58Safari 未対応 なしWebView Android 完全対応 71Chrome Android 完全対応 71Firefox Android 完全対応 64Opera Android 完全対応 50Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
Multi-keyword values
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 70IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
noneChrome 完全対応 1
補足
完全対応 1
補足
補足 Chrome 65 stopped creating layout objects for elements inside an <iframe> with display:none applied.
Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7
補足
完全対応 7
補足
補足 Opera 52 stopped creating layout objects for elements inside an <iframe> with display:none applied.
Safari 完全対応 1WebView Android 完全対応 ≤37
補足
完全対応 ≤37
補足
補足 WebView 65 stopped creating layout objects for elements inside an <iframe> with display:none applied.
Chrome Android 完全対応 18
補足
完全対応 18
補足
補足 Chrome 65 stopped creating layout objects for elements inside an <iframe> with display:none applied.
Firefox Android 完全対応 4Opera Android 完全対応 10.1
補足
完全対応 10.1
補足
補足 Opera Android 47 stopped creating layout objects for elements inside an <iframe> with display:none applied.
Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-containerChrome 未対応 なし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 完全対応 7Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox 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 未対応 なし
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 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 あり
-moz-box and -moz-inline-box
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 1 — 64
補足
未対応 1 — 64
補足
補足 This is still available to Firefox UI code.
完全対応 62
無効
無効 From version 62: this feature is behind the layout.css.xul-box-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 4 — 64
補足
未対応 4 — 64
補足
補足 This is still available to Firefox UI code.
完全対応 62
無効
無効 From version 62: this feature is behind the layout.css.xul-box-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
-moz-deck
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 1 — 62
補足
未対応 1 — 62
補足
補足 This is still available to Firefox UI code.
完全対応 62
無効
無効 From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 4 — 62
補足
未対応 4 — 62
補足
補足 This is still available to Firefox UI code.
完全対応 62
無効
無効 From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
-moz-grid, -moz-grid-group, and -moz-grid-line
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 1 — 62
補足
未対応 1 — 62
補足
補足 This is still available to Firefox UI code.
完全対応 62
無効
無効 From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 4 — 62
補足
未対応 4 — 62
補足
補足 This is still available to Firefox UI code.
完全対応 62
無効
無効 From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
-moz-inline-grid and -moz-inline-stack
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 1 — 62
補足
未対応 1 — 62
補足
補足 Available to Firefox UI code.
未対応 62 — 70
無効
無効 From version 62 until version 70 (exclusive): this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 4 — 62
補足
未対応 4 — 62
補足
補足 This is still available to Firefox UI code.
完全対応 62
無効
無効 From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
-moz-popup
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 1 — 62
補足
未対応 1 — 62
補足
補足 This is still available to Firefox UI code.
完全対応 62
無効
無効 From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 4 — 62
補足
未対応 4 — 62
補足
補足 This is still available to Firefox UI code.
完全対応 62
無効
無効 From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
-moz-stack
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 1 — 62
補足
未対応 1 — 62
補足
補足 This is still available to Firefox UI code.
完全対応 62
無効
無効 From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 4 — 62
補足
未対応 4 — 62
補足
補足 This is still available to Firefox UI code.
完全対応 62
無効
無効 From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

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