CSS スクロールスナップ点関係の文書を更新

- 2021/10/09 時点の英語版に基づき更新

6 files changed, 541 insertions, 355 deletions

diff --git a/files/ja/web/css/css_scroll_snap_points/index.md b/files/ja/web/css/css_scroll_snap_points/index.md
index 5b6996036e..5bdae2fa62 100644
--- a/files/ja/web/css/css_scroll_snap_points/index.md
+++ b/files/ja/web/css/css_scroll_snap_points/index.md
@@ -3,57 +3,30 @@ title: CSS スクロールスナップ点
 slug: Web/CSS/CSS_Scroll_Snap_Points
 tags:
   - CSS
-  - CSS スクロールスナップ点
-  - Overview
-  - Reference
+  - CSS スクロールスナップ
+  - ガイド
   - 概要
+  - Reference
 translation_of: Web/CSS/CSS_Scroll_Snap_Points
 ---
-<div>{{CSSRef}} {{deprecated_header}}</div>
-
-<p><ruby><strong>CSS スクロールスナップ点</strong><rp> (</rp><rt>CSS Scroll Snap Points</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、スクロールのスナップ位置を導入します。これは、スクロールの実行が終了した後にコンテナーのスクロール領域が停止する位置を明示的に決定します。</p>
-
-<div class="note">
-<p><strong>メモ</strong>: <a href="/ja/docs/Web/CSS/CSS_Scroll_Snap">CSS スクロールスナップ</a>がこの機能を定義する最新の仕様書です。</p>
-</div>
-
-<h2 id="Reference" name="Reference">リファレンス</h2>
+{{CSSRef}} {{deprecated_header}}
 
-<h3 id="CSS_properties" name="CSS_properties">CSS プロパティ</h3>
+**CSS スクロールスナップ点** (CSS Scroll Snap Points) は CSS のモジュールの一つで、スクロールのスナップ位置を導入します。これは、スクロールの実行が終了した後にコンテナーのスクロール領域が停止する位置を明示的に決定します。
 
-<div class="index">
-<ul>
- <li>{{cssxref("scroll-snap-coordinate")}}</li>
- <li>{{cssxref("scroll-snap-destination")}}</li>
- <li>{{cssxref("scroll-snap-points-x")}}</li>
- <li>{{cssxref("scroll-snap-points-y")}}</li>
- <li>{{cssxref("scroll-snap-type")}}</li>
-</ul>
-</div>
+> **Note:** [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap)がこの機能を定義する最新の仕様書です。
 
-<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-snap-points-y", "scroll-snap-points-y")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+### CSS プロパティ
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+- {{cssxref("scroll-snap-coordinate")}}
+- {{cssxref("scroll-snap-destination")}}
+- {{cssxref("scroll-snap-points-x")}}
+- {{cssxref("scroll-snap-points-y")}}
+- {{cssxref("scroll-snap-type")}}
 
-<h3 id="scroll-snap-coordinate_プロパティ"><code>scroll-snap-coordinate</code> プロパティ</h3>
+## 仕様書
 
-<div>
-<p>{{Compat("css.properties.scroll-snap-coordinate")}}</p>
-</div>
+| 仕様書                                                                                          | 状態                                | 備考     |
+| ----------------------------------------------------------------------------------------------- | ----------------------------------- | -------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-points-y", "scroll-snap-points-y")}} | {{Spec2("CSS Scroll Snap Points")}} | 初回定義 |
diff --git a/files/ja/web/css/scroll-snap-coordinate/index.md b/files/ja/web/css/scroll-snap-coordinate/index.md
index 1a9e185a3b..6e7f09e553 100644
--- a/files/ja/web/css/scroll-snap-coordinate/index.md
+++ b/files/ja/web/css/scroll-snap-coordinate/index.md
@@ -3,89 +3,96 @@ title: scroll-snap-coordinate
 slug: Web/CSS/scroll-snap-coordinate
 tags:
   - CSS
-  - CSS スクロールスナップ
   - CSS プロパティ
-  - Deprecated
+  - CSS スクロールスナップ
+  - 非推奨
   - Reference
-  - scroll-snap-coordinate
+  - recipe:css-property
+browser-compat: css.properties.scroll-snap-coordinate
 translation_of: Web/CSS/scroll-snap-coordinate
 ---
-<div>{{CSSRef}}{{deprecated_header}}</div>
+{{CSSRef}}{{deprecated_header}}
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>scroll-snap-coordinate</code></strong> プロパティは、このプロパティは、最も近い祖先のスクロールコンテナーの {{cssxref("scroll-snap-destination")}} に配置される要素内の X 座標と Y 座標の位置をそれぞれの軸で定義します。</p>
+**`scroll-snap-coordinate`** は [CSS](/ja/docs/Web/CSS)のプロパティで、このプロパティは、最も近い祖先のスクロールコンテナーの {{cssxref("scroll-snap-destination")}} に配置される要素内の X 座標と Y 座標の位置をそれぞれの軸で定義します。
 
-<pre class="brush:css no-line-numbers">/* キーワード値 */
+```css
+/* キーワード値 */
 scroll-snap-coordinate: none;
 
-/* &lt;position&gt; 値 */
+/* <position> 値 */
 scroll-snap-coordinate: 50px 50px;                   /* 単一の座標 */
 scroll-snap-coordinate: 100px 100px, 100px bottom;   /* 複数の座標 */
 
 /* グローバル値 */
 scroll-snap-coordinate: inherit;
 scroll-snap-coordinate: initial;
-scroll-snap-coordinate: unset;</pre>
+scroll-snap-coordinate: unset;
+```
+
+要素が変換されていた場合は、スナップ座標はそのように変換されるので、スナップ点の配置は要素が表示された時に行われます。
 
-<p>要素が変形されていた場合は、スナップ座標はそのように変換されるので、スナップ点の配置は要素が表示された時に行われます。</p>
+## 構文
 
-<div>{{cssinfo}}</div>
+### 値
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+- `none`
+  - : 要素がスナップ点を提供しないことを示します。
+- {{cssxref("&lt;position&gt;")}}
+  - : スナップ座標を要素の境界ボックスの開始側の辺からのオフセットで示します。それぞれの組は、最初の値がスナップ座標の X 座標で、二番目の値は Y 座標です。
 
-<h3 id="Values" name="Values">値</h3>
+## 公式定義
 
-<dl>
- <dt><code>none</code></dt>
- <dd>要素がスナップ点を提供しないことを示します。</dd>
- <dt>{{cssxref("&lt;position&gt;")}}</dt>
- <dd>スナップ座標を要素の境界ボックスの開始側の辺からのオフセットで示します。それぞれの組は、最初の値がスナップ座標の X 座標で、二番目の値は Y 座標です。</dd>
-</dl>
+{{cssinfo}}
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="container"&gt;
-  &lt;div&gt;
-    &lt;p&gt;At coordinate (0, 0)&lt;/p&gt;
-    &lt;div class="scrollContainer coordinate0"&gt;
-      &lt;div&gt;1&lt;/div&gt;
-      &lt;div&gt;2&lt;/div&gt;
-      &lt;div&gt;3&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-
-  &lt;div&gt;
-    &lt;p&gt;At coordinate (25, 0)&lt;/p&gt;
-    &lt;div class="scrollContainer coordinate25"&gt;
-      &lt;div&gt;1&lt;/div&gt;
-      &lt;div&gt;2&lt;/div&gt;
-      &lt;div&gt;3&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-
-  &lt;div&gt;
-    &lt;p&gt;At coordinate (50, 0)&lt;/p&gt;
-    &lt;div class="scrollContainer coordinate50"&gt;
-      &lt;div&gt;1&lt;/div&gt;
-      &lt;div&gt;2&lt;/div&gt;
-      &lt;div&gt;3&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">#container {
+## 例
+
+<h3 id="Setting_scroll_snap_coordinates">スクロールスナップ座標の設定</h3>
+
+#### HTML
+
+```html
+<div id="container">
+  <div>
+    <p>At coordinate (0, 0)</p>
+    <div class="scrollContainer coordinate0">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>At coordinate (25, 0)</p>
+    <div class="scrollContainer coordinate25">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>At coordinate (50, 0)</p>
+    <div class="scrollContainer coordinate50">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+</div>
+```
+
+#### CSS
+
+```css
+#container {
   display: flex;
 }
 
-#container &gt; div:nth-child(-n+2) {
+#container > div:nth-child(-n+2) {
   margin-right: 20px;
 }
 
@@ -97,7 +104,7 @@ scroll-snap-coordinate: unset;</pre>
   font-size: 0;
 }
 
-.scrollContainer &gt; div {
+.scrollContainer > div {
   width: 100px;
   height: 100px;
   display: inline-block;
@@ -106,49 +113,40 @@ scroll-snap-coordinate: unset;</pre>
   font-size: 50px;
 }
 
-.coordinate0 &gt; div {
+.coordinate0 > div {
   scroll-snap-coordinate: 0 0;
 }
 
-.coordinate25 &gt; div {
+.coordinate25 > div {
   scroll-snap-coordinate: 25px 0;
 }
 
-.coordinate50 &gt; div {
+.coordinate50 > div {
   scroll-snap-coordinate: 50px 0;
 }
 
-.scrollContainer &gt; div:nth-child(even) {
+.scrollContainer > div:nth-child(even) {
   background-color: #87ea87;
 }
 
-.scrollContainer &gt; div:nth-child(odd) {
+.scrollContainer > div:nth-child(odd) {
   background-color: #87ccea;
-}</pre>
-
-<h3 id="Result">Result</h3>
-
-<p>{{EmbedLiveSample("Example", "100%", "170")}}</p>
-
-<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("CSS Scroll Snap Points", "#propdef-scroll-snap-coordinate", "scroll-snap-coordinate")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("css.properties.scroll-snap-coordinate")}}</p>
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Setting_scroll_snap_coordinates", "100%", "170")}}
+
+## 仕様書
+
+どの標準にも含まれていません。
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap)
+- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)
diff --git a/files/ja/web/css/scroll-snap-destination/index.md b/files/ja/web/css/scroll-snap-destination/index.md
index 98b8ccb23f..6bb7353adf 100644
--- a/files/ja/web/css/scroll-snap-destination/index.md
+++ b/files/ja/web/css/scroll-snap-destination/index.md
@@ -3,81 +3,88 @@ title: scroll-snap-destination
 slug: Web/CSS/scroll-snap-destination
 tags:
   - CSS
-  - CSS スクロールスナップ
   - CSS プロパティ
-  - Deprecated
+  - CSS スクロールスナップ
+  - 非推奨
   - Reference
+  - recipe:css-property
+browser-compat: css.properties.scroll-snap-destination
 translation_of: Web/CSS/scroll-snap-destination
 ---
-<div>{{CSSRef}}{{deprecated_header}}</div>
+{{CSSRef}}{{deprecated_header}}
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>scroll-snap-destination</code></strong> プロパティは、スクロールコンテナーの視覚的な{{Glossary("viewport", "ビューポート")}}内の要素のスナップポイントが配置される X および Y 座標の位置を定義します。</p>
+**`scroll-snap-destination`** は [CSS](/ja/docs/Web/CSS) のプロパティで、スクロールコンテナーの視覚{{Glossary("viewport", "ビューポート")}}内の要素のスナップ点が配置される X および Y 座標の位置を定義します。
 
-<pre class="brush:css no-line-numbers">/* &lt;position&gt; 値 */
+```css
+/* <position> 値 */
 scroll-snap-destination: 400px 600px;
 
 /* グローバル値 */
 scroll-snap-destination: inherit;
 scroll-snap-destination: initial;
 scroll-snap-destination: unset;
-</pre>
+```
+
+## 構文
 
-<p>{{cssinfo}}</p>
+### 値
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+- `<position>`
+  - : スクロールコンテナーの視覚ビューポートの先頭側の端からのスナップ距離のオフセットを指定します。最初の値はスナップ距離の X 座標、二番目の値は Y 座標です。
 
-<h3 id="Values" name="Values">値</h3>
+## 公式定義
 
-<dl>
- <dt><code>&lt;position&gt;</code></dt>
- <dd>スクロールコンテナーの視覚的なビューポートの先頭側の端からのスナップ距離のオフセットを指定します。最初の値はスナップ距離の X 座標、二番目の値は Y 座標です。</dd>
-</dl>
+{{cssinfo}}
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="container"&gt;
-  &lt;div&gt;
-    &lt;p&gt;At coordinate (0, 0)&lt;/p&gt;
-    &lt;div class="scrollContainer destination0"&gt;
-      &lt;div&gt;1&lt;/div&gt;
-      &lt;div&gt;2&lt;/div&gt;
-      &lt;div&gt;3&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-
-  &lt;div&gt;
-    &lt;p&gt;At coordinate (25, 0)&lt;/p&gt;
-    &lt;div class="scrollContainer destination25"&gt;
-      &lt;div&gt;1&lt;/div&gt;
-      &lt;div&gt;2&lt;/div&gt;
-      &lt;div&gt;3&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-
-  &lt;div&gt;
-    &lt;p&gt;At coordinate (50, 0)&lt;/p&gt;
-    &lt;div class="scrollContainer destination50"&gt;
-      &lt;div&gt;1&lt;/div&gt;
-      &lt;div&gt;2&lt;/div&gt;
-      &lt;div&gt;3&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">#container {
+## 例
+
+<h3 id="Setting_scroll_snap_destination">スクロールスナップの宛先を設定</h3>
+
+#### HTML
+
+```html
+<div id="container">
+  <div>
+    <p>At coordinate (0, 0)</p>
+    <div class="scrollContainer destination0">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>At coordinate (25, 0)</p>
+    <div class="scrollContainer destination25">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>At coordinate (50, 0)</p>
+    <div class="scrollContainer destination50">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+</div>
+```
+
+#### CSS
+
+```css
+#container {
   display: flex;
 }
 
