--- title: slug: Web/CSS/display-box tags: - CSS - CSS データ型 - CSS 表示 - Reference - display-box translation_of: Web/CSS/display-box ---
{{CSSRef}}

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

構文

有効な <display-box> の値は以下のとおりです。

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

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

アクセシビリティの考慮

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

例

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

display: none

HTML

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

CSS

p.secret {
  display: none;
}

結果

{{EmbedLiveSample("display_none", "100%", 60)}}

display: contents

この例では、外側の {{htmlelement("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;
}

結果

{{EmbedLiveSample("display_contents", 300, 60)}}

仕様書

仕様書 状態
{{SpecName('CSS3 Display', '#typedef-display-box', 'display-box')}} {{Spec2('CSS3 Display')}}

ブラウザーの互換性

contents の対応

{{Compat("css.properties.display.contents", 10)}}

関連情報