From a0316dd2c57164e53651f4cb8c8de50120e72095 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 23 Nov 2021 23:35:37 +0900 Subject: CSS データ型に関する文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/23 時点の英語版に同期 --- files/ja/web/css/display-box/index.md | 160 ++++++++++++++++------------------ 1 file changed, 75 insertions(+), 85 deletions(-) (limited to 'files/ja/web/css/display-box') diff --git a/files/ja/web/css/display-box/index.md b/files/ja/web/css/display-box/index.md index 6211d9b8d8..ecd171bedb 100644 --- a/files/ja/web/css/display-box/index.md +++ b/files/ja/web/css/display-box/index.md @@ -5,121 +5,111 @@ tags: - CSS - CSS データ型 - CSS 表示 - - Reference + - データ型 + - リファレンス - display-box translation_of: Web/CSS/display-box --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

構文

+## 構文 -

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

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

アクセシビリティの考慮

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

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

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

例

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

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

+- [More accessible markup with display: contents | Hidde de Vries](https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents) +- [Display: Contents Is Not a CSS Reset | Adrian Roselli](https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html) -

display: none

+## 例 -

HTML

+最初の例では、 secret クラスの段落に `display: none` を設定します。ボックスとその内容は表示されなくなります。 -
<p>Visible text</p>
-<p class="secret">Invisible text</p>
+### display: none -

CSS

+#### HTML -
p.secret {
+```html
+
Visible text

+
Invisible text

+```
+
+#### CSS
+
+```css
+p.secret {
   display: none;
-}
+} +``` -

結果

+#### 結果 -

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

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

display: contents

+### display: contents -

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

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

HTML

+#### HTML -
<div class="outer">
-  <div>Inner div.</div>
-</div>
-
+```html +
+
Inner div.
+
+``` -

CSS

+#### CSS -
.outer {
+```css
+.outer {
   border: 2px solid red;
   width: 300px;
   display: contents;
 }
 
-.outer > div {
+.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)}}

- -

関連情報

- - +``` + +#### 結果 + +{{EmbedLiveSample("display_contents", 300, 60)}} + +## 仕様書 + +| 仕様書 | 状態 | +| ---------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('CSS3 Display', '#typedef-display-box', 'display-box')}} | {{Spec2('CSS3 Display')}} | + +## ブラウザーの互換性 + +### contents の対応 + +{{Compat("css.properties.display.contents", 10)}} + +## 関連情報 + +- {{CSSxRef("display")}} + + - {{CSSxRef("<display-outside>")}} + - {{CSSxRef("<display-inside>")}} + - {{CSSxRef("<display-listitem>")}} + - {{CSSxRef("<display-internal>")}} + - {{CSSxRef("<display-legacy>")}} + +- [Display: Contents Is Not a CSS Reset | Adrian Roselli](https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html) +- [More accessible markup with display: contents — hiddedevries.nl](https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents) -- cgit v1.2.3-54-g00ecf