Web/CSS/row-gap を更新 (#1129)

- 2021/03/16 時点の英語版に同期

1 files changed, 23 insertions, 37 deletions

diff --git a/files/ja/web/css/row-gap/index.html b/files/ja/web/css/row-gap/index.html
index 62ab2262e3..f67c07b0ec 100644
--- a/files/ja/web/css/row-gap/index.html
+++ b/files/ja/web/css/row-gap/index.html
@@ -3,10 +3,11 @@ title: row-gap (grid-row-gap)
 slug: Web/CSS/row-gap
 tags:
   - CSS
-  - CSS グリッドレイアウト
-  - CSS フレックスボックス
-  - CSS プロパティ
+  - CSS Flexible Boxes
+  - CSS Grid
+  - CSS Property
   - Reference
+  - recipe:css-property
   - row-gap
 translation_of: Web/CSS/row-gap
 ---
@@ -14,15 +15,9 @@ translation_of: Web/CSS/row-gap
 
 <p><strong><code>row-gap</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のグリッド行の間のすき間 ({{glossary("gutters", "溝")}}) の寸法を定義します。</p>
 
-<div>{{EmbedInteractiveExample("pages/css/grid-row-gap.html")}}</div>
+<div>{{EmbedInteractiveExample("pages/css/row-gap.html")}}</div>
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
-
-<div class="note">
-<p><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>では、当初は <code>grid-row-gap</code> プロパティを定義していました。この接頭辞付きのプロパティは <code>row-gap</code> に置き換えられました。しかし、グリッドで <code>grid-row-gap</code> を実装していても <code>row-gap</code> を実装していないブラウザーに対応するため、上記のデモにあるように、接頭辞付きのプロパティを使用する必要があるでしょう。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
+<h2 id="Syntax">構文</h2>
 
 <pre class="brush: css no-line-numbers">/* &lt;length&gt; 値 */
 row-gap: 20px;
@@ -39,22 +34,24 @@ row-gap: initial;
 row-gap: unset;
 </pre>
 
-<h3 id="Values" name="Values">値</h3>
+<h3 id="Values">値</h3>
 
 <dl>
  <dt><code>&lt;length-percentage&gt;</code></dt>
  <dd>行を隔てる溝の幅です。 {{CSSxRef("&lt;percentage&gt;")}} 値は要素の寸法に対する相対値です。</dd>
 </dl>
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+<h2 id="Formal_definition">公式定義</h2>
 
-{{csssyntax}}
+<p>{{cssinfo}}</p>
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Formal_syntax">形式文法</h2>
+
+{{csssyntax}}
 
-<h3 id="Flex_layout" name="Flex_layout">フレックスレイアウト</h3>
+<h2 id="Examples">例</h2>
 
-<p>{{SeeCompatTable}}</p>
+<h3 id="Flex_layout">フレックスレイアウト</h3>
 
 <h4 id="HTML">HTML</h4>
 
@@ -86,11 +83,11 @@ row-gap: unset;
 }
 </pre>
 
-<h4 id="Result" name="Result">結果</h4>
+<h4 id="Result">結果</h4>
 
 <p>{{EmbedLiveSample('Flex_layout', "auto", "120px")}}</p>
 
-<h3 id="Grid_layout" name="Grid_layout">グリッドレイアウト</h3>
+<h3 id="Grid_layout">グリッドレイアウト</h3>
 
 <h4 id="HTML_2">HTML</h4>
 
@@ -102,13 +99,6 @@ row-gap: unset;
 
 <h4 id="CSS_2">CSS</h4>
 
-<div class="hidden">
-<pre class="brush: css">#grid {
-  grid-row-gap: 20px;
-}
-</pre>
-</div>
-
 <pre class="brush: css; highlight[6]">#grid {
   display: grid;
   height: 200px;
@@ -123,11 +113,11 @@ row-gap: unset;
 }
 </pre>
 
-<h4 id="Result_2" name="Result_2">結果</h4>
+<h4 id="Result_2">結果</h4>
 
 <p>{{EmbedLiveSample('Grid_layout', 'auto', 120)}}</p>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<h2 id="Specifications">仕様書</h2>
 
 <table class="standard-table">
  <thead>
@@ -146,23 +136,19 @@ row-gap: unset;
  </tbody>
 </table>
 
-<p>{{CSSInfo}}</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3>
+<h3 id="Support_in_Flex_layout">フレックスレイアウトでの対応</h3>
 
 <p>{{Compat("css.properties.row-gap.flex_context")}}</p>
 
-<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3>
+<h3 id="Support_in_Grid_layout">グリッドレイアウトでの対応</h3>
 
 <p>{{Compat("css.properties.row-gap.grid_context")}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
  <li>関連する CSS プロパティ: {{CSSxRef("column-gap")}}, {{CSSxRef("gap")}}</li>
- <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">グリッドレイアウトの基本概念 - 溝</a></em></li>
+ <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#gutters">グリッドレイアウトの基本概念 - 溝</a></em></li>
 </ul>