<display-box>

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

構文

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

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

最初の例では、 secret クラスの段落に display: none を設定します。ボックスとその内容は表示されなくなります。

display: none

HTML

<p>Visible text</p>
<p class="secret">Invisible text</p>

CSS

p.secret {
  display: none;
}

結果

display: contents

この例では、外側の <div> が2ピクセルの赤い境界線と 300px の幅を持っています。しかし、 display: contents も指定されているので、この <div> は表示されず、境界線や幅は適用されなくなり、子要素は親要素が存在しなかったかのように表示されます。

HTML

<div class="outer">
  <div>Inner div.</div>
</div>

CSS

.outer {
  border: 2px solid red;
  width: 300px;
  display: contents;
}

.outer > div {
  border: 1px solid green;
}

結果

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

多くのブラウザーの現在の実装では、アクセシビリティツリーから display の値が contents である要素を削除します。これにより、その要素は — また、一部の版のブラウザーではその子孫要素も — 読み上げ技術で読み上げられなくなります。これは CSSWG 仕様書によれば、正しくない動作です。

ブラウザーの互換性

contents の対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
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 完全対応 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 完全対応 あり
Specific behavior of unusual elements when display: contents is applied to them
実験的
Chrome 完全対応 58Edge 未対応 なしFirefox 完全対応 59IE 未対応 なしOpera 完全対応 45Safari 未対応 なしWebView Android 完全対応 65Chrome Android 完全対応 58Firefox Android 完全対応 59Opera Android 完全対応 43Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報