このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<display-box>
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
* Some parts of this feature may have varying levels of support.
これらのキーワードは、要素が表示ボックスを作るかどうかを定義します。
構文
有効な<display-box> の値は以下のとおりです。
contentsこれらの要素は自身のために特定のボックスを生成しません。擬似ボックスやその子ボックスで置き換えられます。なお、 CSS Display Level 3 仕様書では、
contentsの値が「普通ではない要素」 — 置換要素のように、 CSS ボックスの純粋な概念に従って表示されない要素に影響する方法を定義しています。詳しくはAppendix B: Effects of display: contents on Unusual Elements を参照してください。ブラウザーのバグにより、現在のところ、この値を使用するとアクセシビリティツリーから要素を削除します。 — 読み上げソフトは中に何があるかを見ません。詳しくは後述のアクセシビリティの節をご覧ください。
none要素の表示を無くし、レイアウトに影響を与えなくなります (文書は要素が存在しないかのように表示されます)。すべての子孫要素も表示がなくなります。要素が通常占める空間を確保しつつ、実際には何も表示しないようにしたいのであれば、代わりに
visibilityプロパティを使用してください。
アクセシビリティ
多くのブラウザーの現在の実装では、アクセシビリティツリーからdisplay の値がcontents である要素を削除します。これにより、その要素は — また、一部の版のブラウザーではその子孫要素も — 読み上げ技術で読み上げられなくなります。これはCSSWG 仕様書によれば、正しくない動作です。
形式文法
<display-box> =
contents|
none
例
最初の例では、 secret クラスの段落にdisplay: none を設定します。ボックスとその内容は表示されなくなります。
display: none
HTML
<p>Visible text</p><p>Invisible text</p>CSS
p.secret { display: none;}結果
display: contents
この例では、外側の<div> が 2 ピクセルの赤い境界線と 300px の幅を持っています。しかし、display: contents も指定されているので、この<div> は表示されず、境界線や幅は適用されなくなり、子要素は親要素が存在しなかったかのように表示されます。
HTML
<div> <div>Inner div.</div></div>CSS
.outer { border: 2px solid red; width: 300px; display: contents;}.outer > div { border: 1px solid green;}結果
仕様書
| Specification |
|---|
| CSS Display Module Level 3 # valdef-display-contents |