-#container &gt; div:nth-child(-n+2) {
+#container > div:nth-child(-n+2) {
   margin-right: 20px;
 }
 
@@ -103,7 +110,7 @@ scroll-snap-destination: unset;
   scroll-snap-destination: 50px 0;
 }
 
-.scrollContainer &gt; div {
+.scrollContainer > div {
   width: 100px;
   height: 100px;
   display: inline-block;
@@ -112,35 +119,28 @@ scroll-snap-destination: unset;
   font-size: 50px;
 }
 
-.scrollContainer &gt; div:nth-child(even) {
+.scrollContainer > div:nth-child(even) {
   background-color: #87EA87;
 }
 
-.scrollContainer &gt; div:nth-child(odd) {
+.scrollContainer > div:nth-child(odd) {
   background-color: #87CCEA;
-}</pre>
-
-<div>{{EmbedLiveSample("Example", "100%", "170")}}</div>
-
-<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-snap-destination", "scroll-snap-destination")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<div>{{Compat("css.properties.scroll-snap-destination")}}</div>
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Setting_scroll_snap_destination", "100%", "170")}}
+
+## 仕様書
+
+どの標準にも含まれていません。
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap)
+- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)
diff --git a/files/ja/web/css/scroll-snap-points-x/index.md b/files/ja/web/css/scroll-snap-points-x/index.md
new file mode 100644
index 0000000000..debd568733
--- /dev/null
+++ b/files/ja/web/css/scroll-snap-points-x/index.md
@@ -0,0 +1,107 @@
+---
+title: scroll-snap-points-x
+slug: Web/CSS/scroll-snap-points-x
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS スクロールスナップ
+  - 非推奨
+  - Reference
+  - recipe:css-property
+browser-compat: css.properties.scroll-snap-points-x
+translation_of: Web/CSS/scroll-snap-points-x
+---
+{{CSSRef}}{{deprecated_header}}
+
+**`scroll-snap-points-x`** は [CSS](/ja/docs/Web/CSS) のプロパティで、適用先のスクロールコンテナーの内容物におけるスナップ点の水平位置を定義します。
+
+```css
+/* キーワード値 */
+scroll-snap-points-x: none;
+
+/* 反復スナップ点 */
+scroll-snap-points-x: repeat(400px);
+
+/* グローバル値 */
+scroll-snap-points-x: inherit;
+scroll-snap-points-x: initial;
+scroll-snap-points-x: unset;
+```
+
+## 構文
+
+### 値
+
+- `none`
+  - : スクロールコンテナーはスナップ点を定義しません。スクロールコンテナー内の要素は、スクロールコンテナーに代わってスナップ点を定義することができます。
+- `repeat(<length-percentage>)`
+  - : スナップ点を定義するための間隔を、コンテナーの関連する先頭の橋から定義します。正の長さのみが許可されます。パーセント値はコンテナーの幅を示します。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
+
+{{csssyntax}}
+
+## 例
+
+<h3 id="Setting_horizontal_scroll_snap_points">水平スクロールスナップ点の設定</h3>
+
+#### HTML
+
+```html
+<div id="container">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</div>
+```
+
+#### CSS
+
+```css
+#container {
+  width: 200px;
+  overflow: auto;
+  white-space: nowrap;
+  scroll-snap-points-x: repeat(100%);
+  scroll-snap-type: mandatory;
+  font-size: 0;
+}
+
+#container > div {
+  width: 200px;
+  height: 200px;
+  display: inline-block;
+  line-height: 200px;
+  text-align: center;
+  font-size: 100px;
+}
+
+#container > div:nth-child(even) {
+  background-color: #87ea87;
+}
+
+#container > div:nth-child(odd) {
+  background-color: #87ccea;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Setting_horizontal_scroll_snap_points", 220, 220)}}
+
+## 仕様書
+
+どの標準にも含まれていません。
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap)
+- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)
diff --git a/files/ja/web/css/scroll-snap-points-y/index.md b/files/ja/web/css/scroll-snap-points-y/index.md
new file mode 100644
index 0000000000..6c11289051
--- /dev/null
+++ b/files/ja/web/css/scroll-snap-points-y/index.md
@@ -0,0 +1,107 @@
+---
+title: scroll-snap-points-y
+slug: Web/CSS/scroll-snap-points-y
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS スクロールスナップ
+  - 非推奨
+  - Reference
+  - recipe:css-property
+browser-compat: css.properties.scroll-snap-points-y
+translation_of: Web/CSS/scroll-snap-points-y
+---
+{{CSSRef}}{{deprecated_header}}
+
+**`scroll-snap-points-y`** は [CSS](/ja/docs/Web/CSS) のプロパティで、適用先のスクロールコンテナーの内容物におけるスナップ点の垂直位置を定義します。
+
+```css
+/* キーワード値 */
+scroll-snap-points-y: none;
+
+/* 反復スナップ点 */
+scroll-snap-points-y: repeat(400px);
+
+/* グローバル値 */
+scroll-snap-points-y: inherit;
+scroll-snap-points-y: initial;
+scroll-snap-points-y: unset;
+```
+
+## 構文
+
+### 値
+
+- `none`
+  - : スクロールコンテナーはスナップ点を定義しません。スクロールコンテナー内の要素は、スクロールコンテナーに代わってスナップ点を定義することができます。
+- `repeat(<length-percentage>)`
+  - : スナップ点を定義するための間隔を、コンテナーの関連する先頭の橋から定義します。正の長さのみが許可されます。パーセント値はコンテナーの幅を示します。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
+
+{{csssyntax}}
+
+## 例
+
+<h3 id="Setting_vertical_scroll_snap_points">垂直スクロールスナップ点の設定</h3>
+
+#### HTML
+
+```html
+<div id="container">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</div>
+```
+
+#### CSS
+
+```css
+#container {
+  width: 200px;
+  overflow: auto;
+  white-space: nowrap;
+  scroll-snap-points-x: repeat(100%);
+  scroll-snap-type: mandatory;
+  font-size: 0;
+}
+
+#container > div {
+  width: 200px;
+  height: 200px;
+  display: inline-block;
+  line-height: 200px;
+  text-align: center;
+  font-size: 100px;
+}
+
+#container > div:nth-child(even) {
+  background-color: #87ea87;
+}
+
+#container > div:nth-child(odd) {
+  background-color: #87ccea;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Setting_vertical_scroll_snap_points", 220, 220)}}
+
+## 仕様書
+
+どの標準にも含まれていません。
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap)
+- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)
diff --git a/files/ja/web/css/scroll-snap-type/index.md b/files/ja/web/css/scroll-snap-type/index.md
index b80fe7bda1..e57550e90c 100644
--- a/files/ja/web/css/scroll-snap-type/index.md
+++ b/files/ja/web/css/scroll-snap-type/index.md
@@ -3,18 +3,23 @@ title: scroll-snap-type
 slug: Web/CSS/scroll-snap-type
 tags:
   - CSS
