CSS Table 関係の文書を更新

- 2021/10/28 時点の英語版に同期

2 files changed, 167 insertions, 183 deletions

diff --git a/files/ja/web/css/vertical-align/index.md b/files/ja/web/css/vertical-align/index.md
index 7302c8c57b..97000a1c58 100644
--- a/files/ja/web/css/vertical-align/index.md
+++ b/files/ja/web/css/vertical-align/index.md
@@ -4,108 +4,26 @@ slug: Web/CSS/vertical-align
 tags:
   - CSS
   - CSS プロパティ
-  - Reference
+  - リファレンス
 translation_of: Web/CSS/vertical-align
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>vertical-align</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定します。</p>
+**`vertical-align`** は [CSS](/ja/docs/Web/CSS) のプロパティで、インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/vertical-align.html")}}</div>
+{{EmbedInteractiveExample("pages/css/vertical-align.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+vertical-align は、2 つの場面で使用することができます。
 
-<p>vertical-align は、2 つの場面で使用することができます。</p>
+- 包含する行ボックスの中で、インライン要素のボックスの垂直方向の配置を決める場合。例えば、[テキストの行の中で画像の垂直位置を決める](#vertical_alignment_in_a_line_box)ために使用することができます。
+- [表のセルの内容](#vertical_alignment_in_a_table_cell)の垂直方向の配置を決める場合。
 
-<ul>
- <li>行ボックスの中でインライン要素の縦方向の整列方法を決める場合。例えば、テキストの行の中で {{HTMLElement("img")}} の縦方向の位置を決めるために使います。</li>
-</ul>
+`vertical-align` はインライン要素、インラインブロック要素、表のセル要素だけに適用されることに注意してください。つまり、[ブロックレベル要素](/ja/docs/Web/HTML/Block-level_elements)の垂直方向の配置には使用できません。
 
-<div id="vertical-align-inline">
-<pre class="hidden brush: html notranslate">&lt;p&gt;
-top:&lt;img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-middle:&lt;img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-bottom:&lt;img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-super:&lt;img style="vertical-align:super" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-sub:&lt;img style="vertical-align:sub" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-&lt;/p&gt;
-&lt;p&gt;
-text-top:&lt;img style="vertical-align:text-top" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-text-bottom:&lt;img  style="vertical-align:text-bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-0.2em:&lt;img style="vertical-align:0.2em" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
--1em:&lt;img  style="vertical-align:-1em" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-20%:&lt;img style="vertical-align:20%" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
--100%:&lt;img  style="vertical-align:-100%" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-&lt;/p&gt;
+## 構文
 
-</pre>
-
-<pre class="hidden brush: css notranslate">#* {
-  box-sizing: border-box;
-}
-
-img {
-  margin-right: 0.5em;
-}
-
-p {
-  height: 3em;
-  padding: 0 .5em;
-  font-family: monospace;
-  text-decoration: underline overline;
-  margin-left: auto;
-  margin-right: auto;
-  width: 80%;
-}
-</pre>
-</div>
-
-<p>{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}</p>
-
-<ul>
- <li>表内のセルの内容を垂直方向に整列する場合</li>
-</ul>
-
-<div id="vertical-align-table">
-<pre class="hidden brush: html notranslate">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;td style="vertical-align: baseline"&gt;baseline&lt;/td&gt;
-    &lt;td style="vertical-align: top"&gt;top&lt;/td&gt;
-    &lt;td style="vertical-align: middle"&gt;middle&lt;/td&gt;
-    &lt;td style="vertical-align: bottom"&gt;bottom&lt;/td&gt;
-    &lt;td&gt;
-      &lt;p&gt;There is a theory which states that if ever anyone discovers exactly what the Universe is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable.&lt;/p&gt;
-&lt;p&gt;There is another theory which states that this has already happened.&lt;/p&gt;
-    &lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;
-
-</pre>
-
-<pre class="hidden brush: css notranslate">table {
-  margin-left: auto;
-  margin-right: auto;
-  width: 80%;
-}
-
-table, th, td {
-  border: 1px solid black;
-}
-
-td {
-  padding: 0.5em;
-  font-family: monospace;
-}
-</pre>
-</div>
-
-<p>{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}</p>
-
-<p><code>vertical-align</code> はインライン要素、インラインブロック要素、表セル要素だけに適用できることに注意してください。つまり、<a href="/ja/docs/Web/HTML/Block-level_elements">ブロックレベル要素</a>の縦方向の整列には使えないのです。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+```css
+/* キーワード値 */
 vertical-align: baseline;
 vertical-align: sub;
 vertical-align: super;
@@ -115,138 +33,204 @@ vertical-align: middle;
 vertical-align: top;
 vertical-align: bottom;
 
-/* &lt;length&gt; 値 */
+/* <length> 値 */
 vertical-align: 10em;
 vertical-align: 4px;
 
-/* &lt;percentage&gt; 値 */
+/* <percentage> 値 */
 vertical-align: 20%;
 
 /* グローバル値 */
 vertical-align: inherit;
 vertical-align: initial;
+vertical-align: revert;
 vertical-align: unset;
-</pre>
+```
 
-<p><code>vertical-align</code> プロパティは、以下の値のうち一つで指定します。</p>
+`vertical-align` プロパティは、以下の値のうち一つで指定します。
 
-<h3 id="Values_for_inline_elements" name="Values_for_inline_elements">インライン要素用の値</h3>
+### インライン要素用の値
 
-<h4 id="Parent-relative_values" name="Parent-relative_values">親要素との相対値</h4>
+#### 親要素との相対値
 
-<p>以下の値は、親要素に対しての縦方向の整列方法を表します。</p>
+以下の値は、親要素に対する垂直方向の配置方法を表します。
 
-<dl>
- <dt><code>baseline</code></dt>
- <dd>要素のベースラインを親要素のベースラインに揃えます。 {{HTMLElement("textarea")}} のような、一部の <a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a> のベースラインは HTML 仕様で未定義であり、このため、このキーワードの挙動はブラウザにより異なるかもしれません。</dd>
- <dt><code>sub</code></dt>
- <dd>要素のベースラインを親要素の subscript-baseline に揃えます。</dd>
- <dt><code>super</code></dt>
- <dd>要素のベースラインを親要素の superscript-baseline に揃えます。</dd>
- <dt><code>text-top</code></dt>
- <dd>要素の上端を親要素のフォントの上端に揃えます。</dd>
- <dt><code>text-bottom</code></dt>
- <dd>要素の下端を親要素のフォントの下端に揃えます。</dd>
- <dt><code>middle</code></dt>
- <dd>要素の中央を親要素の <code>baseline + x-height の半分</code> に揃えます。</dd>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>要素のベースラインを、親要素のベースラインの指定値分上に揃えます。負の値を使えます。</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>&lt;length&gt; 値と似ていますが、{{Cssxref("line-height")}} プロパティに対するパーセンテージで指定します。負の値を使えます。</dd>
-</dl>
+- `baseline`
+  - : 要素のベースラインを親要素のベースラインに揃えます。一部の[置換要素](/ja/docs/Web/CSS/Replaced_element)、例えば {{HTMLElement("textarea")}} などのベースラインは HTML 仕様で未定義です。このため、このキーワードの挙動はブラウザーにより異なるかもしれません。
+- `sub`
+  - : 要素のベースラインを親要素の subscript-baseline に揃えます。
+- `super`
+  - : 要素のベースラインを親要素の superscript-baseline に揃えます。
+- `text-top`
+  - : 要素の上端を親要素のフォントの上端に揃えます。
+- `text-bottom`
+  - : 要素の下端を親要素のフォントの下端に揃えます。
+- `middle`
+  - : 要素の中央を親要素の `baseline + x-height の半分` に揃えます。
+- {{cssxref("&lt;length&gt;")}}
+  - : 要素のベースラインを、親要素のベースラインの指定値分上に揃えます。負の値を使えます。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : &lt;length&gt; 値と似ていますが、{{Cssxref("line-height")}} プロパティに対するパーセント値で指定します。負の値を使えます。
 
-<h4 id="Line-relative_values" name="Line-relative_values">行との相対値</h4>
+#### 行との相対値
 
-<p>以下の値は、親要素ではなく、行全体に対しての縦方向の整列方法を表します。</p>
+以下の値は、親要素ではなく、行全体に対する垂直方向の配置方法を表します。
 
-<dl>
- <dt><code>top</code></dt>
- <dd>要素と子孫要素の上端を行全体の上端に揃えます。</dd>
- <dt><code>bottom</code></dt>
- <dd>要素と子孫要素の下端を行全体の下端に揃えます。</dd>
-</dl>
+- `top`
+  - : 要素と子孫要素の上端を行全体の上端に揃えます。
+- `bottom`
+  - : 要素と子孫要素の下端を行全体の下端に揃えます。
 
-<p>ベースラインを持たない要素では、代わりにマージン境界の下端が使われます。</p>
+ベースラインを持たない要素では、代わりにマージン境界の下端が使われます。
 
-<h3 id="Values_for_table_cells" name="Values_for_table_cells">表セル用の値</h3>
+### 表のセル用の値
 
-<dl>
- <dt><code>baseline</code> (および <code>sub</code>, <code>super</code>, <code>text-top</code>, <code>text-bottom</code>, <code>&lt;length&gt;</code>, <code>&lt;percentage&gt;</code>)</dt>
- <dd>セルのベースラインを、行内でベースライン揃えにされた他のすべてのセルのベースラインに揃えます。</dd>
- <dt><code>top</code></dt>
- <dd>セルの上端のパディング境界を行の上端に揃えます。</dd>
- <dt><code>middle</code></dt>
- <dd>セルのパディングボックスが行の中央になるようにします。</dd>
- <dt><code>bottom</code></dt>
- <dd>セルの下端のパディング境界を行の下端に揃えます。</dd>
-</dl>
+- `baseline` (および `sub`, `super`, `text-top`, `text-bottom`, `<length>`, `<percentage>`)
+  - : セルのベースラインを、行内でベースライン揃えにされた他のすべてのセルのベースラインに揃えます。
+- `top`
+  - : セルの上端のパディング境界を行の上端に揃えます。
+- `middle`
+  - : セルのパディングボックスが行の中央になるようにします。
+- `bottom`
+  - : セルの下端のパディング境界を行の下端に揃えます。
 
-<p>負の値を使用することができます。</p>
+負の値を使用することができます。
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
 
-<p>{{CSSInfo}}</p>
+{{CSSInfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+<h3 id="Basic_example">基本的な例</h3>
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;div&gt;An &lt;img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; image with a default alignment.&lt;/div&gt;
-&lt;div&gt;An &lt;img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; image with a text-top alignment.&lt;/div&gt;
-&lt;div&gt;An &lt;img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; image with a text-bottom alignment.&lt;/div&gt;
-&lt;div&gt;An &lt;img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; image with a middle alignment.&lt;/div&gt;
-</pre>
+```html
+<div>An <img src="frame_image.svg" alt="link" width="32" height="32" /> image with a default alignment.</div>
+<div>An <img class="top" src="frame_image.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div>
+<div>An <img class="bottom" src="frame_image.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment.</div>
+<div>An <img class="middle" src="frame_image.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css notranslate">img.top { vertical-align: text-top; }
+```css
+img.top { vertical-align: text-top; }
 img.bottom { vertical-align: text-bottom; }
 img.middle { vertical-align: middle; }
-</pre>
+```
 
-<h4 id="Result" name="Result">Result</h4>
+#### 結果
 
-<p>{{EmbedLiveSample("Basic_example")}}</p>
+{{EmbedLiveSample("Basic_example")}}
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<h3 id="Vertical_alignment_in_a_line_box">行ボックス内での垂直方向の配置</h3>
 
-<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', 'visudet.html#propdef-vertical-align', 'vertical-align')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>{{cssxref("&lt;length&gt;")}} 値を追加し、 {{cssxref("display")}} が <code>table-cell</code> である要素で使えるようにした。</td>
-  </tr>
+#### HTML
+
+```html
+<p>
+top:         <img style="vertical-align: top" src="star.png"/>
+middle:      <img style="vertical-align: middle" src="star.png"/>
+bottom:      <img style="vertical-align: bottom" src="star.png"/>
+super:       <img style="vertical-align: super" src="star.png"/>
+sub:         <img style="vertical-align: sub" src="star.png"/>
+</p>
+
+<p>
+text-top:    <img style="vertical-align: text-top" src="star.png"/>
+text-bottom: <img style="vertical-align: text-bottom" src="star.png"/>
+0.2em:       <img style="vertical-align: 0.2em" src="star.png"/>
+-1em:        <img style="vertical-align: -1em" src="star.png"/>
+20%:         <img style="vertical-align: 20%" src="star.png"/>
+-100%:       <img style="vertical-align: -100%" src="star.png"/>
+</p>
+```
+
+```css hidden
+#* {
+  box-sizing: border-box;
+}
+
+img {
+  margin-right: 0.5em;
+}
+
+p {
+  height: 3em;
+  padding: 0 .5em;
+  font-family: monospace;
+  text-decoration: underline overline;
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Vertical_alignment_in_a_line_box", '100%', 160, "", "")}}
+
+<h3 id="Vertical_alignment_in_a_table_cell">表のセル内での垂直方向の配置</h3>
+
+#### HTML
+
+```html
+<table>
   <tr>
-   <td>{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義</td>
+    <td style="vertical-align: baseline">baseline</td>
+    <td style="vertical-align: top">top</td>
+    <td style="vertical-align: middle">middle</td>
+    <td style="vertical-align: bottom">bottom</td>
+    <td>
+      <p>There is a theory which states that if ever anyone discovers exactly
+      what the Universe is for and why it is here, it will instantly disappear and
+      be replaced by something even more bizarre and inexplicable.</p>
+      <p>There is another theory which states that this has already happened.</p>
+    </td>
   </tr>
- </tbody>
 </table>
+```
+
+#### CSS
+
+```css
+table {
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
+
+table, th, td {
+  border: 1px solid black;
+}
+
+td {
+  padding: 0.5em;
+  font-family: monospace;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Vertical_alignment_in_a_table_cell", '100%', 230, "", "")}}
+
+## 仕様書
+
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.properties.vertical-align")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox#Center_item">フレックスボックスの典型的な使用例の「アイテムの中央揃え」の節</a></li>
- <li>{{Cssxref("line-height")}}, {{Cssxref("text-align")}}, {{Cssxref("margin")}}</li>
- <li><a href="http://phrogz.net/css/vertical-align/index.html">Understanding <code>vertical-align</code>, or "How (Not) To Vertically Center Content"</a></li>
- <li><a href="https://christopheraue.net/design/vertical-align">Vertical-Align: All You Need To Know</a></li>
-</ul>
+- [フレックスボックスの典型的な使用例の「アイテムの中央揃え」の節](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox#center_item)
+- {{Cssxref("line-height")}}, {{Cssxref("text-align")}}, {{Cssxref("margin")}}
+- [Understanding `vertical-align`, or "How (Not) To Vertically Center Content"](http://phrogz.net/css/vertical-align/index.html)
+- [Vertical-Align: All You Need To Know](https://christopheraue.net/design/vertical-align)
diff --git a/files/ja/web/css/vertical-align/star.png b/files/ja/web/css/vertical-align/star.png
new file mode 100644
index 0000000000..bee01b962b
--- /dev/null
+++ b/files/ja/web/css/vertical-align/star.png