files/ja/web/css/display-box/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

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

<p class="summary">これらのキーワードは、要素が表示ボックスを作るかどうかを定義します。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<p>有効な <code>&lt;display-box&gt;</code> の値は以下のとおりです。</p>

<dl>
 <dt><code>contents</code> {{Experimental_Inline}}</dt>
 <dd>これらの要素は自分自身のために特定のボックスを生成しません。擬似ボックスやその子ボックスで置き換えられます。なお、 CSS Display Level 3 仕様書では、 <code>contents</code> の値が「普通ではない要素」 — 置換要素のように、 CSS ボックスの純粋な概念に従って表示されない要素に影響する方法を定義しています。詳しくは <a href="https://drafts.csswg.org/css-display/#unbox">Appendix B: Effects of display: contents on Unusual Elements</a> を参照してください。<br>
 <br>
 <em>ブラウザーのバグにより、現在のところ、この値を使用するとアクセシビリティツリーから要素を削除します。 — 読み上げソフトは中に何があるかを見ません。詳しくは後述の<a href="#Accessibility_concerns">アクセシビリティの考慮</a>の節をご覧ください。</em></dd>
 <dt><code>none</code></dt>
 <dd>要素の表示を無くし、レイアウトに影響を与えなくなります (文書は要素が存在しないかのように表示されます)。すべての子孫要素も表示がなくなります。<br>
 要素が通常占める空間を確保しつつ、実際には何も表示しないようにしたいのであれば、代わりに {{CSSxRef("visibility")}} プロパティを使用してください。</dd>
</dl>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>

<p>多くのブラウザーの現在の実装では、<a href="/ja/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">アクセシビリティツリー</a>から <code>display</code> の値が <code>contents</code> である要素を削除します。これにより、その要素は — また、一部の版のブラウザーではその子孫要素も — 読み上げ技術で読み上げられなくなります。これは <a href="https://drafts.csswg.org/css-display/#the-display-properties">CSSWG 仕様書</a>によれば、正しくない動作です。</p>

<ul>
 <li><a class="external" href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">More accessible markup with display: contents | Hidde de Vries</a></li>
 <li><a class="external" href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Display: Contents Is Not a CSS Reset | Adrian Roselli</a></li>
</ul>

<h2 id="Examples" name="Examples">例</h2>

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

<h3 id="display_none">display: none</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt;Visible text&lt;/p&gt;
&lt;p class="secret"&gt;Invisible text&lt;/p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">p.secret {
  display: none;
}</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample("display_none", "100%", 60)}}</p>

<h3 id="display_contents">display: contents</h3>

<p>この例では、外側の {{htmlelement("div")}} が2ピクセルの赤い境界線と 300px の幅を持っています。しかし、 <code>display: contents</code> も指定されているので、この <code>&lt;div&gt;</code> は表示されず、境界線や幅は適用されなくなり、子要素は親要素が存在しなかったかのように表示されます。</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="outer"&gt;
  &lt;div&gt;Inner div.&lt;/div&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css notranslate">.outer {
  border: 2px solid red;
  width: 300px;
  display: contents;
}

.outer &gt; div {
  border: 1px solid green;
}
</pre>

<h4 id="Result_2" name="Result_2">結果</h4>

<p>{{EmbedLiveSample("display_contents", 300, 60)}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Display', '#typedef-display-box', 'display-box')}}</td>
   <td>{{Spec2('CSS3 Display')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<h3 id="Support_of_contents" name="Support_of_contents">contents の対応</h3>

<p>{{Compat("css.properties.display.contents", 10)}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{CSSxRef("display")}}
  <ul>
   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
  </ul>
 </li>
 <li><a href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Display: Contents Is Not a CSS Reset | Adrian Roselli</a></li>
 <li><a href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">More accessible markup with display: contents — hiddedevries.nl</a></li>
</ul>