CSS 表示方法

ジャンプ先:
  1. リファレンス
  2. ガイド
  3. 仕様書
  4. ブラウザーの対応

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 版 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 完全対応 あり
display-outsideChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
display-outside: display: run-in supportChrome 未対応 ? — 32Edge 未対応 なしFirefox 未対応 なしIE 完全対応 8Opera 未対応 ? — 19Safari 未対応 ? — 7WebView Android 完全対応 ありChrome Android 未対応 ? — 32Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 ? — 19Safari iOS 未対応 ? — 7Samsung 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 完全対応 あり
list-item: Supported on <legend>Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 64IE 未対応 なしOpera 未対応 なしSafari 完全対応 ありWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 64Opera 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 未対応 ? — 64
補足
未対応 ? — 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 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 ? — 64
補足
未対応 ? — 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-grid, -moz-inline-grid, -moz-grid-group and -moz-grid-line
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 ? — 62
補足
未対応 ? — 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 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 ? — 62
補足
未対応 ? — 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 and -moz-inline-stack
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 ? — 62
補足
未対応 ? — 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 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 ? — 62
補足
未対応 ? — 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-deck
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 ? — 62
補足
未対応 ? — 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 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 ? — 62
補足
未対応 ? — 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 未対応 ? — 62
補足
未対応 ? — 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 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 ? — 62
補足
未対応 ? — 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 未対応 なし

凡例

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

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

タグ: 
このページの貢献者: mfuji09
最終更新者: mfuji09,