<display-box>
これらのキーワードは、要素が表示ボックスを作るかどうかを定義します。
構文
有効な <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 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;
}
結果
仕様書
Specification |
---|
CSS Display Module Level 3 # valdef-display-contents |
ブラウザーの互換性
BCD tables only load in the browser