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

- 2021/11/23 時点の英語版に同期

1 files changed, 84 insertions, 97 deletions

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