display

displayCSS のプロパティで、要素をブロック要素とインライン要素のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば フローレイアウトグリッドフレックスなどを設定します。

正式には、 display プロパティは要素の内部と外部の表示型を設定します。外部の型は要素のフローレイアウトへの参加方法を設定し、内部の型は子要素のレイアウトを設定します。 display のいくつかの値は、それ自身の個別の仕様書で完全に定義されています。例えば、 display: flex が宣言されたときに何が起こるかの詳細は、 CSS Flexible Box Model 仕様書で定義されています。個々の仕様書については、この文書の最後にある表を参照してください。

構文

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

.container {
  display:  [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ;
}

外側

<display-outside>
これらのキーワードは、本質的に要素のフローレイアウトの役割を表す、要素の外部表示種別を指定します。

有効な <display-outside> の値は以下の通りです。

block
要素は、ブロック要素ボックスを生成し、通常フローでは要素の前後に改行を生成します。
inline
要素は自分自身の前後に改行を生成しない、一つ以上のインライン要素ボックスを生成します。通常フローでは、次の要素は空間があれば同じ行に来ます。
run-in
要素は、ランインボックスを生成します。 display: run-in が定義された要素の隣接する兄弟がブロックボックスの場合、ランインボックスはその次のブロックスボックスの最初のインラインボックスになります。

ランイン要素は、周囲の要素に応じてインラインボックスまたはブロックボックスのように動作します。ランインボックスがブロックボックスを含んでいる場合は、ブロックボックスと同じになります。ブロックボックスが後続する場合は、ランインボックスはブロックボックスの最初のインラインボックスになります。インラインボックスが後続する場合は、ブロックボックスになります。

: 二つの値の構文に対応しているブラウザーは、 display: blockdisplay: inline などの外部表示種別のみが指定されていると、内部表示種別を flow に設定します。これで期待通りに動作します。例えば、ある要素を block になるよう指定した場合、その要素の子はブロックおよびインラインの通常フローレイアウトに加わることを期待するでしょう。

内側

<display-inside>
これらのキーワードは、要素の内部の表示種別を指定します。これは、要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。

有効な <display-inside> の値は以下の通りです。

flow
要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。

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

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

flow-root
要素は、新たなブロック整形コンテキストを確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。
table
HTML の <table> 要素と同じように動作します。これは、ブロックレベルボックスを定義します。
flex
要素は、ブロック要素のように動作しつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。
grid
要素は、ブロック要素のように動作しつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。
ruby
要素は、インライン要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の <ruby> 要素のように動作します。

メモ: 二つの値の構文に対応しているブラウザーは、 display: flexdisplay: grid などの内部表示種別のみが指定されていると、外部表示種別を block に設定します。これで期待通りに動作します。例えば、ある要素を display: grid に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。

リストアイテム

<display-listitem>
要素は内容のためにブロックボックスと、個別のリスト項目のインラインボックスを生成します。

list-item 単独の値を指定すると、要素はリストの項目のように動作します。これは list-style-typelist-style-position と共に使用することができます。

list-item<display-outside> キーワードのいずれかと、 <display-inside>flow または flow-root キーワードと組み合わせることもできます。

メモ: 二つの値の構文に対応しているブラウザーでは、内部表示種別がないと既定で flow になります。外部表示種別が指定されないと、基本ボックスは外部表示種別が block になります。

内部

<display-internal>
tableruby のような一部のレイアウトモデルでは、複雑な内部構造があり、様々なその子要素や子孫要素が担う様々な役割があります。この節ではこれらを「内部の」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。

有効な <display-internal> の値は次の通りです。

table-row-group
これらの要素は HTML の <tbody> 要素のように動作します。
table-header-group
これらの要素は HTML の <thead> 要素のように動作します。
table-footer-group
これらの要素は HTML の <tfoot> 要素のように動作します。
table-row
これらの要素は HTML の <tr> 要素のように動作します。
table-cell
これらの要素は HTML の <td> 要素のように動作します。
table-column-group
これらの要素は HTML の <colgroup> 要素のように動作します。
table-column
これらの要素は HTML の <col> 要素のように動作します。
table-caption
これらの要素は HTML の <caption> 要素のように動作します。
ruby-base
これらの要素は HTML の <rb> 要素のように動作します。
ruby-text
これらの要素は HTML の <rt> 要素のように動作します。
ruby-base-container
これらの要素は無名のボックスとして生成された HTML の <rbc> 要素のように動作します。
ruby-text-container
これらの要素は HTML の <rtc> 要素のように動作します。

ボックス

<display-box>
これらのキーワードは、要素が表示ボックスを作るかどうかを定義します。

有効な <display-box> の値は以下のとおりです。

contents
これらの要素は自分自身のために特定のボックスを生成しません。擬似ボックスやその子ボックスで置き換えられます。なお、 CSS Display Level 3 仕様書では、 contents の値が「普通ではない要素」 — 置換要素のように、 CSS ボックスの純粋な概念に従って表示されない要素に影響する方法を定義しています。詳しくは Appendix B: Effects of display: contents on Unusual Elements を参照してください。

ブラウザーのバグにより、現在のところ、この値を使用するとアクセシビリティツリーから要素を削除します。 — 読み上げソフトは中に何があるかを見ません。詳しくは後述のアクセシビリティの考慮の節をご覧ください。
none
要素の表示を無くし、レイアウトに影響を与えなくなります (文書は要素が存在しないかのように表示されます)。すべての子孫要素も表示がなくなります。
要素が通常占める空間を確保しつつ、実際には何も表示しないようにしたいのであれば、代わりに visibility プロパティを使用してください。

従来のもの

<display-legacy>
CSS 2 では display プロパティで単一のキーワードによる構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。

有効な <display-legacy> は以下のとおりです。

inline-block
この要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては単一のインラインボックスであるかのように流れるようになります (置換要素の場合と似ています)。

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

これは inline table と等価です。
inline-flex
要素は、インライン要素のようにふるまいつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。

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

これは inline grid と等価です。

現在はどちらの構文を使用するべきか

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

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

.container {
  display: inline flex;
}

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

.container {
  display: inline-flex;
}

これらの仕様変更の詳細については、display の新しい2つの値の構文への対応の記事を参照してください。

グローバル

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

解説

display に設定できる様々な種類の値の個々のページでは、それらの値が動作する機能の複数の例をを設定しています。 — 構文 の節を参照してください。さらに、以下の資料を参照してください。

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

display: flex

display: grid

アクセシビリティの考慮

display: none

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

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

display: contents

大部分のブラウザーの現在の実装では、アクセシビリティツリーから display の値が contents であるすべての要素を削除します (ただし子孫は残ります)。これにより、その要素自身は読み上げソフトでは読み上げられなくなります。これは CSS 仕様書によれば正しくありません。

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

公式定義

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

形式文法

[ <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 値の比較

この例では、2つのブロックレベルのコンテナー要素があり、それぞれに3つのインラインの子要素があります。その下には、コンテナーに異なる display の値を適用するための洗濯メニューがあり、異なる値が要素のレイアウトとその子要素のレイアウトにどのように影響するかを比較対照することができます。

コンテナとその子要素には paddingbackground-color が含まれているので、表示値の効果がわかりやすくなっています。

: 新しい2つの値の構文は、対応がまだかなり限られているため、ここでは一切含めていません。

HTML

<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</article>

<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</article>

<div>
  <label for="display">Choose a display value:</label>
  <select id="display">
    <option selected>block</option>
    <option>inline</option>
    <option>inline-block</option>
    <option>none</option>
    <option>flex</option>
    <option>inline-flex</option>
    <option>grid</option>
    <option>inline-grid</option>
    <option>table</option>
    <option>list-item</option>
  </select>
</div>

CSS

html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article, span {
  padding: 10px;
  border-radius: 7px;
}

article, div {
  margin: 20px;
}

JavaScript

const articles = document.querySelectorAll('.container');
const select = document.querySelector('select');

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener('change', updateDisplay);

updateDisplay();

Result

: 上記にリンクされている各個別の表示データ型のページには、より多くの例があります。

仕様書

仕様書 状態 備考
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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
displayChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
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 完全対応 79Firefox 完全対応 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 完全対応 9.0
contents: Specific behavior of unusual elements when display: contents is applied to themChrome 完全対応 58Edge 完全対応 79Firefox 完全対応 59IE 未対応 なしOpera 完全対応 45Safari 未対応 なしWebView Android 完全対応 65Chrome Android 完全対応 58Firefox Android 完全対応 59Opera Android 完全対応 43Safari iOS 未対応 なしSamsung Internet Android 完全対応 9.0
<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 完全対応 2.0
完全対応 2.0
完全対応 1.5
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
flow-rootChrome 完全対応 58Edge 完全対応 79Firefox 完全対応 53IE 未対応 なしOpera 完全対応 45Safari 完全対応 13WebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 完全対応 53Opera Android 完全対応 43Safari iOS 完全対応 13Samsung 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 完全対応 6.0
補足
完全対応 6.0
補足
補足 Samsung Internet added this earlier than the corresponding Chrome version would indicate.
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 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
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 完全対応 2.0
完全対応 2.0
完全対応 1.5
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
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 完全対応 6.0
補足
完全対応 6.0
補足
補足 Samsung Internet added this earlier than the corresponding Chrome version would indicate.
inline-tableChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3IE 完全対応 8Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
list-itemChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 6Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
list-item: Supported on <legend>Chrome 完全対応 71Edge 完全対応 79Firefox 完全対応 64IE 未対応 なしOpera 完全対応 58Safari 未対応 なしWebView Android 完全対応 71Chrome Android 完全対応 71Firefox Android 完全対応 64Opera Android 完全対応 50Safari iOS 未対応 なしSamsung Internet Android 完全対応 10.0
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
補足
完全対応 1.0
補足
補足 Chrome 65 stopped creating layout objects for elements inside an <iframe> with display:none applied.
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-containerChrome 未対応 なしEdge 未対応 12 — 79Firefox 完全対応 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 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
-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 未対応 なし

凡例

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

関連情報