CSS データ型に関する文書を更新

- 2021/11/23 時点の英語版に同期
author: Masahiro FUJIMOTO <mfujimot@gmail.com> 2021-11-23 23:35:37 +0900
committer: Masahiro FUJIMOTO <mfujimot@gmail.com> 2021-12-02 02:06:38 +0900
commit: a0316dd2c57164e53651f4cb8c8de50120e72095 (patch)
tree: a0aee3355da5260a953c75d472d34b312b98481e
parent: ef0e5625abed731ab03ceac0379b507db4ab4fb9 (diff)
download: translated-content-a0316dd2c57164e53651f4cb8c8de50120e72095.tar.gz
translated-content-a0316dd2c57164e53651f4cb8c8de50120e72095.tar.bz2
translated-content-a0316dd2c57164e53651f4cb8c8de50120e72095.zip
8 files changed, 630 insertions, 547 deletions
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
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p class="summary">これらのキーワードは、要素が表示ボックスを作るかどうかを定義します。</p>
+これらのキーワードは、要素が表示ボックスを作るかどうかを定義します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<p>有効な <code>&lt;display-box&gt;</code> の値は以下のとおりです。</p>
+有効な `<display-box>` の値は以下のとおりです。
 
-<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>
+- `contents`
 
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+  - : これらの要素は自身のために特定のボックスを生成しません。擬似ボックスやその子ボックスで置き換えられます。なお、 CSS Display Level 3 仕様書では、 `contents` の値が「普通ではない要素」 — 置換要素のように、 CSS ボックスの純粋な概念に従って表示されない要素に影響する方法を定義しています。詳しくは [Appendix B: Effects of display: contents on Unusual Elements](https://drafts.csswg.org/css-display/#unbox) を参照してください。
 
-<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>
+    _ブラウザーのバグにより、現在のところ、この値を使用するとアクセシビリティツリーから要素を削除します。 — 読み上げソフトは中に何があるかを見ません。詳しくは後述の[アクセシビリティの考慮](#アクセシビリティの考慮)の節をご覧ください。_
+- `none`
+  - : 要素の表示を無くし、レイアウトに影響を与えなくなります (文書は要素が存在しないかのように表示されます)。すべての子孫要素も表示がなくなります。
+    要素が通常占める空間を確保しつつ、実際には何も表示しないようにしたいのであれば、代わりに {{CSSxRef("visibility")}} プロパティを使用してください。
 
-<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>
+多くのブラウザーの現在の実装では、[アクセシビリティツリー](/ja/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis)から `display` の値が `contents` である要素を削除します。これにより、その要素は — また、一部の版のブラウザーではその子孫要素も — 読み上げ技術で読み上げられなくなります。これは [CSSWG 仕様書](https://drafts.csswg.org/css-display/#the-display-properties)によれば、正しくない動作です。
 
-<p>最初の例では、 secret クラスの段落に <code>display: none</code> を設定します。ボックスとその内容は表示されなくなります。</p>
+- [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)
 
-<h3 id="display_none">display: none</h3>
+## 例
 
-<h4 id="HTML">HTML</h4>
+最初の例では、 secret クラスの段落に `display: none` を設定します。ボックスとその内容は表示されなくなります。
 
-<pre class="brush: html notranslate">&lt;p&gt;Visible text&lt;/p&gt;
-&lt;p class="secret"&gt;Invisible text&lt;/p&gt;</pre>
+### display: none
 
-<h4 id="CSS">CSS</h4>
+#### HTML
 
-<pre class="brush: css notranslate">p.secret {
+```html
+<p>Visible text</p>
+<p class="secret">Invisible text</p>
+```
+
+#### CSS
+
+```css
+p.secret {
   display: none;
-}</pre>
+}
+```
 
-<h4 id="Result" name="Result">結果</h4>
+#### 結果
 
-<p>{{EmbedLiveSample("display_none", "100%", 60)}}</p>
+{{EmbedLiveSample("display_none", "100%", 60)}}
 
-<h3 id="display_contents">display: contents</h3>
+### display: contents
 
-<p>この例では、外側の {{htmlelement("div")}} が2ピクセルの赤い境界線と 300px の幅を持っています。しかし、 <code>display: contents</code> も指定されているので、この <code>&lt;div&gt;</code> は表示されず、境界線や幅は適用されなくなり、子要素は親要素が存在しなかったかのように表示されます。</p>
+この例では、外側の {{htmlelement("div")}} が 2 ピクセルの赤い境界線と 300px の幅を持っています。しかし、 `display: contents` も指定されているので、この `<div>` は表示されず、境界線や幅は適用されなくなり、子要素は親要素が存在しなかったかのように表示されます。
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;div class="outer"&gt;
-  &lt;div&gt;Inner div.&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="outer">
+  <div>Inner div.</div>
+</div>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css notranslate">.outer {
+```css
+.outer {
   border: 2px solid red;
   width: 300px;
   display: contents;
 }
 
-.outer &gt; div {
+.outer > 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>
+```
+
+#### 結果
+
+{{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("&lt;display-outside&gt;")}}
+  - {{CSSxRef("&lt;display-inside&gt;")}}
+  - {{CSSxRef("&lt;display-listitem&gt;")}}
+  - {{CSSxRef("&lt;display-internal&gt;")}}
+  - {{CSSxRef("&lt;display-legacy&gt;")}}
+
+- [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)
diff --git a/files/ja/web/css/display-inside/index.md b/files/ja/web/css/display-inside/index.md
index 955c133f66..148e83bbda 100644
--- a/files/ja/web/css/display-inside/index.md
+++ b/files/ja/web/css/display-inside/index.md
@@ -3,58 +3,59 @@ title: <display-inside>
 slug: Web/CSS/display-inside
 tags:
   - CSS
+  - CSS データ型
   - CSS 表示
-  - Reference
-  - display
+  - データ型
+  - リファレンス
   - display-inside
 translation_of: Web/CSS/display-inside
 ---
-<div>{{CSSRef}}</div>
-
-<p class="summary">以下のキーワードは、要素の内部の {{CSSxRef("display")}} 種別を指定し、これは要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。これらのキーワードは <code>display</code> プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では {{CSSxRef("&lt;display-outside&gt;")}} のキーワードと共に使用されます。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<p>有効な <code>&lt;display-inside&gt;</code> の値は以下の通りです。</p>
-
-<dl>
- <dt><code>flow</code> {{Experimental_Inline}}</dt>
- <dd>要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。
- <p>外部表示種別が <code>inline</code> または <code>run-in</code> であり、またブロックまたはインラインの整形コンテキストに関係する場合は、インラインボックスを生成します。そうでない場合は、ブロックコンテナーボックスを生成します。</p>
-
- <p>ほかのプロパティ ({{cssxref("position")}}, {{cssxref("float")}}, {{cssxref("overflow")}} など) の値や、要素自体がブロックまたはインラインの整形コンテキストに関係するかによって、新たな<a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a> (BFC) を生成する、または内容物が親の整形コンテキストに吸収されます。</p>
- </dd>
- <dt><code>flow-root</code></dt>
- <dd>要素は、新たな<a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a>を確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。</dd>
- <dt><code>table</code></dt>
- <dd>HTML の {{HTMLElement("table")}} 要素と同じように動作します。これは、ブロックレベルボックスを定義します。</dd>
- <dt><code>flex</code></dt>
- <dd>要素は、ブロック要素のように動作しつつ、そのコンテンツを<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックスモデル</a>に従ってレイアウトします。</dd>
- <dt><code>grid</code></dt>
- <dd>要素は、ブロック要素のように動作しつつ、そのコンテンツを<a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドモデル</a>に従ってレイアウトします。</dd>
- <dt><code>ruby</code> {{Experimental_Inline}}</dt>
- <dd>要素は、インライン要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の {{HTMLElement("ruby")}} 要素のように動作します。</dd>
-</dl>
-
-<div class="note">
-<p><strong>メモ</strong>: 二つの値の構文に対応しているブラウザーは、 <code>display: flex</code> や <code>display: grid</code> などの内部表示種別のみが指定されていると、外部表示種別を <code>block</code> に設定します。これで期待通りに動作します。例えば、ある要素を <code>display: grid</code> に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。</p>
-</div>
+{{CSSRef}}
+
+以下のキーワードは、要素の内部の {{CSSxRef("display")}} 種別を指定し、これは要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。これらのキーワードは `display` プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では {{CSSxRef("&lt;display-outside&gt;")}} のキーワードと共に使用されます。
+
+## 構文
+
+有効な `<display-inside>` の値は以下の通りです。
+
+- `flow` {{Experimental_Inline}}
+
+  - : 要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。
+
+    外部表示種別が `inline` または `run-in` であり、またブロックまたはインラインの整形コンテキストに関係する場合は、インラインボックスを生成します。そうでない場合は、ブロックコンテナーボックスを生成します。
+
+    ほかのプロパティ ({{cssxref("position")}}, {{cssxref("float")}}, {{cssxref("overflow")}} など) の値や、要素自体がブロックまたはインラインの整形コンテキストに関係するかによって、新たな[ブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context) (BFC) を生成する、または内容物が親の整形コンテキストに吸収されます。
 
-<h2 id="Example" name="Example">例</h2>
+- `flow-root`
+  - : 要素は、新たな[ブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context)を確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。
+- `table`
+  - : HTML の {{HTMLElement("table")}} 要素と同じように動作します。これは、ブロックレベルボックスを定義します。
+- `flex`
+  - : 要素は、ブロック要素のように動作しつつ、そのコンテンツを[フレックスボックスモデル](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)に従ってレイアウトします。
+- `grid`
+  - : 要素は、ブロック要素のように動作しつつ、そのコンテンツを[グリッドモデル](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)に従ってレイアウトします。
+- `ruby` {{Experimental_Inline}}
+  - : 要素は、インライン要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の {{HTMLElement("ruby")}} 要素のように動作します。
 
-<p>この例では、親ボックスは <code>display: flow-root</code> となり、新しいブロック整形コンテキストを確立して浮動アイテムを含みます。</p>
+> **Note:** 二つの値の構文に対応しているブラウザーは、 `display: flex` や `display: grid` などの内部表示種別のみが指定されていると、外部表示種別を `block` に設定します。これで期待通りに動作します。例えば、ある要素を `display: grid` に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。
 
-<h3 id="HTML">HTML</h3>
+<h2 id="Examples">例</h2>
 
-<pre class="brush: html">&lt;div class="box"&gt;
-  &lt;div class="float"&gt;I am a floated box!&lt;/div&gt;
-  &lt;p&gt;I am content inside the container.&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+この例では、親ボックスは `display: flow-root` となり、新しいブロック整形コンテキストを確立して浮動アイテムを含みます。
 
-<h3 id="CSS">CSS</h3>
+### HTML
 
-<pre class="brush: css">.box {
+```html
+<div class="box">
+  <div class="float">I am a floated box!</div>
+  <p>I am content inside the container.</p>
+</div>
+```
+
+### CSS
+
+```css
+.box {
     background-color: rgb(224, 206, 247);
     border: 5px solid rebeccapurple;
     display: flow-root;
@@ -67,54 +68,56 @@ translation_of: Web/CSS/display-inside
     background-color: white;
     border:1px solid black;
     padding: 10px;
-}</pre>
+}
+```
+
+### 結果
+
+{{EmbedLiveSample("Examples", "100%", 180)}}
+
+## 仕様書
+
+| 仕様書                                                                                    | 状態                           |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- |
+| {{SpecName('CSS3 Display', '#typedef-display-inside', 'display-inside')}} | {{Spec2('CSS3 Display')}} |
 
-<h3 id="Result" name="Result">結果</h3>
+## ブラウザーの互換性
 
-<p>{{EmbedLiveSample("Example", "100%", 180)}}</p>
+### 複数のキーワードの対応
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+{{Compat("css.properties.display.multi-keyword_values", 10)}}
 
-<h3 id="Support_of_multiple_keyword_values" name="Support_of_multiple_keyword_values">複数のキーワードの対応</h3>
+- Chromium のバグ: <https://bugs.chromium.org/p/chromium/issues/detail?id=804600>
 
-<p>{{Compat("css.properties.display.multi-keyword_values", 10)}}</p>
+### flow-root の対応
 
-<ul>
- <li>Chromium のバグ: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=804600">https://bugs.chromium.org/p/chromium/issues/detail?id=804600</a></li>
-</ul>
+{{Compat("css.properties.display.flow-root", 10)}}
 
-<h3 id="Support_of_flow-root" name="Support_of_flow-root">flow-root の対応</h3>
+### table の対応
 
-<p>{{Compat("css.properties.display.flow-root", 10)}}</p>
+{{Compat("css.properties.display.table_values", 10)}}
 
-<h3 id="Support_of_table" name="Support_of_table">table の対応</h3>
+### grid の対応
 
-<p>{{Compat("css.properties.display.table_values", 10)}}</p>
+{{Compat("css.properties.display.grid", 10)}}
 
-<h3 id="grid_の対応">grid の対応</h3>
+### flex の対応
 
-<p>{{Compat("css.properties.display.grid", 10)}}</p>
+{{Compat("css.properties.display.flex", 10)}}
 
-<h3 id="Support_of_flex" name="Support_of_flex">flex の対応</h3>
+### ruby の対応
 
-<p>{{Compat("css.properties.display.flex", 10)}}</p>
+{{Compat("css.properties.display.ruby_values", 10)}}
 
-<h3 id="Support_of_ruby" name="Support_of_ruby">ruby の対応</h3>
+## 関連情報
 
-<p>{{Compat("css.properties.display.ruby_values", 10)}}</p>
+- {{CSSxRef("display")}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+  - {{CSSxRef("&lt;display-outside&gt;")}}
+  - {{CSSxRef("&lt;display-listitem&gt;")}}
+  - {{CSSxRef("&lt;display-internal&gt;")}}
+  - {{CSSxRef("&lt;display-box&gt;")}}
+  - {{CSSxRef("&lt;display-legacy&gt;")}}
 
-<ul>
- <li>{{CSSxRef("display")}}
-  <ul>
-   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
-  </ul>
- </li>
- <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
-</ul>
+- [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
+- [グリッドレイアウトの基本概念](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
diff --git a/files/ja/web/css/display-internal/index.md b/files/ja/web/css/display-internal/index.md
index 3c3d25c105..3187e6dffb 100644
--- a/files/ja/web/css/display-internal/index.md
+++ b/files/ja/web/css/display-internal/index.md
@@ -3,70 +3,71 @@ title: <display-internal>
 slug: Web/CSS/display-internal
 tags:
   - CSS
-  - CSS Data Type
+  - CSS データ型
   - CSS Display
-  - Data Type
-  - Reference
+  - データ型
+  - リファレンス
   - display-internal
 translation_of: Web/CSS/display-internal
 ---
-<div>{{CSSRef}}</div>
-
-<p class="summary"><code>table</code> や <code>ruby</code> のような一部のレイアウトモデルでは、複雑な内部構造があり、様々なその子要素や子孫要素が担う様々な役割があります。このページではこれらを「内部の」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<p>有効な <code>&lt;display-internal&gt;</code> の値は次の通りです。</p>
-
-<dl>
- <dt><code>table-row-group</code></dt>
- <dd>これらの要素は HTML の {{HTMLElement("tbody")}} 要素のように動作します。</dd>
- <dt><code>table-header-group</code></dt>
- <dd>これらの要素は HTML の {{HTMLElement("thead")}} 要素のように動作します。</dd>
- <dt><code>table-footer-group</code></dt>
- <dd>これらの要素は HTML の {{HTMLElement("tfoot")}} 要素のように動作します。</dd>
- <dt><code>table-row</code></dt>
- <dd>これらの要素は HTML の {{HTMLElement("tr")}} 要素のように動作します。</dd>
- <dt><code>table-cell</code></dt>
- <dd>これらの要素は HTML の {{HTMLElement("td")}} 要素のように動作します。</dd>
- <dt><code>table-column-group</code></dt>
- <dd>これらの要素は HTML の {{HTMLElement("colgroup")}} 要素のように動作します。</dd>
- <dt><code>table-column</code></dt>
- <dd>これらの要素は HTML の {{HTMLElement("col")}} 要素のように動作します。</dd>
- <dt><code>table-caption</code></dt>
- <dd>これらの要素は HTML の {{HTMLElement("caption")}} 要素のように動作します。</dd>
- <dt><code>ruby-base</code> {{Experimental_Inline}}</dt>
- <dd>これらの要素は HTML の {{HTMLElement("rb")}} 要素のように動作します。</dd>
- <dt><code>ruby-text</code> {{Experimental_Inline}}</dt>
- <dd>これらの要素は HTML の {{HTMLElement("rt")}} 要素のように動作します。</dd>
- <dt><code>ruby-base-container</code> {{Experimental_Inline}}</dt>
- <dd>これらの要素は無名のボックスとして生成された HTML の {{HTMLElement("rbc")}} 要素のように動作します。</dd>
- <dt><code>ruby-text-container</code> {{Experimental_Inline}}</dt>
- <dd>これらの要素は HTML の {{HTMLElement("rtc")}} 要素のように動作します。</dd>
-</dl>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="CSS_tables_example" name="CSS_tables_example">CSS テーブルの例</h3>
-
-<p>以下の例は、 CSS テーブルレイアウトを使用した単純なフォームのレイアウトを紹介します。</p>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html notranslate">&lt;main&gt;
-  &lt;div&gt;
-    &lt;label for="name"&gt;Name&lt;/label&gt;
-    &lt;input type="text" id="name" name="name"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="age"&gt;Age&lt;/label&gt;
-    &lt;input type="text" id="age" name="age"&gt;
-  &lt;/div&gt;
-&lt;/main&gt;</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css notranslate">main {
+{{CSSRef}}
+
+`table` や `ruby` のような一部のレイアウトモデルでは、複雑な内部構造があり、様々なその子要素や子孫要素が担う様々な役割があります。このページではこれらを「内部の」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。
+
+## 構文
+
+有効な `<display-internal>` の値は次の通りです。
+
+- `table-row-group`
+  - : これらの要素は HTML の {{HTMLElement("tbody")}} 要素のように動作します。
+- `table-header-group`
+  - : これらの要素は HTML の {{HTMLElement("thead")}} 要素のように動作します。
+- `table-footer-group`
+  - : これらの要素は HTML の {{HTMLElement("tfoot")}} 要素のように動作します。
+- `table-row`
+  - : これらの要素は HTML の {{HTMLElement("tr")}} 要素のように動作します。
+- `table-cell`
+  - : これらの要素は HTML の {{HTMLElement("td")}} 要素のように動作します。
+- `table-column-group`
+  - : これらの要素は HTML の {{HTMLElement("colgroup")}} 要素のように動作します。
+- `table-column`
+  - : これらの要素は HTML の {{HTMLElement("col")}} 要素のように動作します。
+- `table-caption`
+  - : これらの要素は HTML の {{HTMLElement("caption")}} 要素のように動作します。
+- `ruby-base` {{Experimental_Inline}}
+  - : これらの要素は HTML の {{HTMLElement("rb")}} 要素のように動作します。
+- `ruby-text` {{Experimental_Inline}}
+  - : これらの要素は HTML の {{HTMLElement("rt")}} 要素のように動作します。
+- `ruby-base-container` {{Experimental_Inline}}
+  - : これらの要素は無名のボックスとして生成された HTML の {{HTMLElement("rbc")}} 要素のように動作します。
+- `ruby-text-container` {{Experimental_Inline}}
+  - : これらの要素は HTML の {{HTMLElement("rtc")}} 要素のように動作します。
+
+## 例
+
+<h3 id="CSS_tables_example">CSS テーブルの例</h3>
+
+以下の例は、 CSS テーブルレイアウトを使用した単純なフォームのレイアウトを紹介します。
+
+#### HTML
+
+```html
+<main>
+  <div>
+    <label for="name">Name</label>
+    <input type="text" id="name" name="name">
+  </div>
+  <div>
+    <label for="age">Age</label>
+    <input type="text" id="age" name="age">
+  </div>
+</main>
+```
+
+#### CSS
+
+```css
+main {
   display: table;
 }
 
@@ -77,53 +78,39 @@ div {
 label, input {
   display: table-cell;
   margin: 5px;
-}</pre>
+}
+```
+
+#### 結果
 
-<h4 id="Result" name="Result">結果</h4>
+{{EmbedLiveSample('CSS_tables_example', '100%', 100)}}
 
-<p>{{EmbedLiveSample('CSS_tables_example', '100%', 100)}}</p>
+## 仕様書
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+| 仕様書                                                                                            | 状態                           |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('CSS3 Display', '#typedef-display-internal', 'display-internal')}} | {{Spec2('CSS3 Display')}} |
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Display', '#typedef-display-internal', 'display-internal')}}</td>
-   <td>{{Spec2('CSS3 Display')}}</td>
-  </tr>
- </tbody>
-</table>
+## ブラウザーの互換性
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+### 対応している table の値
 
-<h3 id="Support_of_table_values" name="Support_of_table_values">対応している table の値</h3>
+`table`, `table-cell`, `table-column`, `table-column-group`, `table-footer-group`, `table-header-group`, `table-row`, `table-row-group`
 
-<p><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-column-group</code>, <code>table-footer-group</code>, <code>table-header-group</code>, <code>table-row</code>, <code>table-row-group</code></p>
+{{Compat("css.properties.display.table_values", 10)}}
 
-<p>{{Compat("css.properties.display.table_values", 10)}}</p>
+### 対応している ruby の値
 
-<h3 id="Support_of_ruby_values" name="Support_of_ruby_values">対応している ruby の値</h3>
+`ruby`, `ruby-base`, `ruby-base-container`, `ruby-text`, `ruby-text-container`
 
-<p><code>ruby</code>, <code>ruby-base</code>, <code>ruby-base-container</code>, <code>ruby-text</code>, <code>ruby-text-container</code></p>
+{{Compat("css.properties.display.ruby_values", 10)}}
 
-<p>{{Compat("css.properties.display.ruby_values", 10)}}</p>
+## 関連情報
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+- {{CSSxRef("display")}}
 
-<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-box&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
-  </ul>
- </li>
-</ul>
+  - {{CSSxRef("&lt;display-outside&gt;")}}
+  - {{CSSxRef("&lt;display-inside&gt;")}}
+  - {{CSSxRef("&lt;display-listitem&gt;")}}
+  - {{CSSxRef("&lt;display-box&gt;")}}
+  - {{CSSxRef("&lt;display-legacy&gt;")}}
diff --git a/files/ja/web/css/display-legacy/index.md b/files/ja/web/css/display-legacy/index.md
index cfc82921bc..06402649ae 100644
--- a/files/ja/web/css/display-legacy/index.md
+++ b/files/ja/web/css/display-legacy/index.md
@@ -3,118 +3,109 @@ title: <display-legacy>
 slug: Web/CSS/display-legacy
 tags:
   - CSS
-  - CSS Data Type
-  - CSS Display
-  - Data Type
-  - Reference
+  - CSS データ型
+  - CSS 表示
+  - データ型
+  - リファレンス
   - display-legacy
 translation_of: Web/CSS/display-legacy
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p class="summary">CSS 2 では <code>display</code> プロパティで単一のキーワードによる構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。このページではこれらの値を詳しく紹介します。</p>
+CSS 2 では `display` プロパティで単一のキーワードによる構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。このページではこれらの値を詳しく紹介します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<p>有効な <code>&lt;display-legacy&gt;</code> は以下のとおりです。</p>
+有効な `<display-legacy>` は以下のとおりです。
 
-<dl>
- <dt><code>inline-block</code></dt>
- <dd>この要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては単一のインラインボックスであるかのように流れるようになります (置換要素の場合と似ています)。<br>
- <br>
- これは <code>inline flow-root</code> と等価です。</dd>
- <dt><code>inline-table</code></dt>
- <dd><code>inline-table</code> は、 HTML には直接的に対応するものがありません。これは、 HTML の {{HTMLElement("table")}} 要素と同じようにふるまいつつ、ブロックレベルボックスではなく、インラインボックスのようにふるまいます。表ボックスの内部はブロックレベルのコンテキストになります。<br>
- <br>
- これは <code>inline table</code> と等価です。</dd>
- <dt><code>inline-flex</code></dt>
- <dd>要素は、インライン要素のようにふるまいつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。<br>
- <br>
- これは <code>inline flex</code> と等価です。</dd>
- <dt><code>inline-grid</code></dt>
- <dd>要素は、インライン要素のようにふるまいつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。<br>
- <br>
- これは <code>inline grid</code> と等価です。</dd>
-</dl>
+- `inline-block`
 
-<h2 id="Examples" name="Examples">例</h2>
+  - : この要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては単一のインラインボックスであるかのように流れるようになります (置換要素の場合と似ています)。
 
-<p>以下の例では、インラインフレックスコンテナーを従来型のキーワードである inline-flex で生成します。</p>
+    これは `inline flow-root` と等価です。
 
-<div id="Example">
-<h3 id="HTML">HTML</h3>
+- `inline-table`
 
-<pre class="brush: html notranslate">&lt;div class="container"&gt;
-  &lt;div&gt;Flex Item&lt;/div&gt;
-  &lt;div&gt;Flex Item&lt;/div&gt;
-&lt;/div&gt;
+  - : `inline-table` は、 HTML には直接的に対応するものがありません。これは、 HTML の {{HTMLElement("table")}} 要素と同じようにふるまいつつ、ブロックレベルボックスではなく、インラインボックスのようにふるまいます。表ボックスの内部はブロックレベルのコンテキストになります。
+
+    これは `inline table` と等価です。
+
+- `inline-flex`
+
+  - : 要素は、インライン要素のようにふるまいつつ、その内容物をフレックスボックスモデルに従ってレイアウトします。
+
+    これは `inline flex` と等価です。
+- `inline-grid`
+
+  - : 要素は、インライン要素のようにふるまいつつ、その内容物をグリッドモデルに従ってレイアウトします。
+
+    これは `inline grid` と等価です。
+
+<h2 id="Examples">例</h2>
+
+以下の例では、インラインフレックスコンテナーを従来型のキーワードである inline-flex で生成します。
+
+### HTML
+
+```html
+<div class="container">
+  <div>Flex Item</div>
+  <div>Flex Item</div>
+</div>
 
 Not a flex item
-</pre>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css notranslate">.container {
+```css
+.container {
   display: inline-flex;
 }
-</pre>
+```
 
-<h3 id="Result" name="Result">結果</h3>
+### 結果
 
-<p>{{EmbedLiveSample("Examples", 300, 150)}}</p>
-</div>
+{{EmbedLiveSample("Examples", 300, 150)}}
 
-<p>新しい構文では、インラインフレックスコンテナーは二つの値を使用して生成され、外部表示種別が inline、内部表示種別が flex です。</p>
+新しい構文では、インラインフレックスコンテナーは二つの値を使用して生成され、外部表示種別が inline、内部表示種別が flex です。
 
-<pre class="brush: css notranslate">.container {
+```css
+.container {
   display: inline flex;
-}</pre>
+}
+```
+
+## 仕様書
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+| 仕様書                                                                                    | 状態                           |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- |
+| {{SpecName('CSS3 Display', '#typedef-display-legacy', 'display-legacy')}} | {{Spec2('CSS3 Display')}} |
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Display', '#typedef-display-legacy', 'display-legacy')}}</td>
-   <td>{{Spec2('CSS3 Display')}}</td>
-  </tr>
- </tbody>
-</table>
+## ブラウザーの互換性
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+### inline-block の対応
 
-<h3 id="inline-block_の対応">inline-block の対応</h3>
+{{Compat("css.properties.display.inline-block", 10)}}
 
-<p>{{Compat("css.properties.display.inline-block", 10)}}</p>
+### inline-table の対応
 
-<h3 id="inline-table_の対応">inline-table の対応</h3>
+{{Compat("css.properties.display.inline-table", 10)}}
 
-<p>{{Compat("css.properties.display.inline-table", 10)}}</p>
+### inline-flex の対応
 
-<h3 id="inline-flex_の対応">inline-flex の対応</h3>
+{{Compat("css.properties.display.inline-flex", 10)}}
 
-<p>{{Compat("css.properties.display.inline-flex", 10)}}</p>
+### inline-grid の対応
 
-<h3 id="inline-grid_の対応">inline-grid の対応</h3>
+{{Compat("css.properties.display.inline-grid", 10)}}
 
-<p>{{Compat("css.properties.display.inline-grid", 10)}}</p>
+## 関連情報
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+- {{CSSxRef("display")}}
 
-<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-box&gt;")}}</li>
-  </ul>
- </li>
-</ul>
+  - {{CSSxRef("&lt;display-outside&gt;")}}
+  - {{CSSxRef("&lt;display-inside&gt;")}}
+  - {{CSSxRef("&lt;display-listitem&gt;")}}
+  - {{CSSxRef("&lt;display-internal&gt;")}}
+  - {{CSSxRef("&lt;display-box&gt;")}}
diff --git a/files/ja/web/css/display-listitem/index.md b/files/ja/web/css/display-listitem/index.md
index 0bcad68de9..49fa88e2e3 100644
--- a/files/ja/web/css/display-listitem/index.md
+++ b/files/ja/web/css/display-listitem/index.md
@@ -5,59 +5,61 @@ tags:
   - CSS
   - CSS データ型
   - CSS 表示
-  - Reference
+  - リファレンス
   - list-item
 translation_of: Web/CSS/display-listitem
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p class="summary"> <code style="white-space: nowrap;">list-item</code> キーワードは、要素に {{CSSxRef("list-style")}} プロパティで指定された内容 (例えば見出し記号) を含む <code>::marker</code> 疑似要素と共に、自身の内容物のために指定された種類の基本的なボックスを生成します。</p>
+`list-item` キーワードは、要素に {{CSSxRef("list-style")}} プロパティで指定された内容 (例えば見出し記号) を含む `::marker` 擬似要素と共に、自身の内容物のために指定された種類の基本的なボックスを生成します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<p><code style="white-space: nowrap;">list-item</code> 単独の値を指定すると、要素はリストの項目のように動作します。これは {{CSSxRef("list-style-type")}} や {{CSSxRef("list-style-position")}} と共に使用することができます。</p>
+`list-item` 単独の値を指定すると、要素はリスト項目のように動作します。これは {{CSSxRef("list-style-type")}} や {{CSSxRef("list-style-position")}} と共に使用することができます。
 
-<p><code style="white-space: nowrap;">list-item</code> は {{CSSxRef("&lt;display-outside&gt;")}} キーワードのいずれかと、 {{CSSxRef("&lt;display-inside&gt;")}} の <code>flow</code> または <code style="white-space: nowrap;">flow-root</code> キーワードと組み合わせることもできます。</p>
+`list-item` は {{CSSxRef("&lt;display-outside&gt;")}} キーワードのいずれかと、 {{CSSxRef("&lt;display-inside&gt;")}} の `flow` または `flow-root` キーワードと組み合わせることもできます。
 
-<div class="note">
-<p><strong>メモ</strong>: 二つの値の構文に対応しているブラウザーでは、内部表示種別がないと既定で flow になります。外部表示種別が指定されないと、基本ボックスは外部表示種別が <code>block</code> になります。</p>
-</div>
+> **Note:** 二つの値の構文に対応しているブラウザーでは、内部表示種別がないと既定で `flow` になります。外部表示種別が指定されないと、基本ボックスは外部表示種別が `block` になります。
 
-<h2 id="Example" name="Example">例</h2>
+<h2 id="Examples">例</h2>
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html;">&lt;div class="fake-list"&gt;I will display as a list item&lt;/div&gt;
-</pre>
+```html
+<div class="fake-list">I will display as a list item</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css;">.fake-list {
+```css
+.fake-list {
   display: list-item;
   list-style-position: inside;
 }
-</pre>
+```
 
-<h3 id="Result" name="Result">結果</h3>
+### 結果
 
-<p>{{EmbedLiveSample("Example", "100%", 150)}}</p>
+{{EmbedLiveSample("Examples", "100%", 150)}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## 仕様書
 
-<h3 id="Support_of_list-item" name="Support_of_list-item"><code>list-item</code> の対応</h3>
+| 仕様書                                                                                            | 状態                           |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('CSS3 Display', '#typedef-display-listitem', 'display-listitem')}} | {{Spec2('CSS3 Display')}} |
 
-<p>{{Compat("css.properties.display.list-item", 10)}}</p>
+## ブラウザーの互換性
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+### `list-item` の対応
 
-<ul>
- <li>{{CSSxRef("display")}}
-  <ul>
-   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
-  </ul>
- </li>
-</ul>
+{{Compat("css.properties.display.list-item", 10)}}
+
+## 関連情報
+
+- {{CSSxRef("display")}}
+
+  - {{CSSxRef("&lt;display-outside&gt;")}}
+  - {{CSSxRef("&lt;display-inside&gt;")}}
+  - {{CSSxRef("&lt;display-internal&gt;")}}
+  - {{CSSxRef("&lt;display-box&gt;")}}
+  - {{CSSxRef("&lt;display-legacy&gt;")}}
diff --git a/files/ja/web/css/display-outside/index.md b/files/ja/web/css/display-outside/index.md
index 5b4d14aef5..e43c09bd75 100644
--- a/files/ja/web/css/display-outside/index.md
+++ b/files/ja/web/css/display-outside/index.md
@@ -3,89 +3,71 @@ title: <display-outside>
 slug: Web/CSS/display-outside
 tags:
   - CSS
-  - CSS Data Type
-  - CSS Display
-  - Data Type
-  - Reference
+  - CSS データ型
+  - CSS 表示
+  - データ型
+  - リファレンス
   - display-outside
 translation_of: Web/CSS/display-outside
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p class="summary"><code>&lt;display-outside&gt;</code> のキーワードは、本質的にフローレイアウトにおける要素の役割である、要素の {{CSSxRef("display")}} の外部表示種別を指定します。これらのキーワードは <code>display</code> プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では {{CSSxRef("&lt;display-inside&gt;")}} のキーワードと共に使用されます。</p>
+`<display-outside>` のキーワードは、本質的にフローレイアウトにおける要素の役割である、要素の {{CSSxRef("display")}} の外部表示種別を指定します。これらのキーワードは `display` プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では {{CSSxRef("&lt;display-inside&gt;")}} のキーワードと共に使用されます。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<p>有効な <code>&lt;display-outside&gt;</code> の値は以下の通りです。</p>
+有効な `<display-outside>` の値は以下の通りです。
 
-<dl>
- <dt><code>block</code></dt>
- <dd>要素は、ブロック要素ボックスを生成し、通常フローでは要素の前後に改行を生成します。</dd>
- <dt><code>inline</code></dt>
- <dd>要素は自分自身の前後に改行を生成しない、一つ以上のインライン要素ボックスを生成します。通常フローでは、次の要素は空間があれば同じ行に来ます。</dd>
- <dt><code>run-in</code> {{Experimental_Inline}}</dt>
- <dd>要素は、ランインボックスを生成します。 <code>display: run-in</code> が定義された要素の隣接する兄弟がブロックボックスの場合、ランインボックスはその次のブロックスボックスの最初のインラインボックスになります。<br>
- <br>
- ランイン要素は、周囲の要素に応じてインラインボックスまたはブロックボックスのように動作します。ランインボックスがブロックボックスを含んでいる場合は、ブロックボックスと同じになります。ブロックボックスが後続する場合は、ランインボックスはブロックボックスの最初のインラインボックスになります。インラインボックスが後続する場合は、ブロックボックスになります。</dd>
-</dl>
+- `block`
+  - : 要素は、ブロック要素ボックスを生成し、通常フローでは要素の前後に改行を生成します。
+- `inline`
+  - : 要素は自分自身の前後に改行を生成しない、一つ以上のインライン要素ボックスを生成します。通常フローでは、次の要素は空間があれば同じ行に来ます。
 
-<div class="note">
-<p><strong>注</strong>: 二つの値の構文に対応しているブラウザーは、 <code>display: block</code> や <code>display: inline</code> などの外部表示種別のみが指定されていると、内部表示種別を <code>flow</code> に設定します。これで期待通りに動作します。例えば、ある要素を block になるよう指定した場合、その要素の子はブロックおよびインラインの通常フローレイアウトに加わることを期待するでしょう。</p>
-</div>
+> **Note:** 二つの値の構文に対応しているブラウザーは、 `display: block` や `display: inline` などの外部表示種別のみが指定されていると、内部表示種別を `flow` に設定します。これで期待通りに動作します。例えば、ある要素を block になるよう指定した場合、その要素の子はブロックおよびインラインの通常フローレイアウトに加わることを期待するでしょう。
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
 
-<p>以下の例では、 span 要素 (通常はインライン要素として表示) に <code>display: block</code> が設定されているので、改行が行われ、コンテナーのインライン方向を埋めるように拡張されます。</p>
+以下の例では、 span 要素 (通常はインライン要素として表示) に `display: block` が設定されているので、改行が行われ、コンテナーのインライン方向を埋めるように拡張されます。
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html notranslate">&lt;span&gt;span 1&lt;/span&gt;
-&lt;span&gt;span 2&lt;/span&gt;</pre>
+```html
+<span>span 1</span>
+<span>span 2</span>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css notranslate">span {
+```css
+span {
     display: block;
     border: 1px solid rebeccapurple;
-}</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample("Examples", 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-outside', 'display-outside')}}</td>
-   <td>{{Spec2('CSS3 Display')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.display.display-outside", 10)}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{CSSxRef("display")}}
-  <ul>
-   <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-box&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
-  </ul>
- </li>
- <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">通常フローでのブロックおよびインラインレイアウト</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts explained</a></li>
-</ul>
+}
+```
+
+### 結果
+
+{{EmbedLiveSample("Examples", 300, 60)}}
+
+## 仕様書
+
+| 仕様書                                                                                        | 状態                           |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('CSS3 Display', '#typedef-display-outside', 'display-outside')}} | {{Spec2('CSS3 Display')}} |
+
+## ブラウザーの互換性
+
+{{Compat("css.properties.display.display-outside", 10)}}
+
+## 関連情報
+
+- {{CSSxRef("display")}}
+
+  - {{CSSxRef("&lt;display-inside&gt;")}}
+  - {{CSSxRef("&lt;display-listitem&gt;")}}
+  - {{CSSxRef("&lt;display-internal&gt;")}}
+  - {{CSSxRef("&lt;display-box&gt;")}}
+  - {{CSSxRef("&lt;display-legacy&gt;")}}
+
+- [通常フローでのブロックおよびインラインレイアウト](/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow)
+- [整形コンテキストの紹介](/ja/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts)
diff --git a/files/ja/web/css/filter-function/index.md b/files/ja/web/css/filter-function/index.md
index cf21e6bdf8..398a377b10 100644
--- a/files/ja/web/css/filter-function/index.md
+++ b/files/ja/web/css/filter-function/index.md
@@ -4,62 +4,201 @@ slug: Web/CSS/filter-function
 tags:
   - CSS
   - CSS データ型
-  - Reference
+  - データ型
   - フィルター効果
+  - NeedsCompatTable
+  - リファレンス
+browser-compat: css.types.filter-function
 translation_of: Web/CSS/filter-function
 ---
-<div>{{cssref}}</div>
-
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <code><strong>&lt;filter-function&gt;</strong></code> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>は、入力された画像の表示方法を変更することができるグラフィカル効果を表します。これは {{cssxref("filter")}} 及び {{cssxref("backdrop-filter")}} プロパティで使用します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<p><code>&lt;filter-function&gt;</code> データ型は以下の一覧にあるフィルター関数を使用して指定されます。それぞれの関数には引数が必要であり、無効な場合は、フィルターが適用されません。</p>
-
-<dl>
- <dt>{{cssxref("filter-function/blur", "blur()")}}</dt>
- <dd>画像をぼかします。</dd>
- <dt>{{cssxref("filter-function/brightness", "brightness()")}}</dt>
- <dd>画像を明るくしたり暗くしたりします。</dd>
- <dt>{{cssxref("filter-function/contrast", "contrast()")}}</dt>
- <dd>画像のコントラストを上げたり下げたりします。</dd>
- <dt>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</dt>
- <dd>画像の背後にドロップシャドウを適用します。</dd>
- <dt>{{cssxref("filter-function/grayscale", "grayscale()")}}</dt>
- <dd>画像をグレイスケールに変換します。</dd>
- <dt>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</dt>
- <dd>画像の色相を全体的に変更します。</dd>
- <dt>{{cssxref("filter-function/invert", "invert()")}}</dt>
- <dd>画像の色を反転させます。</dd>
- <dt>{{cssxref("filter-function/opacity", "opacity()")}}</dt>
- <dd>画像を半透明にします。</dd>
- <dt>{{cssxref("filter-function/saturate", "saturate()")}}</dt>
- <dd>入力画像の彩度を上げたり下げたりします。</dd>
- <dt>{{cssxref("filter-function/sepia", "sepia()")}}</dt>
- <dd>画像をセピア調に変換します。</dd>
-</dl>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('Filters 1.0', '#typedef-filter-function', '&lt;filter-function&gt;') }}</td>
-   <td>{{ Spec2('Filters 1.0') }}</td>
-   <td>初回定義。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
+{{CSSRef}}
 
+**`<filter-function>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、入力された画像の表示方法を変更することができるグラフィカル効果を表します。これは {{cssxref("filter")}} および {{cssxref("backdrop-filter")}} プロパティで使用します。
+
+## 構文
+
+`<filter-function>` データ型は以下の一覧にあるフィルター関数を使用して指定されます。それぞれの関数には引数が必要であり、無効な場合は、フィルターが適用されません。
+
+- {{cssxref("filter-function/blur()", "blur()")}}
+  - : 画像をぼかします。
+- {{cssxref("filter-function/brightness()", "brightness()")}}
+  - : 画像を明るくしたり暗くしたりします。
+- {{cssxref("filter-function/contrast()", "contrast()")}}
+  - : 画像のコントラストを上げたり下げたりします。
+- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}}
+  - : 画像の背後にドロップシャドウを適用します。
+- {{cssxref("filter-function/grayscale()", "grayscale()")}}
+  - : 画像をグレイスケールに変換します。
+- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}}
+  - : 画像の色相を全体的に変更します。
+- {{cssxref("filter-function/invert()", "invert()")}}
+  - : 画像の色を反転させます。
+- {{cssxref("filter-function/opacity()", "opacity()")}}
+  - : 画像を半透明にします。
+- {{cssxref("filter-function/saturate()", "saturate()")}}
+  - : 入力画像の彩度を上げたり下げたりします。
+- {{cssxref("filter-function/sepia()", "sepia()")}}
+  - : 画像をセピア調に変換します。
+
+## 例
+
+<h3 id="Filter_function_comparison">フィルター関数の比較</h3>
+
+この例では、シンプルなグラフィックに加えて、さまざまな種類のフィルター機能を選択するための選択メニューと、フィルター機能内で使用される値を変化させるためのスライダーが用意されています。コントロールを更新すると、フィルター効果がリアルタイムで更新されるので、さまざまなフィルターの効果を調べることができます。
+
+#### HTML
+
+```html
+<div></div>
 <ul>
- <li>このデータ型を使用するプロパティ: {{cssxref("filter")}} 及び {{cssxref("backdrop-filter")}}</li>
+  <li>
+    <label for="filter-select">フィルター関数を選択:</label>
+    <select id="filter-select">
+      <option selected>blur</option>
+      <option>brightness</option>
+      <option>contrast</option>
+      <option>drop-shadow</option>
+      <option>grayscale</option>
+      <option>hue-rotate</option>
+      <option>invert</option>
+      <option>opacity</option>
+      <option>saturate</option>
+      <option>sepia</option>
+    </select>
+  </li>
+  <li>
+    <input type="range"><output></output>
+  </li>
+  <li>
+    <p>現在の値: <code></code></p>
+  </li>
 </ul>
+```
+
+#### CSS
+
+```css
+div {
+  width: 300px;
+  height: 300px;
+  background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center;
+}
+
+li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+input {
+  width: 60%
+}
+
+output {
+  width: 5%;
+  text-align: center;
+}
+
+select {
+  width: 40%;
+  margin-left: 2px;
+}
+```
+
+#### JavaScript
+
+```js
+const selectElem = document.querySelector('select');
+const divElem = document.querySelector('div');
+const slider = document.querySelector('input');
+const output = document.querySelector('output');
+const curValue = document.querySelector('p code');
+
+selectElem.addEventListener('change', () => {
+  setSlider(selectElem.value);
+  setDiv(selectElem.value);
+});
+
+slider.addEventListener('input', () => {
+  setDiv(selectElem.value);
+});
+
+function setSlider(filter) {
+  if(filter === 'blur') {
+    slider.value = 0;
+    slider.min = 0;
+    slider.max = 30;
+    slider.step = 1;
+    slider.setAttribute('data-unit', 'px');
+  } else if(filter === 'brightness' || filter === 'contrast' || filter === 'saturate') {
+    slider.value = 1;
+    slider.min = 0;
+    slider.max = 4;
+    slider.step = 0.05;
+    slider.setAttribute('data-unit', '');
+  } else if(filter === 'drop-shadow') {
+    slider.value = 0;
+    slider.min = -20;
+    slider.max = 40;
+    slider.step = 1;
+    slider.setAttribute('data-unit', 'px');
+  } else if(filter === 'opacity') {
+    slider.value = 1;
+    slider.min = 0;
+    slider.max = 1;
+    slider.step = 0.01;
+    slider.setAttribute('data-unit', '');
+  } else if(filter === 'grayscale' || filter === 'invert' || filter === 'sepia') {
+    slider.value = 0;
+    slider.min = 0;
+    slider.max = 1;
+    slider.step = 0.01;
+    slider.setAttribute('data-unit', '');
+  } else if(filter === 'hue-rotate') {
+    slider.value = 0;
+    slider.min = 0;
+    slider.max = 360;
+    slider.step = 1;
+    slider.setAttribute('data-unit', 'deg');
+  }
+}
+
+function setDiv(filter) {
+  if(filter === 'drop-shadow') {
+    divElem.style.filter = `${selectElem.value}(${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(Math.abs(slider.value/2))}${slider.getAttribute('data-unit')})`;
+  } else {
+    divElem.style.filter = `${selectElem.value}(${slider.value}${slider.getAttribute('data-unit')}`;
+  }
+
+  updateOutput();
+  updateCurValue();
+}
+
+function updateOutput() {
+  output.textContent = slider.value;
+}
+
+function updateCurValue() {
+  curValue.textContent = `filter: ${divElem.style.filter}`;
+}
+
+setSlider(selectElem.value);
+setDiv(selectElem.value);
+```
+
+#### 結果
+
+{{EmbedLiveSample('Filter_function_comparison', '100%', 500)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- このデータ型を使用するプロパティ: {{cssxref("filter")}} および {{cssxref("backdrop-filter")}}
diff --git a/files/ja/web/css/shape/index.md b/files/ja/web/css/shape/index.md
index c4cc8fcae2..dd5704572a 100644
--- a/files/ja/web/css/shape/index.md
+++ b/files/ja/web/css/shape/index.md
@@ -3,79 +3,68 @@ title: <shape>
 slug: Web/CSS/shape
 tags:
   - CSS
-  - CSS Reference
+  - CSS データ型
+  - CSS 関数
+  - データ型
+  - 非推奨
+  - レイアウト
+  - リファレンス
+  - ウェブ
+browser-compat: css.types.shape
 translation_of: Web/CSS/shape
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}{{deprecated_header}}
 
-<p><code>&lt;shape&gt;</code> <a href="/ja/docs/CSS" title="CSS">CSS</a> データ型は、ある領域の具体的な形状を表します。この領域は、要素のどの部分で {{Cssxref("clip")}} のようなプロパティが用いられるのか、定義するのに使われます。</p>
+**`<shape>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、ある領域の具体的な形状を表します。この領域は、{{cssxref("clip")}} プロパティが適用される要素の一部を表します。
 
-<div class="blockIndicator note">
-<p><strong>Note:</strong>  <code>&lt;shape&gt;</code> and <code>rect()</code> <span class="tlid-translation translation" lang="ja"><span title="">は廃止された</span></span>{{cssxref("clip")}}<span class="tlid-translation translation" lang="ja"><span title="">と連動しますが、</span></span> {{cssxref("clip-path")}}が支持されました<span class="tlid-translation translation" lang="ja"><span title="">。</span> <span title="">可能であれば、代わりに</span></span><code>clip-path</code><span class="tlid-translation translation" lang="ja"><span title="">と</span></span>{{cssxref("&lt;basic-shape&gt;")}}<span class="tlid-translation translation" lang="ja"><span title="">データ型を使用してください。</span></span></p>
-</div>
+> **Note:** `<shape>` と `rect()` は {{cssxref("clip")}} と連携して動作しますが、これは {{cssxref("clip-path")}} に置き換えらえて非推奨となりました。可能であれば、代わりに `clip-path` と {{cssxref("&lt;basic-shape&gt;")}} データ型を使用してください。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<p><code>rect()</code> 関数記法は、矩形の領域を作ります。</p>
+`<shape>` データ型は `rect()` 関数を使って指定し、長方形の形で領域を生成します。
 
-<h3 id="Syntax" name="Syntax"><code>rect()</code> 関数</h3>
+`rect()`
 
-<pre class="syntaxbox">rect(<em>top</em>, <em>right</em>, <em>bottom</em>, <em>left</em>)
-</pre>
+```css
+rect(top, right, bottom, left)
+```
 
-<p>引数は次の長さを表します: <img class="internal rwrap" src="/@api/deki/files/5730/=rect.png" style="float: right; height: 334px; width: 336px;"></p>
+### 値
 
-<dl style="margin-left: 40px;">
- <dt><em>top</em></dt>
- <dd>要素のボックスのボーダーの top と、矩形の top との差を表す {{cssxref("&lt;length&gt;")}}</dd>
- <dt><em>right</em></dt>
- <dd>要素のボックスのボーダーの left と、矩形の right との差を表す {{cssxref("&lt;length&gt;")}}</dd>
- <dt><em>bottom</em></dt>
- <dd>要素のボックスのボーダーの top と、矩形の bottom との差を表す {{cssxref("&lt;length&gt;")}}。</dd>
- <dt><em>left</em></dt>
- <dd>要素のボックスのボーダーの left と、矩形の left との差を表す {{cssxref("&lt;length&gt;")}}</dd>
-</dl>
+![](rect.png)
 
-<h2 id="Interpolation" name="Interpolation">補間</h2>
+- _top_
+  - : {{cssxref("&lt;length&gt;")}} で、この要素のボックスの上の境界から、矩形の上端までのオフセットを表します。
+- _right_
+  - : {{cssxref("&lt;length&gt;")}} で、この要素のボックスの左の境界から、矩形の右端までのオフセットを表します。
+- _bottom_
+  - : {{cssxref("&lt;length&gt;")}} で、この要素のボックスの上の境界から、矩形の下端までのオフセットを表します。
+- _left_
+  - : {{cssxref("&lt;length&gt;")}} で、この要素のボックスの左の境界から、矩形の左端までのオフセットを表します。
 
-<p>矩形の <code>&lt;shape&gt;</code> CSS データ型の値は、アニメーション用に補間可能です。<code>top</code>、<code>right</code>、<code>bottom</code> 、<code>left</code> のそれぞれが実数（浮動小数点数）として扱われ、補間されます。補間速度は、アニメーションに結びつけられた <a href="/ja/docs/CSS/timing-function" title="timing-function">timing function</a> で決められます。</p>
+## 補間
 
-<h2 id="Examples" name="Examples">例</h2>
+アニメーションの際には、`<shape>` データ型の値は、`top`、`right`、`bottom`、`left` の各要素に補間され、それぞれが実数の浮動小数点数として扱われます。補間の速度は、アニメーションに関連する[タイミング関数](/ja/docs/Web/CSS/easing-function)によって決定されます。
 
-<pre class="brush:css">img.clip04 {
-  clip: rect(10px, 20px, 20px, 10px);
-}</pre>
+## 例
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+### 正しい rect() 関数の使い方の例
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">策定状況</th>
-   <th scope="col">コメント</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visufx.html#value-def-shape', '&lt;shape&gt;')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>{{cssxref("clip")}} プロパティと同時に定義</td>
-  </tr>
- </tbody>
-</table>
+```css
+img.clip04 {
+  clip: rect(10px, 20px, 20px, 10px);
+}
+```
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+## 仕様書
 
-<div>
+{{Specifications}}
 
+## ブラウザーの互換性
 
-<p>{{Compat("css.types.shape")}}</p>
-</div>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>関連 CSS プロパティ: {{Cssxref("clip")}}</li>
- <li><a href="/ja/CSS/-moz-image-rect" title="CSS/-moz-image-rect"><code>-moz-image-rect()</code></a> 関数は <code>rect()</code>と似た座標を使います</li>
-</ul>
+- 関連する CSS プロパティ: {{Cssxref("clip")}}
+- [`-moz-image-rect()`](/ja/docs/Web/CSS/-moz-image-rect) 関数は `rect()` と同様の座標を使います
author	Masahiro FUJIMOTO <mfujimot@gmail.com>	2021-11-23 23:35:37 +0900
committer	Masahiro FUJIMOTO <mfujimot@gmail.com>	2021-12-02 02:06:38 +0900
commit	a0316dd2c57164e53651f4cb8c8de50120e72095 (patch)
tree	a0aee3355da5260a953c75d472d34b312b98481e
parent	ef0e5625abed731ab03ceac0379b507db4ab4fb9 (diff)
download	translated-content-a0316dd2c57164e53651f4cb8c8de50120e72095.tar.gz translated-content-a0316dd2c57164e53651f4cb8c8de50120e72095.tar.bz2 translated-content-a0316dd2c57164e53651f4cb8c8de50120e72095.zip