<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 仕様書によれば、正しくない動作です。

• More accessible markup with display: contents | Hidde de Vries
• Display: Contents Is Not a CSS Reset | Adrian Roselli

形式文法

<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;
}

結果

仕様書

ブラウザーの互換性

関連情報

• display
  • <display-outside>
  • <display-inside>
  • <display-listitem>
  • <display-internal>
  • <display-legacy>

• Display: Contents Is Not a CSS Reset | Adrian Roselli

• More accessible markup with display: contents (Hidde de Vries, 2018)