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

構文

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

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

形式文法

Syntax not found in DB!

最初の例では、 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;
}

結果

ブラウザーの対応

contents の対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
実験的
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 未対応 なし
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 ?

凡例

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

関連情報

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

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