-  - CSS スクロールスナップ
   - CSS プロパティ
+  - CSS スクロールスナップ
   - Reference
+  - recipe:css-property
+browser-compat: css.properties.scroll-snap-type
 translation_of: Web/CSS/scroll-snap-type
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
+
+**`scroll-snap-type`** は [CSS](/ja/docs/Web/CSS) のプロパティで、スナップ点が存在する場合にスクロールコンテナーにどれだけ厳密にスナップ点を強制するかを設定します。
 
-<p><strong><code>scroll-snap-type</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、スナップ点が存在する場合にスクロールコンテナーにどれだけ厳密にスナップ点を強制するかを設定します。</p>
+{{EmbedInteractiveExample("pages/css/scroll-snap-type.html")}}
 
-<p>スナップ点へ強制するために使用する詳細なアニメーションや力学の指定はこのプロパティでは扱わず、代わりにユーザーエージェントに委ねられます。</p>
+スナップ点へ強制するために使用する詳細なアニメーションや力学の指定はこのプロパティでは扱わず、ユーザーエージェントに委ねられます。
 
-<pre class="brush:css no-line-numbers">/* キーワード値 */
+```css
+/* キーワード値 */
 scroll-snap-type: none;
 scroll-snap-type: x;
 scroll-snap-type: y;
@@ -33,111 +38,115 @@ scroll-snap-type: both mandatory;
 scroll-snap-type: inherit;
 scroll-snap-type: initial;
 scroll-snap-type: unset;
-</pre>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>このスクロールコンテナーの視覚的な{{Glossary("viewport", "ビューポート")}}がスクロールする時は、スナップ点を無視しなければなりません。</dd>
- <dt><code>x</code></dt>
- <dd>スクロールコンテナーは水平軸のみで、スナップ位置に合わせられます。</dd>
- <dt><code>y</code></dt>
- <dd>スクロールコンテナーは垂直軸のみで、スナップ位置に合わせられます。</dd>
- <dt><code>block</code></dt>
- <dd>スクロールコンテナーはブロック軸のみで、スナップ位置に合わせられます。</dd>
- <dt><code>inline</code></dt>
- <dd>スクロールコンテナーはインライン軸のみで、スナップ位置に合わせられます。</dd>
- <dt><code>both</code></dt>
- <dd>スクロールコンテナーは両方の軸で、個別にスナップ位置に合わせられます (それぞれの軸で異なる要素に位置が合わせられる可能性があります)。</dd>
- <dt><code>mandatory</code></dt>
- <dd>このスクロールコンテナーの視覚的なビューポートは、現在スクロール中でなければスナップ点に合わせられます。これはスクロールアクションが終了した際に、可能であればその点にはまるということを意味しています。内容が追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されます。</dd>
- <dt><code>proximity</code></dt>
- <dd>このスクロールコンテナーの視覚的なビューポートは、現在スクロール中でなければ、ユーザーエージェントのスクロール引数を考慮しつつスナップ点に載るよう動作する可能性があります。コンテンツが追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されることがあります。</dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+```
+
+## 構文
+
+### 値
+
+- `none`
+  - : このスクロールコンテナーの視覚{{Glossary("viewport", "ビューポート")}}がスクロールする時は、スナップ点を無視しなければなりません。
+- `x`
+  - : スクロールコンテナーは水平軸のみで、スナップ位置に合わせられます。
+- `y`
+  - : スクロールコンテナーは垂直軸のみで、スナップ位置に合わせられます。
+- `block`
+  - : スクロールコンテナーはブロック軸のみで、スナップ位置に合わせられます。
+- `inline`
+  - : スクロールコンテナーはインライン軸のみで、スナップ位置に合わせられます。
+- `both`
+  - : スクロールコンテナーは両方の軸で、個別にスナップ位置に合わせられます (それぞれの軸で異なる要素に位置が合わせられる可能性があります)。
+- `mandatory`
+  - : このスクロールコンテナーの視覚ビューポートは、現在スクロール中でなければスナップ点に合わせられます。これはスクロールアクションが終了した際に、可能であればその点にはまるということを意味しています。内容が追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されます。
+- `proximity`
+  - : このスクロールコンテナーの視覚ビューポートは、現在スクロール中でなければ、ユーザーエージェントのスクロール引数を考慮しつつスナップ点に載るよう動作する可能性があります。コンテンツが追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されることがあります。
+
+## 公式定義
+
+{{CSSInfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
-
-<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3>
-
-<pre class="brush: html">&lt;div class="holster"&gt;
-&lt;div class="container x mandatory-scroll-snapping" dir="ltr"&gt;
-  &lt;div&gt;X Mand. LTR&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container x proximity-scroll-snapping" dir="ltr"&gt;
-  &lt;div&gt;X Prox. LTR&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container y mandatory-scroll-snapping" dir="ltr"&gt;
-  &lt;div&gt;Y Mand. LTR&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container y proximity-scroll-snapping" dir="ltr"&gt;
-  &lt;div&gt;Y Prox. LTR&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container x mandatory-scroll-snapping" dir="rtl"&gt;
-  &lt;div&gt;X Mand. RTL&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container x proximity-scroll-snapping" dir="rtl"&gt;
-  &lt;div&gt;X Prox. RTL&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container y mandatory-scroll-snapping" dir="rtl"&gt;
-  &lt;div&gt;Y Mand. RTL&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container y proximity-scroll-snapping" dir="rtl"&gt;
-  &lt;div&gt;Y Prox. RTL&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3>
-
-<pre class="brush: css">/* setup */
+## 例
+
+<h3 id="Snapping_in_different_axes">様々な軸にスナップ</h3>
+
+#### HTML
+
+```html
+<div class="holster">
+<div class="container x mandatory-scroll-snapping" dir="ltr">
+  <div>X Mand. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="ltr">
+  <div>X Prox. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="ltr">
+  <div>Y Mand. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="ltr">
+  <div>Y Prox. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x mandatory-scroll-snapping" dir="rtl">
+  <div>X Mand. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="rtl">
+  <div>X Prox. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="rtl">
+  <div>Y Mand. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="rtl">
+  <div>Y Prox. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+</div>
+```
+
+#### CSS
+
+```css
+/* setup */
 html, body, .holster {
   height: 100%;
 }
@@ -184,61 +193,53 @@ html, body, .holster {
   scroll-snap-type: y proximity;
 }
 
-.container &gt; div {
+.container > div {
   text-align: center;
   scroll-snap-align: center;
   flex: none;
 }
 
-.x.container &gt; div {
+.x.container > div {
   line-height: 128px;
   font-size: 64px;
   width: 100%;
   height: 128px;
 }
 
-.y.container &gt; div {
+.y.container > div {
   line-height: 256px;
   font-size: 128px;
   width: 256px;
   height: 100%;
 }
 /* appearance fixes */
-.y.container &gt; div:first-child {
+.y.container > div:first-child {
   line-height: 1.3;
   font-size: 64px;
 }
 /* coloration */
-.container &gt; div:nth-child(even) {
+.container > div:nth-child(even) {
   background-color: #87EA87;
 }
 
-.container &gt; div:nth-child(odd) {
+.container > div:nth-child(odd) {
   background-color: #87CCEA;
 }
-</pre>
-
-<p>{{EmbedLiveSample("Example", "100%", "1630")}}</p>
-
-<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-snap-type", "scroll-snap-type")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("css.properties.scroll-snap-type")}}</p>
+```
+
+#### 結果
+
+{{EmbedLiveSample("Snapping_in_different_axes", "100%", "1630")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap)
+- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)