CSS スクロールスナップに関するページを更新

- scroll-margin-block-end および scroll-margin-block-start は新規翻訳 - 「CSS スクロールスナップの基本概念」は新規翻訳 - それ以外は 2021/10/09 時点の英語版に同期
author: Masahiro FUJIMOTO <mfujimot@gmail.com> 2021-10-12 01:31:31 +0900
committer: Masahiro FUJIMOTO <mfujimot@gmail.com> 2021-10-19 15:26:24 +0900
commit: 94e8f8c474d5a10be866af1bc2eb0dd515a7228f (patch)
tree: dd3b85d74f3a6c1b39da0996d538c861acd5826e
parent: f29c1e5bbfb2590b04267bf88b5becf20af18bc5 (diff)
download: translated-content-94e8f8c474d5a10be866af1bc2eb0dd515a7228f.tar.gz
translated-content-94e8f8c474d5a10be866af1bc2eb0dd515a7228f.tar.bz2
translated-content-94e8f8c474d5a10be866af1bc2eb0dd515a7228f.zip
27 files changed, 1416 insertions, 1038 deletions
diff --git a/files/ja/web/css/css_scroll_snap/basic_concepts/index.md b/files/ja/web/css/css_scroll_snap/basic_concepts/index.md
new file mode 100644
index 0000000000..689f7ad01e
--- /dev/null
+++ b/files/ja/web/css/css_scroll_snap/basic_concepts/index.md
@@ -0,0 +1,68 @@
+---
+title: CSS スクロールスナップの基本概念
+slug: Web/CSS/CSS_Scroll_Snap/Basic_concepts
+tags:
+  - CSS
+  - CSS スクロールスナップ
+  - Guide
+  - concepts
+---
+{{CSSRef}}
+
+[CSS スクロールスナップ仕様書](https://drafts.csswg.org/css-scroll-snap-1/)は、ユーザーが文書をスクロールする際に、特定の位置にスクロールをスナップさせる方法を提供します。これにより、モバイルでも、デスクトップであっても、アプリのような操作感を実現することができます。
+
+## スクロールスナップの基本
+
+スクロールスナップ仕様の主要なプロパティは、{{CSSxRef("scroll-snap-type")}} と {{CSSxRef("scroll-snap-align")}} です。`scroll-snap-type` プロパティは、スクロールの種類と方向を指定するために、[スクロールコンテナー](/ja/docs/Glossary/Scroll_container)で使用されます。
+
+`scroll-snap-align` プロパティは子要素で、スクロールがスナップする位置を設定するために使用する必要があります。以下の例では `y` 軸に沿ってスクロールをスナップさせるために、`scroll-snap-align` をセクション要素に使用してスクロールを停止する位置を指定しています。
+
+{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}
+
+## scroll-snap-type の使用
+
+{{CSSxRef("scroll-snap-type")}} プロパティは、スクロールスナップが発生する方向を指定する必要があります。これには `x` や `y`、論理マッピングの `block` や `inline` などがあります。また、キーワード `both` を使用すると、スクロールスナップが両軸で動作するようになります。
+
+また、`mandatory` や `proximity` のキーワードを渡すこともできます。`mandatory` キーワードは、スクロールの位置に関係なく、コンテンツが特定の伊大知にスナップ*しなければならない*かどうかをブラウザーに伝えます。`proximity` キーワードは、その位置にスナップしてもよいが、しなくてもよいことを意味します。
+
+`mandatory` を使用すると、とても一貫した操作感が得られます。つまり、ブラウザーは定義された各位置に必ずスナップすることがわかります。つまり、画面の上部にあると期待されるものが、スクロールが終了したときにあると確信できるのです。しかし、コンテンツが予想以上に大きい場合には、問題が発生する可能性があります。ユーザーは、スクロールしてもコンテンツの特定の位置を見ることができないという、もどかしい状況に陥るかもしれません。そのため、`mandatory` の使用は慎重に検討し、一度に画面に表示されるコンテンツの量が分かっている場合にのみ使用するようにしてください。
+
+`proximity` の値は、近くにある場合にのみ位置にスナップしますが、正確な距離はブラウザーの判断に委ねられています。以下の例では、`mandatory` と `proximity` の間で値を変更し、スクロールの操作感に与える影響を確認することができます。
+
+{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}
+
+## scroll-snap-align の使用
+
+{{CSSxRef("scroll-snap-align")}} プロパティには、スクロールコンテナ内でコンテンツがスナップするポイントを示す、`start`、`end`、`center` の値を取ることができます。以下の例では、`scroll-snap-align` の値を変更することで、スクロールの動作がどのように変化するかを確認できます。
+
+{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}}
+
+## スクロールコンテナーのパディング
+
+スクロールコンテナーの端にコンテンツをスナップさせたくない場合は、{{CSSxRef("scroll-padding")}} プロパティまたはそれに相当する個別指定の値を使ってパディングを設定することができます。
+
+以下の例では、`scroll-padding` を 40 ピクセルに設定しています。2 つ目と 3 つ目のセクションの開始点にスナップすると、スクロールはセクションの開始点から 40 ピクセル離れたところで止まります。`scroll-padding` の値を変更して、距離の変化を確認してみてください。
+
+{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}
+
+これは、例えばナビゲーションバーなどの固定要素があり、スクロールしたコンテンツと重なってしまう場合に便利です。`scroll-padding` を使用すると、下の例のように、コンテンツがスクロールしても `<h1>` が画面上に残るように、見出しのための空間を確保することができます。パディングがないと、スナップが発生したときに見出しがコンテンツの一部と重なってしまいます。
+
+{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}
+
+## スクロールの子のマージン
+
+{{CSSxRef("scroll-margin")}} プロパティは、子要素に設定することができ、定義されたボックスの外側を定義することができます。これにより、子要素ごとに異なるスペースを確保することができ、親要素の `scroll-padding` と組み合わせて使用することができます。以下の例で試してみてください。
+
+{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}
+
+## scroll-snap-stop プロパティ
+
+{{CSSxRef("scroll-snap-stop")}} プロパティは、定義された各スナップ位置にスナップするかどうか — つまり上記の例では、それぞれのセクションの先頭で停止するか、またはセクションをスキップできるかどうか — をブラウザーに伝えます。このプロパティは、他の仕様に比べて実装しているブラウザーが少ないです。
+
+このプロパティは、ユーザーがスクローラーの各セクションを確実に確認し、誤ってスキップしてしまわないようにするのに役立ちます。しかし、ユーザーが特定のセクションを探している場合、スクロールの速度が遅くなるという問題があります。
+
+> **Note:** `scroll-snap-stop` プロパティは、現在の勧告候補の仕様ではリスクがあるとされているため、削除される可能性があります。
+
+## ブラウザーの互換性
+
+個々のプロパティページでは、スクロールスナップについてブラウザーの互換性の状況を詳しく説明しています。なお、Firefox 68 以前の Firefox は、古いバージョンの仕様を実装していました。新旧両方の仕様をサポートするクロスブラウザー対応のコードを書く方法の概要については、[次のガイドをお読みください](/ja/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat)。
diff --git a/files/ja/web/css/css_scroll_snap/browser_compat/index.md b/files/ja/web/css/css_scroll_snap/browser_compat/index.md
index e4e1a3473a..f34236fb01 100644
--- a/files/ja/web/css/css_scroll_snap/browser_compat/index.md
+++ b/files/ja/web/css/css_scroll_snap/browser_compat/index.md
@@ -3,45 +3,46 @@ title: ブラウザーの互換性とスクロールスナップ
 slug: Web/CSS/CSS_Scroll_Snap/Browser_compat
 tags:
   - CSS
-  - CSS Scroll Snap
   - CSS スクロールスナップ
-  - Guide
+  - 互換性
+  - FAQ
+  - ガイド
+  - Usage
   - browser compat
   - compat
-  - 互換性
 translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
+
+Firefox は当初、初期版のスクロールスナップの仕様書、いわゆるスクロールスナップ点 (Scroll Snap Points) を実装していました。 Firefox 68 では仕様の新しいバージョンが採用され、これらの古いプロパティは削除されました。
 
-<p class="summary">Firefox は当初、初期版のスクロールスナップの仕様書、いわゆる<ruby>スクロールスナップ点<rp> (</rp><rt>Scroll Snap Points</rt><rp>) </rp></ruby>を実装していました。 Firefox 68 では仕様の新しいバージョンが採用され、これらの古いプロパティは削除されました。</p>
+この記事では、ウェブサイトやアプリにスクロールスナップの対応を追加する際に、ブラウザー間やブラウザーのバージョン間の互換性に関連して発生する可能性のある質問について考えます。
 
-<h2 id="What_should_I_do_if_I_used_the_old_Firefox_implementation" name="What_should_I_do_if_I_used_the_old_Firefox_implementation">古い Firefox の実装を使用していた場合はどうすればよいのか</h2>
+## 古い Firefox の実装を使用していた場合はどうすればよいのか
 
-<p>もし古い Firefox における仕様の実装のみ、すなわちスクロールスナップ点で設定されたプロパティのみを使用している場合は、新しい仕様を使うようにコードを更新してください。これでスクロールスナップが Firefox を含めたこの仕様を実装したすべてのブラウザーで動作することを保証することができます。そうしなければ、スクロールスナップは Firefox 68 以降では動作しなくなります。</p>
+もし古い Firefox における仕様の実装のみ、すなわちスクロールスナップ点で設定されたプロパティのみを使用している場合は、新しい仕様を使うようにコードを更新してください。これでスクロールスナップが Firefox を含めたこの仕様を実装したすべてのブラウザーで動作することを保証することができます。そうしなければ、スクロールスナップは Firefox 68 以降では動作しなくなります。
 
-<p>主に以下のようなことに注意してください。</p>
+主に以下のようなことに注意してください。
 
-<ul>
- <li>{{CSSxRef("scroll-snap-type-x")}} および {{CSSxRef("scroll-snap-type-y")}} プロパティが削除された</li>
- <li>{{CSSxRef("scroll-snap-type")}} プロパティが個別指定となり、 <code>scroll-snap-type:mandatory</code> のような古い一括指定の構文が動作しなくなった</li>
-</ul>
+- {{CSSxRef("scroll-snap-type-x")}} および {{CSSxRef("scroll-snap-type-y")}} プロパティが削除された
+- {{CSSxRef("scroll-snap-type")}} プロパティが個別指定となり、 `scroll-snap-type:mandatory` のような古い一括指定の構文が動作しなくなった
 
-<h2 id="Can_I_use_the_old_implementation_as_a_fallback" name="Can_I_use_the_old_implementation_as_a_fallback">フォールバックとして古い実装を使用することができるか</h2>
+## フォールバックとして古い実装を使用することができるか
 
-<p>既に古い仕様をフォールバックとして使用していたり、古い Firefox (または -webkit プリフィックス付きの Safari) のユーザーに対応したいと思うのであれば、以下の例で概説している古い仕様の使用を続けても構いません。</p>
+既に古い仕様をフォールバックとして使用していたり、古い Firefox (または -webkit 接頭辞付きの Safari) のユーザーに対応したいと思うのであれば、以下の例で概説している古い仕様の使用を続けても構いません。
 
-<p>この最初の例の中では、スクロールスナップのいずれかの形式に対応しているすべてのブラウザーで動作するように、現在の仕様に加えて古い仕様も使用しています。</p>
+この最初の例の中では、スクロールスナップのいずれかの形式に対応しているすべてのブラウザーで動作するように、現在の仕様に加えて古い仕様も使用しています。
 
-<p>この例では、非推奨となった {{CSSxRef("scroll-snap-points-y")}} および {{CSSxRef("scroll-snap-destination")}} プロパティを追加して、 Firefox で動作するスクロールスナップを実装します。 {{CSSxRef("scroll-snap-type")}} プロパティを二回追加しており、一つは新しい仕様書に対応するブラウザーに必要な <code>y</code> 軸の値を伴い、もう一つは Firefox 68 以前で、 <code>y</code> 値のないプロパティに対応しているもののためです。</p>
+この例では、非推奨となった {{CSSxRef("scroll-snap-points-y")}} および {{CSSxRef("scroll-snap-destination")}} プロパティを追加して、 Firefox で動作するスクロールスナップを実装します。 {{CSSxRef("scroll-snap-type")}} プロパティを二回追加しており、一つは新しい仕様書に対応するブラウザーに必要な `y` 軸の値を伴い、もう一つは Firefox 68 以前の、 `y` 値のないプロパティに対応しているもののためです。
 
-<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}
 
-<h2 id="Do_you_need_to_use_both_specs" name="Do_you_need_to_use_both_specs">両方の仕様書を使用する必要があるか</h2>
+## 両方の仕様書を使用する必要があるか
 
-<p>スクロールスナップは、 CSS の中で強化された機能を使用しなければ、代替手段がうまく行く部分の一つです。この点では、フォールバック版を使用することで利益を享受する膨大な数のユーザーに見せるデータがない限り、新しい仕様のみを実装することをお勧めします。</p>
+スクロールスナップは、強化された機能が得られなくても、すべてが機能するというフォールバックが可能な、CSS の優れた部分のひとつです。現時点では、フォールバック版の恩恵を受けるユーザーが多数いるというデータがない限り、新仕様のみを実装することをお勧めします。
 
-<p>新しい仕様書に対応していることを、<a href="/ja/docs/Web/CSS/@supports">特性クエリ</a>を使用して確認したいのであれば、 {{CSSxRef("scroll-snap-align")}} を確認すれば、このプロパティは古い実装には存在しません。しかし、ブラウザーが理解できないと単に無視するのが CSS の流儀なので、これらのプロパティは、対応していないブラウザーでは何の問題も起こしません。</p>
+[機能クエリー](/ja/docs/Web/CSS/@supports)を使用して新しい仕様書に対応していることを確認したいのであれば、{{CSSxRef("scroll-snap-align")}} を確認することをお勧めします。このプロパティは古い実装には存在しないからです。しかし、ブラウザーが理解できないと単に無視するのが CSS の流儀なので、これらのプロパティは、対応していないブラウザーでは何の問題も起こしません。
 
-<h2 id="Why_do_we_have_two_versions" name="Why_do_we_have_two_versions">なぜ二つの版があるのか</h2>
+## なぜ 2 つの版があるのか
 
-<p>最後に、なぜ二つの版が存在するというシナリオになったのか、疑問に思うかもしれません。これは新しい CSS を開発することの現実です。 — ブラウザーの実装から離れて無から開発することはできません。ある時点で、ブラウザーはそれが機能することを示すために仕様を実装する必要があり、仕様が実在する他のプロパティと一緒に使用されているときにのみ明らかになる問題を発見する必要があります。 このような場合、ブラウザーが更新の途中である間に、新しいバージョンと並んで古いバージョンの実装が利用可能になる可能性があるのです。</p>
+最後に、なぜ 2 つの版が存在するというシナリオになったのか、疑問に思うかもしれません。これは新しい CSS を開発することの現実です。 — ブラウザーの実装から離れて無から開発することはできません。ある時点で、ブラウザーはそれが機能することを示すために仕様を実装する必要があり、仕様が実在する他のプロパティと一緒に使用されているときにのみ明らかになる問題を発見する必要があります。 このような場合、ブラウザーが更新の途中である間に、新しいバージョンと並んで古いバージョンの実装が利用可能になる可能性があるのです。
diff --git a/files/ja/web/css/css_scroll_snap/index.md b/files/ja/web/css/css_scroll_snap/index.md
index 57af06183b..4d6d4fe2b9 100644
--- a/files/ja/web/css/css_scroll_snap/index.md
+++ b/files/ja/web/css/css_scroll_snap/index.md
@@ -4,72 +4,61 @@ slug: Web/CSS/CSS_Scroll_Snap
 tags:
   - CSS
   - CSS スクロールスナップ
-  - Reference
+  - Guide
   - 概要
+  - Reference
 translation_of: Web/CSS/CSS_Scroll_Snap
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
+
+**CSS スクロールスナップ** (CSS Scroll Snap) は CSS モジュールの一つで、スクロール操作の完了後にスクロールコンテナーのスクロールポートが終了するスクロール位置を強制する、スクロールスナップ位置を導入します。
+
+## リファレンス
+
+### コンテナーの CSS プロパティ
 
-<p class="summary"><strong>CSS スクロールスナップ</strong>は CSS モジュールの一つで、スクロール操作の完了後にスクロールコンテナーのスクロールポートが終了するスクロール位置を強制する、スクロールスナップ位置を導入します。</p>
+- {{cssxref("scroll-snap-type")}}
+- {{cssxref("scroll-padding")}}
+- {{cssxref("scroll-padding-top")}}
+- {{cssxref("scroll-padding-right")}}
+- {{cssxref("scroll-padding-bottom")}}
+- {{cssxref("scroll-padding-left")}}
+- {{cssxref("scroll-padding-inline")}}
+- {{cssxref("scroll-padding-inline-start")}}
+- {{cssxref("scroll-padding-inline-end")}}
+- {{cssxref("scroll-padding-block")}}
+- {{cssxref("scroll-padding-block-start")}}
+- {{cssxref("scroll-padding-block-end")}}
 
-<div class="note">
-<p><strong>メモ</strong>: 以前のバージョンのスクロールスナップはスクロールスナップ点と呼ばれており、非推奨になりました。このバージョンが現行です。</p>
-</div>
+### 子の CSS プロパティ
 
-<h2 id="Reference" name="Reference">リファレンス</h2>
+- {{cssxref("scroll-snap-align")}}
+- {{cssxref("scroll-margin")}}
+- {{cssxref("scroll-margin-top")}}
+- {{cssxref("scroll-margin-right")}}
+- {{cssxref("scroll-margin-bottom")}}
+- {{cssxref("scroll-margin-left")}}
+- {{cssxref("scroll-margin-inline")}}
+- {{cssxref("scroll-margin-inline-start")}}
+- {{cssxref("scroll-margin-inline-end")}}
+- {{cssxref("scroll-margin-block")}}
+- {{cssxref("scroll-margin-block-start")}}
+- {{cssxref("scroll-margin-block-end")}}
+- {{cssxref("scroll-snap-stop")}}
 
-<h3 id="CSS_Properties_on_Containers" name="CSS_Properties_on_Containers">コンテナーの CSS プロパティ</h3>
+## ガイド
 
-<ul>
- <li>{{cssxref("scroll-snap-type")}}</li>
- <li>{{cssxref("scroll-snap-stop")}}</li>
- <li>{{cssxref("scroll-padding")}}</li>
- <li>{{cssxref("scroll-padding-top")}}</li>
- <li>{{cssxref("scroll-padding-right")}}</li>
- <li>{{cssxref("scroll-padding-bottom")}}</li>
- <li>{{cssxref("scroll-padding-left")}}</li>
- <li>{{cssxref("scroll-padding-inline")}}</li>
- <li>{{cssxref("scroll-padding-inline-start")}}</li>
- <li>{{cssxref("scroll-padding-inline-end")}}</li>
- <li>{{cssxref("scroll-padding-block")}}</li>
- <li>{{cssxref("scroll-padding-block-start")}}</li>
- <li>{{cssxref("scroll-padding-block-end")}}</li>
-</ul>
+- [CSS スクロールスナップの基本概念](/ja/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts)
+- [ブラウザーの互換性とスクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat)
 
-<h3 id="CSS_Properties_on_Children" name="CSS_Properties_on_Children">子の CSS プロパティ</h3>
+## 仕様書
 
-<ul>
- <li>{{cssxref("scroll-snap-align")}}</li>
- <li>{{cssxref("scroll-margin")}}</li>
- <li>{{cssxref("scroll-margin-top")}}</li>
- <li>{{cssxref("scroll-margin-right")}}</li>
- <li>{{cssxref("scroll-margin-bottom")}}</li>
- <li>{{cssxref("scroll-margin-left")}}</li>
- <li>{{cssxref("scroll-margin-inline")}}</li>
- <li>{{cssxref("scroll-margin-inline-start")}}</li>
- <li>{{cssxref("scroll-margin-inline-end")}}</li>
- <li>{{cssxref("scroll-margin-block")}}</li>
- <li>{{cssxref("scroll-margin-block-start")}}</li>
- <li>{{cssxref("scroll-margin-block-end")}}</li>
-</ul>
+| 仕様書                                 | 状態                                | 備考     |
+| -------------------------------------- | ----------------------------------- | -------- |
+| {{SpecName("CSS Scroll Snap Points")}} | {{Spec2("CSS Scroll Snap Points")}} | 初回定義 |
 
-<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")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+個々のプロパティページにて、それぞれのプロパティのブラウザー互換性情報を詳しく説明しています。
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+> **Note:** このモジュールの以前のバージョンはスクロールスナップ点と呼ばれており、非推奨になりました。CSS スクロールスナップが現在の実装です。新旧の仕様の対応方法の概要については、[ブラウザーの互換性のガイド](/ja/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat)を参照してください。
diff --git a/files/ja/web/css/scroll-margin-block-end/index.md b/files/ja/web/css/scroll-margin-block-end/index.md
new file mode 100644
index 0000000000..4e3ada2149
--- /dev/null
+++ b/files/ja/web/css/scroll-margin-block-end/index.md
@@ -0,0 +1,55 @@
+---
+title: scroll-margin-block-end
+slug: Web/CSS/scroll-margin-block-end
+tags:
+  - CSS
+  - recipe:css-property
+  - scroll-margin-block-end
+browser-compat: css.properties.scroll-margin-block-end
+translation_of: Web/CSS/scroll-margin-block-end
+---
+{{CSSRef}}
+
+`scroll-margin-block-end` プロパティは、スクロールスナップ領域のインライン方向における末尾側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。
+
+{{EmbedInteractiveExample("pages/css/scroll-margin-block-end.html")}}
+
+## 構文
+
+```css
+/* <length> 値 */
+scroll-margin-block-end: 10px;
+scroll-margin-block-end: 1em;
+
+/* グローバル値 */
+scroll-margin-block-end: inherit;
+scroll-margin-block-end: initial;
+scroll-margin-block-end: revert;
+scroll-margin-block-end: unset;
+```
+
+### 値
+
+- `<length>`
+  - : スクロールコンテナーのブロック方向における末尾側の辺からみた外部の距離です。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
+
+{{csssyntax}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-margin-block-start/index.md b/files/ja/web/css/scroll-margin-block-start/index.md
new file mode 100644
index 0000000000..dcca78a7cc
--- /dev/null
+++ b/files/ja/web/css/scroll-margin-block-start/index.md
@@ -0,0 +1,57 @@
+---
+title: scroll-margin-block-start
+slug: Web/CSS/scroll-margin-block-start
+tags:
+  - 初心者
+  - CSS
+  - Example
+  - recipe:css-property
+  - scroll-margin-block-start
+browser-compat: css.properties.scroll-margin-block-start
+translation_of: Web/CSS/scroll-margin-block-start
+---
+{{CSSRef}}
+
+`scroll-margin-block-start` プロパティは、スクロールスナップ領域のインライン方向における先頭側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。
+
+{{EmbedInteractiveExample("pages/css/scroll-margin-block-start.html")}}
+
+## 構文
+
+```css
+/* <length> 値 */
+scroll-margin-block-start: 10px;
+scroll-margin-block-start: 1em;
+
+/* グローバル値 */
+scroll-margin-block-start: inherit;
+scroll-margin-block-start: initial;
+scroll-margin-block-start: revert;
+scroll-margin-block-start: unset;
+```
+
+### 値
+
+- `<length>`
+  - : スクロールコンテナーのブロック方向における先頭側の辺からみた外部の距離です。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
+
+{{csssyntax}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-margin-block/index.md b/files/ja/web/css/scroll-margin-block/index.md
index b78fd009a4..bad9d0adea 100644
--- a/files/ja/web/css/scroll-margin-block/index.md
+++ b/files/ja/web/css/scroll-margin-block/index.md
@@ -9,21 +9,21 @@ browser-compat: css.properties.scroll-margin-block
 ---
 {{CSSRef}}
 
-The `scroll-margin-block` [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets the scroll margins of an element in the block dimension.
+`scroll-margin-block` は[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、ブロック方向のスクロールマージンを設定します。
 
 {{EmbedInteractiveExample("pages/css/scroll-margin-block.html")}}
 
-## Constituent properties
+## 構成要素のプロパティ
 
-This property is a shorthand for the following CSS properties:
+このプロパティは以下の CSS プロパティの一括指定です。
 
-- [`scroll-margin-block-end`](/en-US/docs/Web/CSS/scroll-margin-block-end)
-- [`scroll-margin-block-start`](/en-US/docs/Web/CSS/scroll-margin-block-start)
+- [`scroll-margin-block-end`](/ja/docs/Web/CSS/scroll-margin-block-end)
+- [`scroll-margin-block-start`](/ja/docs/Web/CSS/scroll-margin-block-start)
 
-## Syntax
+## 構文
 
 ```css
-/* <length> values */
+/* <length> 値 */
 scroll-margin-block: 10px;
 scroll-margin-block: 1em .5em ;
 
@@ -34,32 +34,32 @@ scroll-margin-block: revert;
 scroll-margin-block: unset;
 ```
 
-### Values
+### 値
 
 - `<length>`
-  - : An outset from the corresponding edge of the scroll container.
+  - : スクロールコンテナーの対応する辺からの距離です。
 
-## Description
+## 解説
 
-The scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
+`scroll-margin` の値はこのボックスをスナップポートに割り当てるために使用されるスクロールスナップ領域の定義の張り出し部分を表します。スクロールスナップ領域は、変換された境界ボックスを取り、その矩形の境界ボックス (スクロールコンテナーの座標空間内で軸方向に配置) を割り当てて、指定された張り出し部分を追加することによって決定されます。
 
-## Formal definition
+## 公式定義
 
 {{cssinfo}}
 
-## Formal syntax
+## 形式文法
 
 {{csssyntax}}
 
-## Specifications
+## 仕様書
 
 {{Specifications}}
 
-## Browser compatibility
+## ブラウザーの互換性
 
 {{Compat}}
 
-## See also
+## 関連情報
 
-- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)
+- [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-margin-bottom/index.md b/files/ja/web/css/scroll-margin-bottom/index.md
index 12df44a35e..c5542827d7 100644
--- a/files/ja/web/css/scroll-margin-bottom/index.md
+++ b/files/ja/web/css/scroll-margin-bottom/index.md
@@ -3,66 +3,58 @@ title: scroll-margin-bottom
 slug: Web/CSS/scroll-margin-bottom
 tags:
   - CSS
-  - CSS Property
   - CSS プロパティ
   - Reference
+  - Scroll margin bottom
   - Web
+  - recipe:css-property
   - scroll-margin
   - scroll-margin-bottom
+browser-compat: css.properties.scroll-margin-bottom
 translation_of: Web/CSS/scroll-margin-bottom
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><code>scroll-margin-bottom</code> プロパティは、スクロールスナップ領域の下側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p>
+`scroll-margin-bottom` プロパティは、スクロールスナップ領域の下側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-margin-bottom.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-margin-bottom.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+## 構文
 
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
 scroll-margin-bottom: 10px;
 scroll-margin-bottom: 1em;
 
 /* グローバル値 */
 scroll-margin-bottom: inherit;
 scroll-margin-bottom: initial;
+scroll-margin-bottom: revert;
 scroll-margin-bottom: unset;
-</pre>
+```
+
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `<length>`
+  - : スクロールコンテナーの下側の辺からみた外部の距離です。
 
-<dl>
- <dt><code><var>&lt;length&gt;</var></code></dt>
- <dd>スクロールコンテナーの下側の辺からみた外部の距離です。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<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-margin-bottom", "scroll-margin-bottom")}}</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-margin-bottom")}}</p>
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-margin-inline-end/index.md b/files/ja/web/css/scroll-margin-inline-end/index.md
index 7047a4c8fa..19c0c2a764 100644
--- a/files/ja/web/css/scroll-margin-inline-end/index.md
+++ b/files/ja/web/css/scroll-margin-inline-end/index.md
@@ -2,65 +2,140 @@
 title: scroll-margin-inline-end
 slug: Web/CSS/scroll-margin-inline-end
 tags:
-  - Advanced
+  - 上級者
   - CSS
   - NeedsExample
   - Reference
-  - 上級者
+  - recipe:css-property
+browser-compat: css.properties.scroll-margin-inline-end
 translation_of: Web/CSS/scroll-margin-inline-end
 ---
-<div>{{CSSRef}}</div>
-
-<p><code>scroll-margin-inline-end</code> プロパティは、スクロールスナップ領域のインライン方向における末尾側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p>
+{{CSSRef}}
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-margin-inline-end.html")}}</div>
+`scroll-margin-inline-end` プロパティは、スクロールスナップ領域のインライン方向における末尾側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+{{EmbedInteractiveExample("pages/css/scroll-margin-inline-end.html")}}
 
-<p>{{cssinfo}}</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
 scroll-margin-inline-end: 10px;
 scroll-margin-inline-end: 1em;
 
 /* グローバル値 */
 scroll-margin-inline-end: inherit;
 scroll-margin-inline-end: initial;
+scroll-margin-inline-end: revert;
 scroll-margin-inline-end: unset;
-</pre>
+```
+
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `<length>`
+  - : スクロールコンテナーのインライン方向における末尾側の辺からみた外部の距離です。
 
-<dl>
- <dt><code><var>&lt;length&gt;</var></code></dt>
- <dd>スクロールコンテナーのインライン方向における末尾側の辺からみた外部の距離です。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<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-margin-inline-end", "scroll-margin-inline-end")}}</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-margin-inline-end")}}</p>
+## 例
+
+<h3 id="Simple_demonstration">簡単なデモ</h3>
+
+この例では、上記のインタラクティブ例と非常によく似たものを実装していますが、ここではその実装方法を説明します。
+
+ここでの目的は、水平方向にスクロールする 4 つのブロックを作成することです。2 つ目と 3 つ目のブロックは、それぞれのブロックの右端に近いところでスナップします。
+
+#### HTML
+
+ブロックを表す HTML はとても簡単です。
+
+```html
+<div class="scroller">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+</div>
+```
+
+#### CSS
+
+外側のコンテナーのスタイルは以下のようになっています。
+
+```css
+.scroller {
+  text-align: left;
+  width: 250px;
+  height: 250px;
+  overflow-x: scroll;
+  display: flex;
+  box-sizing: border-box;
+  border: 1px solid #000;
+  scroll-snap-type: x mandatory;
+}
+```
+
+スクロールスナップに関連する主な部品は、`overflow-x: scroll` で、コンテンツがスクロールしても隠れないようにしています。また、`scroll-snap-type: x mandatory` で、スクロールのスナップは水平軸に沿って行わなければならず、スクロールは常にスナップ点で静止するようになっています。
+
+子要素のスタイルは次のようになっています。
+
+```css
+.scroller > div {
+  flex: 0 0 250px;
+  width: 250px;
+  background-color: #663399;
+  color: #fff;
+  font-size: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  scroll-snap-align: end;
+}
+
+.scroller > div:nth-child(2n) {
+  background-color: #fff;
+  color: #663399;
+}
+```
+
+ここで最も重要なのは `scroll-snap-align: end` で、これは右側の端 (ここでは x 軸に沿った「末尾」) をスナップ点として指定するものです。
+
+
+最後に、スクロールのマージン値を指定しますが、これは 2 番目と 3 番目の子要素に対して異なる値を指定します。
+
+```css
+.scroller > div:nth-child(2) {
+  scroll-margin-inline-end: 1rem;
+}
+
+.scroller > div:nth-child(3) {
+  scroll-margin-inline-end: 2rem;
+}
+```
+
+つまり、真ん中の子要素を過ぎてスクロールした場合、2 番目の `<div>` のインラインの末尾から `1rem`、3 番目の `<div>` のインラインの末尾から `2rem` のところでスナップすることになります。
+
+#### 結果
+
+自分でやってみましょう。
+
+{{EmbedLiveSample('Simple_demonstration', '100%', 300)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-margin-inline-start/index.md b/files/ja/web/css/scroll-margin-inline-start/index.md
index 18090254ea..948c70f909 100644
--- a/files/ja/web/css/scroll-margin-inline-start/index.md
+++ b/files/ja/web/css/scroll-margin-inline-start/index.md
@@ -3,66 +3,141 @@ title: scroll-margin-inline-start
 slug: Web/CSS/scroll-margin-inline-start
 tags:
   - CSS
-  - CSS Property
   - CSS プロパティ
   - Reference
   - Web
+  - recipe:css-property
   - scroll-margin-inline
   - scroll-margin-inline-start
+browser-compat: css.properties.scroll-margin-inline-start
 translation_of: Web/CSS/scroll-margin-inline-start
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><code>scroll-margin-inline-start</code> プロパティは、スクロールスナップ領域のインライン方向における開始側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p>
+`scroll-margin-inline-start` プロパティは、スクロールスナップ領域のインライン方向における先頭側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-margin-inline-start.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-margin-inline-start.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+## 構文
 
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
 scroll-margin-inline-start: 10px;
 scroll-margin-inline-start: 1em;
 
 /* グローバル値 */
 scroll-margin-inline-start: inherit;
 scroll-margin-inline-start: initial;
+scroll-margin-inline-start: revert;
 scroll-margin-inline-start: unset;
-</pre>
+```
+
+### 値
+
+- `<length>`
+  - : スクロールコンテナーのインライン方向における先頭側の辺からみた外部の距離です。
 
-<h3 id="Values" name="Values">値</h3>
+## 公式定義
 
-<dl>
- <dt><code><var>&lt;length&gt;</var></code></dt>
- <dd>スクロールコンテナーのインライン方向における先頭側の辺からみた外部の距離です。</dd>
-</dl>
+{{cssinfo}}
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 形式文法
 
 {{csssyntax}}
 
-<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-margin-inline-start", "scroll-margin-inline-start")}}</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-margin-inline-start")}}</p>
+## 例
+
+<h3 id="Simple_demonstration">簡単なデモ</h3>
+
+この例では、上記のインタラクティブ例と非常によく似たものを実装していますが、ここではその実装方法を説明します。
+
+ここでの目的は、水平方向にスクロールする 4 つのブロックを作成することです。2 つ目と 3 つ目のブロックは、それぞれのブロックの左端に近いところでスナップします。
+
+#### HTML
+
+ブロックを表す HTML はとても簡単です。
+
+```html
+<div class="scroller">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+</div>
+```
+
+#### CSS
+
+外側のコンテナーのスタイルは以下のようになっています。
+
+```css
+.scroller {
+  text-align: left;
+  width: 250px;
+  height: 250px;
+  overflow-x: scroll;
+  display: flex;
+  box-sizing: border-box;
+  border: 1px solid #000;
+  scroll-snap-type: x mandatory;
+}
+```
+
+スクロールスナップに関連する主な部品は、`overflow-x: scroll` で、コンテンツがスクロールしても隠れないようにしています。また、`scroll-snap-type: x mandatory` で、スクロールのスナップは水平軸に沿って行わなければならず、スクロールは常にスナップ点で静止するようになっています。
+
+子要素のスタイルは次のようになっています。
+
+```css
+.scroller > div {
+  flex: 0 0 250px;
+  width: 250px;
+  background-color: #663399;
+  color: #fff;
+  font-size: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  scroll-snap-align: start;
+}
+
+.scroller > div:nth-child(2n) {
+  background-color: #fff;
+  color: #663399;
+}
+```
+
+ここで最も重要なのは `scroll-snap-align: start` で、これは左側の端 (ここでは x 軸に沿った「先頭」) をスナップ点として指定するものです。
+
+
+最後に、スクロールのマージン値を指定しますが、これは 2 番目と 3 番目の子要素に対して異なる値を指定します。
+
+```css
+.scroller > div:nth-child(2) {
+  scroll-margin-inline-start: 1rem;
+}
+
+.scroller > div:nth-child(3) {
+  scroll-margin-inline-start: 2rem;
+}
+```
+
+つまり、真ん中の子要素を過ぎてスクロールした場合、2 番目の `<div>` のインラインの先頭から `1rem`、3 番目の `<div>` のインラインの先頭から `2rem` のところでスナップすることになります。
+
+#### 結果
+
+自分でやってみましょう。
+
+{{EmbedLiveSample('Simple_demonstration', '100%', 300)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-margin-inline/index.md b/files/ja/web/css/scroll-margin-inline/index.md
index 06d1900196..6fb2eda59d 100644
--- a/files/ja/web/css/scroll-margin-inline/index.md
+++ b/files/ja/web/css/scroll-margin-inline/index.md
@@ -3,64 +3,152 @@ title: scroll-margin-inline
 slug: Web/CSS/scroll-margin-inline
 tags:
   - CSS
-  - CSS Property
   - CSS プロパティ
   - Reference
   - Web
+  - recipe:css-shorthand-property
   - scroll-margin
   - scroll-margin-inline
+browser-compat: css.properties.scroll-margin-inline
 translation_of: Web/CSS/scroll-margin-inline
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><code>scroll-margin-inline</code> プロパティは、インライン方向の scroll-margin の個別指定を設定する一括指定プロパティです。</p>
+`scroll-margin-inline` は[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、インライン方向のスクロールマージンを設定します。
 
-<p>scroll-margin 系のプロパティは、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p>
+## 構成要素のプロパティ
 
-<p>{{cssinfo}}</p>
+このプロパティは以下の CSS プロパティの一括指定です。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+- [`scroll-margin-inline-end`](/ja/docs/Web/CSS/scroll-margin-inline-end)
+- [`scroll-margin-inline-start`](/ja/docs/Web/CSS/scroll-margin-inline-start)
 
-<pre class="brush: css">/* &lt;length&gt; 値 */
+## 構文
+
+```css
+/* <length> 値 */
 scroll-margin-inline: 10px;
 scroll-margin-inline: 1em .5em ;
 
 /* グローバル値 */
 scroll-margin-inline: inherit;
 scroll-margin-inline: initial;
+scroll-margin-inline: revert;
 scroll-margin-inline: unset;
-</pre>
+```
+
+### 値
+
+- `<length>`
+  - : スクロールコンテナーの対応する辺からの距離です。
+
+## 解説
+
+scroll-margin 系のプロパティは、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。
 
-<h3 id="Values" name="Values">値</h3>
+## 公式定義
 
-<dl>
- <dt><code><var>&lt;length&gt;</var></code></dt>
- <dd>スクロールコンテナーの対応する辺からの距離です。</dd>
-</dl>
+{{cssinfo}}
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 形式文法
 
 {{csssyntax}}
 
-<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-margin-inline", "scroll-margin-inline")}}</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-margin-inline")}}</p>
+## 例
+
+<h3 id="Simple_demonstration">簡単なデモ</h3>
+
+この例では、上記のインタラクティブ例と非常によく似たものを実装していますが、ここではその実装方法を説明します。
+
+ここでの目的は、水平方向にスクロールする 4 つのブロックを作成することです。2 つ目と 3 つ目のブロックは、それぞれのブロックの右端に近いところでスナップします。
+
+#### HTML
+
+ブロックを表す HTML はとても簡単です。
+
+```html
+<div class="scroller">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+</div>
+```
+
+#### CSS
+
+外側のコンテナーのスタイルは以下のようになっています。
+
+```css
+.scroller {
+  text-align: left;
+  width: 250px;
+  height: 250px;
+  overflow-x: scroll;
+  display: flex;
+  box-sizing: border-box;
+  border: 1px solid #000;
+  scroll-snap-type: x mandatory;
+}
+```
+
+スクロールスナップに関連する主な部品は、`overflow-x: scroll` で、コンテンツがスクロールしても隠れないようにしています。また、`scroll-snap-type: x mandatory` で、スクロールのスナップは水平軸に沿って行わなければならず、スクロールは常にスナップ点で静止するようになっています。
+
+子要素のスタイルは次のようになっています。
+
+```css
+.scroller > div {
+  flex: 0 0 250px;
+  width: 250px;
+  background-color: #663399;
+  color: #fff;
+  font-size: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  scroll-snap-align: end;
+}
+
+.scroller > div:nth-child(2n) {
+  background-color: #fff;
+  color: #663399;
+}
+```
+
+ここで最も重要なのは `scroll-snap-align: end` で、これは右側の端 (ここでは x 軸に沿った「末尾」) をスナップ点として指定するものです。
+
+
+最後に、スクロールのマージン値を指定しますが、これは 2 番目と 3 番目の子要素に対して異なる値を指定します。
+
+```css
+.scroller > div:nth-child(2) {
+  scroll-margin-inline: 1rem;
+}
+
+.scroller > div:nth-child(3) {
+  scroll-margin-inline: 2rem;
+}
+```
+
+つまり、真ん中の子要素を過ぎてスクロールした場合、2 番目の `<div>` のインラインの末尾から `1rem`、3 番目の `<div>` のインラインの末尾から `2rem` のところでスナップすることになります。
+
+> **Note:** ここでは `scroll-margin` をインライン軸 (この場合は X 軸) の先頭*と*末尾に一度に設定していますが、実際に関係するのは末尾側だけです。例えば `scroll-margin-inline: 0 1rem` や `scroll-margin-inline-end: 1rem` などのように、一辺のみにスクロールマージンを設定しても同様に機能します。
+
+#### 結果
+
+自分でやってみましょう。
+
+{{EmbedLiveSample('Simple_demonstration', '100%', 300)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-margin-left/index.md b/files/ja/web/css/scroll-margin-left/index.md
index f9c243e949..308b7b7f61 100644
--- a/files/ja/web/css/scroll-margin-left/index.md
+++ b/files/ja/web/css/scroll-margin-left/index.md
@@ -3,67 +3,58 @@ title: scroll-margin-left
 slug: Web/CSS/scroll-margin-left
 tags:
   - CSS
-  - CSS Property
   - CSS プロパティ
   - Reference
   - Scroll margin left
   - Web
+  - recipe:css-property
   - scroll-margin
   - scroll-margin-left
+browser-compat: css.properties.scroll-margin-left
 translation_of: Web/CSS/scroll-margin-left
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><code>scroll-margin-left</code> プロパティは、スクロールスナップ領域の左側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p>
+`scroll-margin-left` プロパティは、スクロールスナップ領域の左側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-margin-left.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-margin-left.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+## 構文
 
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
 scroll-margin-left: 10px;
 scroll-margin-left: 1em;
 
 /* グローバル値 */
 scroll-margin-left: inherit;
 scroll-margin-left: initial;
+scroll-margin-left: revert;
 scroll-margin-left: unset;
-</pre>
+```
+
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `<length>`
+  - : スクロールコンテナーの左側の辺からみた外部の距離です。
 
-<dl>
- <dt><code><var>&lt;length&gt;</var></code></dt>
- <dd>スクロールコンテナーの左側の辺からみた外部の距離です。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<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-margin-left", "scroll-margin-left")}}</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-margin-left")}}</p>
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-margin-right/index.md b/files/ja/web/css/scroll-margin-right/index.md
index a04c35e12e..b941665957 100644
--- a/files/ja/web/css/scroll-margin-right/index.md
+++ b/files/ja/web/css/scroll-margin-right/index.md
@@ -3,65 +3,57 @@ title: scroll-margin-right
 slug: Web/CSS/scroll-margin-right
 tags:
   - CSS
-  - CSS Property
+  - CSS プロパティ
   - Reference
   - Web
+  - recipe:css-property
   - scroll-margin
   - scroll-margin-right
+browser-compat: css.properties.scroll-margin-right
 translation_of: Web/CSS/scroll-margin-right
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><code>scroll-margin-right</code> プロパティは、スクロールスナップ領域の右側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p>
+`scroll-margin-right` プロパティは、スクロールスナップ領域の右側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-margin-right.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-margin-right.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+## 構文
 
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
 scroll-margin-right: 10px;
 scroll-margin-right: 1em;
 
 /* グローバル値 */
 scroll-margin-right: inherit;
 scroll-margin-right: initial;
+scroll-margin-right: revert;
 scroll-margin-right: unset;
-</pre>
+```
+
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `<length>`
+  - : スクロールコンテナーの右側の辺からみた外部の距離です。
 
-<dl>
- <dt><code><var>&lt;length&gt;</var></code></dt>
- <dd>スクロールコンテナーの右側の辺からみた外部の距離です。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<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-margin-right", "scroll-margin-right")}}</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-margin-right")}}</p>
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-margin-top/index.md b/files/ja/web/css/scroll-margin-top/index.md
index 04f356c5c5..c2efe1c843 100644
--- a/files/ja/web/css/scroll-margin-top/index.md
+++ b/files/ja/web/css/scroll-margin-top/index.md
@@ -3,66 +3,57 @@ title: scroll-margin-top
 slug: Web/CSS/scroll-margin-top
 tags:
   - CSS
-  - CSS Property
-  - CodingScripting
+  - CSS プロパティ
   - Reference
   - Web
+  - recipe:css-property
   - scroll-margin
   - scroll-margin-top
+browser-compat: css.properties.scroll-margin-top
 translation_of: Web/CSS/scroll-margin-top
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><code>scroll-margin-top</code> プロパティは、スクロールスナップ領域の上側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p>
+`scroll-margin-top` プロパティは、スクロールスナップ領域の上側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-margin-top.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-margin-top.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+## 構文
 
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
 scroll-margin-top: 10px;
 scroll-margin-top: 1em;
 
 /* グローバル値 */
 scroll-margin-top: inherit;
 scroll-margin-top: initial;
+scroll-margin-top: revert;
 scroll-margin-top: unset;
-</pre>
+```
+
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `<length>`
+  - : スクロールコンテナーの上側の辺からみた外部の距離です。
 
-<dl>
- <dt><code><var>&lt;length&gt;</var></code></dt>
- <dd>スクロールコンテナーの上側の辺からみた外部の距離です。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<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-margin-top", "scroll-margin-top")}}</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-margin-top")}}</p>
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-margin/index.md b/files/ja/web/css/scroll-margin/index.md
index d604272ca1..75699bb7a4 100644
--- a/files/ja/web/css/scroll-margin/index.md
+++ b/files/ja/web/css/scroll-margin/index.md
@@ -3,60 +3,159 @@ title: scroll-margin
 slug: Web/CSS/scroll-margin
 tags:
   - CSS
+  - プロパティ
   - Reference
+  - margin
+  - recipe:css-shorthand-property
   - scroll-margin
+  - scrollbar
+  - scrolling
+browser-compat: css.properties.scroll-margin
 translation_of: Web/CSS/scroll-margin
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>scroll-margin</code></strong> プロパティは一括指定プロパティであり、すべての個別指定の <code>scroll-margin</code> プロパティに対して、ちょうど <code>margin</code> プロパティが個別指定の <code>margin-*</code> に値を割り当てるように、値を割り当てます。</p>
+**`scroll-margin`** は[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、要素のスクロールマージンを一度にすべて、ちょうど `margin` プロパティが個別指定の `margin-*` に値を割り当てるように、値を割り当てます。
 
-<p><code>scroll-margin</code> の値はこのボックスをスナップポートに割り当てるために使用されるスクロールスナップ領域の定義の張り出し部分を表します。スクロールスナップ領域は、変換された境界ボックスを取り、その矩形の境界ボックス (スクロールコンテナーの座標空間内で軸方向に配置) を割り当てて、指定された張り出し部分を追加することによって決定されます。</p>
+{{EmbedInteractiveExample("pages/css/scroll-margin.html")}}
 
-<p>{{cssinfo}}</p>
+## 構成要素のプロパティ
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+このプロパティは以下の CSS プロパティの一括指定です。
 
-<pre class="brush: css">/* &lt;length&gt; 値 */
+- [`scroll-margin-bottom`](/ja/docs/Web/CSS/scroll-margin-bottom)
+- [`scroll-margin-left`](/ja/docs/Web/CSS/scroll-margin-left)
+- [`scroll-margin-right`](/ja/docs/Web/CSS/scroll-margin-right)
+- [`scroll-margin-top`](/ja/docs/Web/CSS/scroll-margin-top)
+
+## 構文
+
+```css
+/* <length> 値 */
 scroll-margin: 10px;
 scroll-margin: 1em .5em 1em 1em;
 
 /* グローバル値 */
 scroll-margin: inherit;
 scroll-margin: initial;
+scroll-margin: revert;
 scroll-margin: unset;
-</pre>
+```
+
+### 値
+
+- {{cssxref("&lt;length&gt;")}}
+  - : スクロールコンテナーの辺からの張り出し部分です。
+
+## 解説
 
-<h3 id="Values" name="Values">値</h3>
+`scroll-margin` の効果は、例のコンテンツの 2 つの「ページ」の間の一部の位置にスクロールすることで見ることができます。`scroll-margin` に指定された値は、主にスナップポートの外側にあるページのうち、どれだけの部分を表示したままにするかを決定します。
 
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>スクロールコンテナーの辺からの張り出し部分です。</dd>
-</dl>
+`scroll-margin` の値はこのボックスをスナップポートに割り当てるために使用されるスクロールスナップ領域の定義の張り出し部分を表します。スクロールスナップ領域は、変換された境界ボックスを取り、その矩形の境界ボックス (スクロールコンテナーの座標空間内で軸方向に配置) を割り当てて、指定された張り出し部分を追加することによって決定されます。
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<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-margin", "scroll-margin")}}</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-margin")}}</p>
+## 例
+
+<h3 id="Simple_demonstration">簡単なデモ</h3>
+
+この例では、上記のインタラクティブ例と非常によく似たものを実装していますが、ここではその実装方法を説明します。
+
+ここでの目的は、水平方向にスクロールする 4 つのブロックを作成することです。2 つ目と 3 つ目のブロックは、それぞれのブロックの左端に近いところでスナップします。
+
+#### HTML
+
+ブロックを表す HTML はとても簡単です。
+
+```html
+<div class="scroller">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+</div>
+```
+
+#### CSS
+
+外側のコンテナーのスタイルは以下のようになっています。
+
+```css
+.scroller {
+  text-align: left;
+  width: 250px;
+  height: 250px;
+  overflow-x: scroll;
+  display: flex;
+  box-sizing: border-box;
+  border: 1px solid #000;
+  scroll-snap-type: x mandatory;
+}
+```
+
+スクロールスナップに関連する主な部品は、`overflow-x: scroll` で、コンテンツがスクロールしても隠れないようにしています。また、`scroll-snap-type: x mandatory` で、スクロールのスナップは水平軸に沿って行わなければならず、スクロールは常にスナップ点で静止するようになっています。
+
+子要素のスタイルは次のようになっています。
+
+```css
+.scroller > div {
+  flex: 0 0 250px;
+  width: 250px;
+  background-color: #663399;
+  color: #fff;
+  font-size: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  scroll-snap-align: start;
+}
+
+.scroller > div:nth-child(2n) {
+  background-color: #fff;
+  color: #663399;
+}
+```
+
+ここで最も重要なのは `scroll-snap-align: start` で、これは左側の端 (ここでは x 軸に沿った「先頭」) をスナップ点として指定するものです。
+
+
+最後に、スクロールのマージン値を指定しますが、これは 2 番目と 3 番目の子要素に対して異なる値を指定します。
+
+```css
+.scroller > div:nth-child(2) {
+  scroll-margin: 1rem;
+}
+
+.scroller > div:nth-child(3) {
+  scroll-margin: 2rem;
+}
+```
+
+つまり、真ん中の子要素を過ぎてスクロールした場合、2 番目の `<div>` の左端から `1rem`、3 番目の `<div>` の左端から `2rem` のところでスナップすることになります。
+
+> **Note:** ここでは `scroll-margin` をすべての辺に一度に設定していますが、実際に関係するのは先頭側だけです。例えば `scroll-margin-inline-start: 1rem` や `scroll-margin: 0 0 0 1rem` などのように、一辺のみにスクロールマージンを設定しても同様に機能します。
+
+#### 結果
+
+自分でやってみましょう。
+
+{{EmbedLiveSample('Simple_demonstration', '100%', 300)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-padding-block-end/index.md b/files/ja/web/css/scroll-padding-block-end/index.md
index 55373c9991..ef8fddfbfc 100644
--- a/files/ja/web/css/scroll-padding-block-end/index.md
+++ b/files/ja/web/css/scroll-padding-block-end/index.md
@@ -3,28 +3,28 @@ title: scroll-padding-block-end
 slug: Web/CSS/scroll-padding-block-end
 tags:
   - CSS
-  - CSS Property
+  - CSS プロパティ
   - Reference
   - Web
-  - 'recipe:css-property'
+  - recipe:css-property
   - scroll-padding-block
   - scroll-padding-block-end
+browser-compat: css.properties.scroll-padding-block-end
 translation_of: Web/CSS/scroll-padding-block-end
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><code>scroll-padding-block-end</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>のブロック方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+`scroll-padding-block-end` プロパティは、スクロールポートの*最適表示領域*のブロック方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding-block-end.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding-block-end.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css notranslate">/* キーワード値 */
+```css
+/* キーワード値 */
 scroll-padding-block-end: auto;
 
-/* &lt;length&gt; 値 */
+/* <length> 値 */
 scroll-padding-block-end: 10px;
 scroll-padding-block-end: 1em;
 scroll-padding-block-end: 10%;
@@ -32,45 +32,34 @@ scroll-padding-block-end: 10%;
 /* グローバル値 */
 scroll-padding-block-end: inherit;
 scroll-padding-block-end: initial;
+scroll-padding-block-end: revert;
 scroll-padding-block-end: unset;
-</pre>
+```
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
-<dl>
- <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
- <dd>スクロールポートのブロック方向の末尾側からの内側のオフセットで、有効な長さまたはパーセント値です。</dd>
- <dt><code>auto</code></dt>
- <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd>
-</dl>
+- `<length-percentage>`
+  - : スクロールポートのブロック方向の末尾側からの内側のオフセットで、有効な長さまたはパーセント値です。
+- `auto`
+  - : オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<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-padding-block-end", "scroll-padding-block-end")}}</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-padding-block-end")}}</p>
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-padding-block-start/index.md b/files/ja/web/css/scroll-padding-block-start/index.md
index 4094bd5b12..89aa5cd02f 100644
--- a/files/ja/web/css/scroll-padding-block-start/index.md
+++ b/files/ja/web/css/scroll-padding-block-start/index.md
@@ -3,30 +3,28 @@ title: scroll-padding-block-start
 slug: Web/CSS/scroll-padding-block-start
 tags:
   - CSS
-  - CSS Property
   - CSS プロパティ
   - Reference
   - Web
+  - recipe:css-property
   - scroll-padding-block
   - scroll-padding-block-start
+browser-compat: css.properties.scroll-padding-block-start
 translation_of: Web/CSS/scroll-padding-block-start
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><code>scroll-padding-block-start</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>のブロック方向における先頭側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+`scroll-padding-block-start` プロパティは、スクロールポートの*最適表示領域*のブロック方向における先頭側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding-block-start.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding-block-start.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+## 構文
 
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css">/* キーワード値 */
+```css
+/* キーワード値 */
 scroll-padding-block-start: auto;
 
-/* &lt;length&gt; 値 */
+/* <length> 値 */
 scroll-padding-block-start: 10px;
 scroll-padding-block-start: 1em;
 scroll-padding-block-start: 10%;
@@ -35,40 +33,32 @@ scroll-padding-block-start: 10%;
 scroll-padding-block-start: inherit;
 scroll-padding-block-start: initial;
 scroll-padding-block-start: unset;
-</pre>
+```
+
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `<length-percentage>`
+  - : スクロールポートのブロック方向の先頭側からの内側のオフセットで、有効な長さまたはパーセント値です。
+- `auto`
+  - : オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
 
-<dl>
- <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
- <dd>スクロールポートのブロック方向の先頭側からの内側のオフセットで、有効な長さまたはパーセント値です。</dd>
- <dt><code>auto</code></dt>
- <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<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-padding-block-start", "scroll-padding-block-start")}}</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-padding-block-start")}}</p>
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-padding-block/index.md b/files/ja/web/css/scroll-padding-block/index.md
index 7a0916cbb3..9dda14bb19 100644
--- a/files/ja/web/css/scroll-padding-block/index.md
+++ b/files/ja/web/css/scroll-padding-block/index.md
@@ -3,28 +3,37 @@ title: scroll-padding-block
 slug: Web/CSS/scroll-padding-block
 tags:
   - CSS
-  - CSS Scroll Snap
-  - Property
+  - CSS スクロールスナップ
   - Reference
   - Web
+  - recipe:css-shorthand-property
   - scroll-padding
   - scroll-padding-block
+browser-compat: css.properties.scroll-padding-block
 translation_of: Web/CSS/scroll-padding-block
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><code>scroll-padding-block</code> プロパティは、ブロック軸の scroll-padding 個別指定を設定する一括指定プロパティです。</p>
+`scroll-padding-block` は[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、要素のブロック軸のスクロールパディングを設定します。
 
-<p>scroll-padding 系のプロパティは、スクロールポートの<dfn>最適表示領域</dfn>のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、作者は他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+{{EmbedInteractiveExample("pages/css/scroll-padding-block.html")}}
 
-<p>{{cssinfo}}</p>
+scroll-padding 系のプロパティは、スクロールポートの*最適表示領域*のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、作者は他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構成要素のプロパティ
 
-<pre class="brush: css">/* キーワード値 */
+このプロパティは以下の CSS プロパティの一括指定です。
+
+- [`scroll-padding-block-end`](/ja/docs/Web/CSS/scroll-padding-block-end)
+- [`scroll-padding-block-start`](/ja/docs/Web/CSS/scroll-padding-block-start)
+
+## 構文
+
+```css
+/* キーワード値 */
 scroll-padding-block: auto;
 
-/* &lt;length&gt; 値 */
+/* <length> 値 */
 scroll-padding-block: 10px;
 scroll-padding-block: 1em .5em;
 scroll-padding-block: 10%;
@@ -32,41 +41,34 @@ scroll-padding-block: 10%;
 /* グローバル値 */
 scroll-padding-block: inherit;
 scroll-padding-block: initial;
+scroll-padding-block: revert;
 scroll-padding-block: unset;
-</pre>
+```
+
+### 値
+
+- `<length-percentage>`
+  - : スクロールポートの対応する辺からの内側のオフセットで、有効な長さまたはパーセント値です。
+- `auto`
+  - : オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ユーザーエージェントはゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。
 
-<h3 id="Values" name="Values">値</h3>
+## 公式定義
 
-<dl>
- <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
- <dd>スクロールポートの対応する辺からの内側のオフセットで、有効な長さまたはパーセント値です。</dd>
- <dt><code>auto</code></dt>
- <dd>オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。</dd>
-</dl>
+{{cssinfo}}
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 形式文法
 
 {{csssyntax}}
 
-<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-padding-block", "scroll-padding-block")}}</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-padding-block")}}</p>
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-padding-bottom/index.md b/files/ja/web/css/scroll-padding-bottom/index.md
index cb4b2198af..5ca49d42b7 100644
--- a/files/ja/web/css/scroll-padding-bottom/index.md
+++ b/files/ja/web/css/scroll-padding-bottom/index.md
@@ -3,30 +3,28 @@ title: scroll-padding-bottom
 slug: Web/CSS/scroll-padding-bottom
 tags:
   - CSS
-  - CSS Property
   - CSS プロパティ
   - Reference
   - Web
+  - recipe:css-property
   - scroll-padding
   - scroll-padding-bottom
+browser-compat: css.properties.scroll-padding-bottom
 translation_of: Web/CSS/scroll-padding-bottom
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><code>scroll-padding-bottom</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>の下のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+`scroll-padding-bottom` プロパティは、スクロールポートの*最適表示領域*の下のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding-bottom.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding-bottom.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+## 構文
 
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css">/* キーワード値 */
+```css
+/* キーワード値 */
 scroll-padding-bottom: auto;
 
-/* &lt;length&gt; 値 */
+/* <length> 値 */
 scroll-padding-bottom: 10px;
 scroll-padding-bottom: 1em;
 scroll-padding-bottom: 10%;
@@ -34,41 +32,34 @@ scroll-padding-bottom: 10%;
 /* グローバル値 */
 scroll-padding-bottom: inherit;
 scroll-padding-bottom: initial;
+scroll-padding-bottom: revert;
 scroll-padding-bottom: unset;
-</pre>
+```
+
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `<length-percentage>`
+  - : スクロールポートの下辺からの内側のオフセットで、有効な長さまたはパーセント値です。
+- `auto`
+  - : オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
 
-<dl>
- <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
- <dd>スクロールポートの下辺からの内側のオフセットで、有効な長さまたはパーセント値です。</dd>
- <dt><code>auto</code></dt>
- <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<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-padding-bottom", "scroll-padding-bottom")}}</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-padding-bottom")}}</p>
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-padding-inline-end/index.md b/files/ja/web/css/scroll-padding-inline-end/index.md
index 5e977ca930..4bff47c185 100644
--- a/files/ja/web/css/scroll-padding-inline-end/index.md
+++ b/files/ja/web/css/scroll-padding-inline-end/index.md
@@ -3,29 +3,27 @@ title: scroll-padding-inline-end
 slug: Web/CSS/scroll-padding-inline-end
 tags:
   - CSS
-  - CSS Property
   - CSS プロパティ
   - Web
+  - recipe:css-property
   - scroll-padding-inline
   - scroll-padding-inline-end
+browser-compat: css.properties.scroll-padding-inline-end
 translation_of: Web/CSS/scroll-padding-inline-end
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><code>scroll-padding-inline-end</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>のインライン方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+`scroll-padding-inline-end` プロパティは、スクロールポートの*最適表示領域*のインライン方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline-end.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding-inline-end.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+## 構文
 
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css">/* キーワード値 */
+```css
+/* キーワード値 */
 scroll-padding-inline-end: auto;
 
-/* &lt;length&gt; 値 */
+/* <length> 値 */
 scroll-padding-inline-end: 10px;
 scroll-padding-inline-end: 1em;
 scroll-padding-inline-end: 10%;
@@ -33,41 +31,34 @@ scroll-padding-inline-end: 10%;
 /* グローバル値 */
 scroll-padding-inline-end: inherit;
 scroll-padding-inline-end: initial;
+scroll-padding-inline-end: revert;
 scroll-padding-inline-end: unset;
-</pre>
+```
+
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `<length-percentage>`
+  - : スクロールポートのインライン方向の末尾側からの内側のオフセットで、有効な長さまたはパーセント値です。
+- `auto`
+  - : オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
 
-<dl>
- <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
- <dd>スクロールポートのインライン方向の末尾側からの内側のオフセットで、有効な長さまたはパーセント値です。</dd>
- <dt><code>auto</code></dt>
- <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<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-padding-inline-end", "scroll-padding-inline-end")}}</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-padding-inline-end")}}</p>
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-padding-inline-start/index.md b/files/ja/web/css/scroll-padding-inline-start/index.md
index 72596cabe7..86bc29a96e 100644
--- a/files/ja/web/css/scroll-padding-inline-start/index.md
+++ b/files/ja/web/css/scroll-padding-inline-start/index.md
@@ -3,29 +3,27 @@ title: scroll-padding-inline-start
 slug: Web/CSS/scroll-padding-inline-start
 tags:
   - CSS
-  - CSS Property
   - CSS プロパティ
   - Web
+  - recipe:css-property
   - scroll-padding-inline
   - scroll-padding-inline-start
+browser-compat: css.properties.scroll-padding-inline-start
 translation_of: Web/CSS/scroll-padding-inline-start
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><code>scroll-padding-inline-start</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>のインライン方向における先頭側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+`scroll-padding-inline-start` プロパティは、スクロールポートの*最適表示領域*のインライン方向における先頭側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline-start.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding-inline-start.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+## 構文
 
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css">/* キーワード値 */
+```css
+/* キーワード値 */
 scroll-padding-inline-start: auto;
 
-/* &lt;length&gt; 値 */
+/* <length> 値 */
 scroll-padding-inline-start: 10px;
 scroll-padding-inline-start: 1em;
 scroll-padding-inline-start: 10%;
@@ -33,41 +31,34 @@ scroll-padding-inline-start: 10%;
 /* グローバル値 */
 scroll-padding-inline-start: inherit;
 scroll-padding-inline-start: initial;
+scroll-padding-inline-start: revert;
 scroll-padding-inline-start: unset;
-</pre>
+```
+
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `<length-percentage>`
+  - : スクロールポートのインライン方向の先頭側からの内側のオフセットで、有効な長さまたはパーセント値です。
+- `auto`
+  - : オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
 
-<dl>
- <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
- <dd>スクロールポートのインライン方向の先頭側からの内側のオフセットで、有効な長さまたはパーセント値です。</dd>
- <dt><code>auto</code></dt>
- <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<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-padding-inline-start", "scroll-padding-inline-start")}}</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-padding-inline-start")}}</p>
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-padding-inline/index.md b/files/ja/web/css/scroll-padding-inline/index.md
index 21ed10d7e4..73f75dbaba 100644
--- a/files/ja/web/css/scroll-padding-inline/index.md
+++ b/files/ja/web/css/scroll-padding-inline/index.md
@@ -3,32 +3,38 @@ title: scroll-padding-inline
 slug: Web/CSS/scroll-padding-inline
 tags:
   - CSS
-  - CSS Property
+  - CSS プロパティ
   - Reference
   - Web
+  - recipe:css-shorthand-property
   - scroll-padding-inline
   - scroll-padding-inline-end
   - scroll-padding-inline-start
+browser-compat: css.properties.scroll-padding-inline
 translation_of: Web/CSS/scroll-padding-inline
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><code>scroll-padding-inline</code> プロパティは、インライン方向の scroll-padding の個別指定を設定する一括指定プロパティです。</p>
+`scroll-padding-inline` プロパティは、インライン方向の scroll-padding の個別指定を設定する一括指定プロパティです。
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding-inline.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+scroll-padding 系のプロパティは、スクロールポートの*最適表示領域*のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。
 
-<p>scroll-padding 系のプロパティは、スクロールポートの<dfn>最適表示領域</dfn>のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+## 構成要素のプロパティ
 
-<p>{{cssinfo}}</p>
+このプロパティは以下の CSS プロパティの一括指定です。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+- [`scroll-padding-inline-end`](/ja/docs/Web/CSS/scroll-padding-inline-end)
+- [`scroll-padding-inline-start`](/ja/docs/Web/CSS/scroll-padding-inline-start)
 
-<pre class="brush: css">/* キーワード値 */
+## 構文
+
+```css
+/* キーワード値 */
 scroll-padding-inline: auto;
 
-/* &lt;length&gt; 値 */
+/* <length> 値 */
 scroll-padding-inline: 10px;
 scroll-padding-inline: 1em .5em;
 scroll-padding-inline: 10%;
@@ -36,41 +42,34 @@ scroll-padding-inline: 10%;
 /* グローバル値 */
 scroll-padding-inline: inherit;
 scroll-padding-inline: initial;
+scroll-padding-inline: revert;
 scroll-padding-inline: unset;
-</pre>
+```
+
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `<length-percentage>`
+  - : スクロールポートの対応する辺からのオフセットで、有効な長さまたはパーセント値です。
+- `auto`
+  - : オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。
 
-<dl>
- <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
- <dd>スクロールポートの対応する辺からのオフセットで、有効な長さまたはパーセント値です。</dd>
- <dt><code>auto</code></dt>
- <dd>オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<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-padding-inline", "scroll-padding-inline")}}</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-padding-inline")}}</p>
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-padding-left/index.md b/files/ja/web/css/scroll-padding-left/index.md
index 8a70079ed2..64a4c8d223 100644
--- a/files/ja/web/css/scroll-padding-left/index.md
+++ b/files/ja/web/css/scroll-padding-left/index.md
@@ -3,29 +3,27 @@ title: scroll-padding-left
 slug: Web/CSS/scroll-padding-left
 tags:
   - CSS
-  - CSS Property
   - CSS プロパティ
   - Reference
+  - recipe:css-property
   - scroll-padding
   - scroll-padding-left
+browser-compat: css.properties.scroll-padding-left
 translation_of: Web/CSS/scroll-padding-left
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><code>scroll-padding-left</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>の左のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+`scroll-padding-left` プロパティは、スクロールポートの*最適表示領域*の左のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding-left.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding-left.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+## 構文
 
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css">/* キーワード値 */
+```css
+/* キーワード値 */
 scroll-padding-left: auto;
 
-/* &lt;length&gt; 値 */
+/* <length> 値 */
 scroll-padding-left: 10px;
 scroll-padding-left: 1em;
 scroll-padding-left: 10%;
@@ -33,41 +31,34 @@ scroll-padding-left: 10%;
 /* グローバル値 */
 scroll-padding-left: inherit;
 scroll-padding-left: initial;
+scroll-padding-left: revert;
 scroll-padding-left: unset;
-</pre>
+```
+
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `<length-percentage>`
+  - : スクロールポートの左辺からの内側のオフセットで、有効な長さまたはパーセント値です。
+- `auto`
+  - : オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
 
-<dl>
- <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
- <dd>スクロールポートの左辺からの内側のオフセットで、有効な長さまたはパーセント値です。</dd>
- <dt><code>auto</code></dt>
- <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<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-padding-left", "scroll-padding-left")}}</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-padding-left")}}</p>
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-padding-right/index.md b/files/ja/web/css/scroll-padding-right/index.md
index c9d2181584..f3e310121a 100644
--- a/files/ja/web/css/scroll-padding-right/index.md
+++ b/files/ja/web/css/scroll-padding-right/index.md
@@ -5,26 +5,25 @@ tags:
   - CSS
   - Reference
   - Web
+  - recipe:css-property
   - scroll-padding
   - scroll-padding-right
+browser-compat: css.properties.scroll-padding-right
 translation_of: Web/CSS/scroll-padding-right
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><code>scroll-padding-right</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+`scroll-padding-right` プロパティは、スクロールポートの*最適表示領域*のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding-right.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding-right.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+## 構文
 
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css">/* キーワード値 */
+```css
+/* キーワード値 */
 scroll-padding-right: auto;
 
-/* &lt;length&gt; 値 */
+/* <length> 値 */
 scroll-padding-right: 10px;
 scroll-padding-right: 1em;
 scroll-padding-right: 10%;
@@ -32,41 +31,34 @@ scroll-padding-right: 10%;
 /* グローバル値 */
 scroll-padding-right: inherit;
 scroll-padding-right: initial;
+scroll-padding-right: revert;
 scroll-padding-right: unset;
-</pre>
+```
+
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `<length-percentage>`
+  - : スクロールポートの上辺からの内側のオフセットで、有効な長さまたはパーセント値です。
+- `auto`
+  - : オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
 
-<dl>
- <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
- <dd>スクロールポートの上辺からの内側のオフセットで、有効な長さまたはパーセント値です。</dd>
- <dt><code>auto</code></dt>
- <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<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-padding-right", "scroll-padding-right")}}</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-padding-right")}}</p>
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-padding-top/index.md b/files/ja/web/css/scroll-padding-top/index.md
index f352156457..4ab41db589 100644
--- a/files/ja/web/css/scroll-padding-top/index.md
+++ b/files/ja/web/css/scroll-padding-top/index.md
@@ -5,26 +5,25 @@ tags:
   - CSS
   - Reference
   - Web
+  - recipe:css-property
   - scroll-padding
   - scroll-padding-top
+browser-compat: css.properties.scroll-padding-top
 translation_of: Web/CSS/scroll-padding-top
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><code>scroll-padding-top</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+`scroll-padding-top` プロパティは、スクロールポートの*最適表示領域*のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding-top.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding-top.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+## 構文
 
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css">/* キーワード値 */
+```css
+/* キーワード値 */
 scroll-padding-top: auto;
 
-/* &lt;length&gt; 値 */
+/* <length> 値 */
 scroll-padding-top: 10px;
 scroll-padding-top: 1em;
 scroll-padding-top: 10%;
@@ -32,41 +31,34 @@ scroll-padding-top: 10%;
 /* グローバル値 */
 scroll-padding-top: inherit;
 scroll-padding-top: initial;
+scroll-padding-top: revert;
 scroll-padding-top: unset;
-</pre>
+```
+
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `{{cssxref("&lt;length-percentage&gt;")}}`
+  - : スクロールポートの上辺からの内側のオフセットで、有効な長さまたはパーセント値です。
+- `auto`
+  - : オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。
 
-<dl>
- <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
- <dd>スクロールポートの上辺からの内側のオフセットで、有効な長さまたはパーセント値です。</dd>
- <dt><code>auto</code></dt>
- <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<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-padding-top", "scroll-padding-top")}}</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-padding-top")}}</p>
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-padding/index.md b/files/ja/web/css/scroll-padding/index.md
index 5de5104bbb..f329213d95 100644
--- a/files/ja/web/css/scroll-padding/index.md
+++ b/files/ja/web/css/scroll-padding/index.md
@@ -3,38 +3,36 @@ title: scroll-padding
 slug: Web/CSS/scroll-padding
 tags:
   - CSS
-  - CSS Property
-  - 'recipe:css-shorthand-property'
+  - CSS プロパティ
+  - recipe:css-shorthand-property
   - scroll-snap
+browser-compat: css.properties.scroll-padding
 translation_of: Web/CSS/scroll-padding
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>scroll-padding</code></strong> は<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>で、要素のすべての辺にに一度にスクロールパディングを設定します。 {{cssxref("padding")}} プロパティで要素のパディングを設定するのとよく似ています。</p>
+**`scroll-padding`** は[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、要素のすべての辺にに一度にスクロールパディングを設定します。 {{cssxref("padding")}} プロパティで要素のパディングを設定するのとよく似ています。
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+`scroll-padding-*` プロパティは、スクロールポートの*最適な表示領域*のオフセットを定義します。これにより、スクロールポートの中で他のコンテンツ (固定配置されたツールバーやサイドバーなど) に隠れてしまう領域を除外したり、ターゲット要素とスクロールポートの縁の間に余裕を持たせたりすることができます。
 
-<p><code>scroll-padding-*</code> プロパティは、スクロールポートの<dfn>最適な表示領域</dfn>のオフセットを定義します。これにより、スクロールポートの中で他のコンテンツ (固定配置されたツールバーやサイドバーなど) に隠れてしまう領域を除外したり、ターゲット要素とスクロールポートの縁の間に余裕を持たせたりすることができます。</p>
+## 構成要素のプロパティ
 
-<h2 id="Constituent_properties" name="Constituent_properties">構成するプロパティ</h2>
+このプロパティは以下の CSS プロパティの一括指定です。
 
-<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+- {{CSSXref("scroll-padding-bottom")}}
+- {{CSSXref("scroll-padding-left")}}
+- {{CSSXref("scroll-padding-right")}}
+- {{CSSXref("scroll-padding-top")}}
 
-<ul>
- <li>{{cssxref("scroll-padding-bottom")}}</li>
- <li>{{cssxref("scroll-padding-left")}}</li>
- <li>{{cssxref("scroll-padding-right")}}</li>
- <li>{{cssxref("scroll-padding-top")}}</li>
-</ul>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css notranslate">/* キーワード値 */
+```css
+/* キーワード値 */
 scroll-padding: auto;
 
-/* &lt;length&gt; 値 */
+/* <length> 値 */
 scroll-padding: 10px;
 scroll-padding: 1em .5em 1em 1em;
 scroll-padding: 10%;
@@ -42,45 +40,34 @@ scroll-padding: 10%;
 /* グローバル値 */
 scroll-padding: inherit;
 scroll-padding: initial;
+scroll-padding: revert;
 scroll-padding: unset;
-</pre>
+```
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
-<dl>
- <dt>{{cssxref("&lt;length-percentage&gt;")}}</dt>
- <dd>スクロールポートの対応する縁からの内側へのオフセットを、有効な {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} として指定します。</dd>
- <dt><code>auto</code></dt>
- <dd>オフセットがユーザーエージェントによって決定されます。これは一般的には <code>0px</code> になりますが、ゼロ以外の値がより適切であれば、ユーザエージェントは自由に検出して他の値を取ることができます。</dd>
-</dl>
+- {{cssxref("&lt;length-percentage&gt;")}}
+  - : スクロールポートの対応する縁からの内側へのオフセットを、有効な {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} として指定します。
+- `auto`
+  - : オフセットがユーザーエージェントによって決定されます。これは一般的には `0px` になりますが、ゼロ以外の値がより適切であれば、ユーザエージェントは自由に検出して他の値を取ることができます。
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
 
-<p>{{CSSInfo}}</p>
+{{cssinfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<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-padding", "scroll-padding")}}</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-padding")}}</p>
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-align/index.md b/files/ja/web/css/scroll-snap-align/index.md
index 09909e000c..1b7ee93990 100644
--- a/files/ja/web/css/scroll-snap-align/index.md
+++ b/files/ja/web/css/scroll-snap-align/index.md
@@ -2,73 +2,64 @@
 title: scroll-snap-align
 slug: Web/CSS/scroll-snap-align
 tags:
-  - Advanced
+  - 上級者
   - CSS
   - Example
   - NeedsLiveSample
   - Reference
-  - 上級者
+  - recipe:css-property
+browser-compat: css.properties.scroll-snap-align
 translation_of: Web/CSS/scroll-snap-align
 ---
-<div>{{CSSRef}}</div>
-
-<p><code>scroll-snap-align</code> プロパティは、ボックスのスナップ位置を、そのスナップコンテナーの (配置コンテナーとしての) スナップポート内における (配置主体としての) スナップ領域の配置として指定します。2つの値は、それぞれブロック軸とインライン軸内のスナップ位置合わせを指定します。値が1つだけ指定された場合、2番目の値は同じ値を既定値とします。</p>
+{{CSSRef}}
 
-<p>{{cssinfo}}</p>
+`scroll-snap-align` プロパティは、ボックスのスナップ位置を、そのスナップコンテナーの (配置コンテナーとしての) スナップポート内における (配置主体としての) スナップ領域の配置として指定します。2つの値は、それぞれブロック軸とインライン軸内のスナップ位置合わせを指定します。値が1つだけ指定された場合、2番目の値は同じ値を既定値とします。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: css">/* キーワード値 */
+```css
+/* キーワード値 */
 scroll-snap-align: none;
-scroll-snap-align: start end; /* 2つの値を指定すると、1番目がブロック、2番目がインラインとなる */
+scroll-snap-align: start end; /* 2 つの値を指定すると、1 番目がブロック、2 番目がインラインとなる */
 scroll-snap-align: center;
 
 /* グローバル値 */
 scroll-snap-align: inherit;
 scroll-snap-align: initial;
+scroll-snap-align: revert;
 scroll-snap-align: unset;
-</pre>
+```
+
+### 値
+
+- `none`
+  - : このボックスでは、その軸のスナップ位置を定義しません。
+- `start`
+  - : このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の先頭位置がこの軸のスナップ位置になります。
+- `end`
+  - : このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の末尾位置がこの軸のスナップ位置になります。
+- `center`
+  - : このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の中央位置がこの軸のスナップ位置になります。
+
+Safari は現在のところ、2 つの値の構文を誤った順序で実装しており、最初の値がインラインで次の値がブロックになっています。[bug #191865](https://bugs.webkit.org/show_bug.cgi?id=191865) を参照してください。
 
-<h3 id="Values" name="Values">値</h3>
+## 公式定義
 
-<dl>
- <dt><code>none</code></dt>
- <dd>このボックスでは、その軸のスナップ位置を定義しません。</dd>
- <dt><code>start</code></dt>
- <dd>このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の先頭位置がこの軸のスナップ位置になります。</dd>
- <dt><code>end</code></dt>
- <dd>このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の末尾位置がこの軸のスナップ位置になります。</dd>
- <dt><code>center</code></dt>
- <dd>このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の中央位置がこの軸のスナップ位置になります。</dd>
-</dl>
+{{cssinfo}}
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 形式文法
 
 {{csssyntax}}
 
-<div class="blockIndicator warning">
-<p>Safari は現在のところ、値2つの構文が誤った順になっており、1番目の値がインラインで2番目の値がブロックになっています。 <a href="https://bugs.webkit.org/show_bug.cgi?id=191865">バグ #191865</a> を参照してください。</p>
-</div>
-
-<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-align", "scroll-snap-align")}}</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-align")}}</p>
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{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-stop/index.md b/files/ja/web/css/scroll-snap-stop/index.md
index b9f4d8b80b..bb974027f9 100644
--- a/files/ja/web/css/scroll-snap-stop/index.md
+++ b/files/ja/web/css/scroll-snap-stop/index.md
@@ -5,15 +5,18 @@ tags:
   - CSS
   - CSS スクロールスナップ
   - Reference
+  - Web
+  - recipe:css-property
   - scroll-snap-stop
-  - ウェブ
+browser-compat: css.properties.scroll-snap-stop
 translation_of: Web/CSS/scroll-snap-stop
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>scroll-snap-stop</code></strong> プロパティは、スクロールコンテナーが可能なスナップ位置を「通り過ぎる」ことを許可するかどうかを定義します。</p>
+**`scroll-snap-stop`** は [CSS](/ja/docs/Web/CSS) のプロパティで、スクロールコンテナーが可能なスナップ位置を「通り過ぎる」ことを許可するかどうかを定義します。
 
-<pre class="brush:css no-line-numbers">/* キーワード値 */
+```css
+/* キーワード値 */
 scroll-snap-stop: normal;
 scroll-snap-stop: always;
 
@@ -21,32 +24,35 @@ scroll-snap-stop: always;
 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>
+- `normal`
+  - : スクロールコンテナーの視覚{{Glossary("viewport", "ビューポート")}}がスクロールされた時、可能なスナップ位置を「通り過ぎる」ことを許可します。
+- `always`
+  - : スクロールコンテナーは可能なスナップ位置を「通り過ぎる」ことを許可しません。最初の要素のスナップ位置にスナップします。
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>スクロールコンテナーの視覚的な{{Glossary("viewport", "ビューポート")}}がスクロールされた時、可能なスナップ位置を「通り過ぎる」ことがあります。</dd>
- <dt><code>always</code></dt>
- <dd>スクロールコンテナーは可能なスナップ位置を「通り過ぎる」ことはありません。最初の要素のスナップ位置にスナップします。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{CSSInfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+## 例
+
+<h3 id="Snapping_in_different_axes">様々な軸でのスナップ</h3>
 
-<p>この例は {{cssxref("scroll-snap-type")}} から複製したものに多少の修正を加えたものです。</p>
+この例は {{cssxref("scroll-snap-type")}} から複製したものに多少の修正を加えたものです。
 
-<h3 id="CSS">CSS</h3>
+#### CSS
 
-<pre class="brush: css">/* setup */
+```css
+/* setup */
 :root, body {
   height: 100%;
   display: flex;
@@ -74,10 +80,10 @@ scroll-snap-type: unset;
   flex-flow: column nowrap;
 }
 /* definite scroll snap */
-.mandatory-scroll-snapping {
+.mandatory-scroll-snapping > div {
   scroll-snap-stop: always;
 }
-.proximity-scroll-snapping {
+.proximity-scroll-snapping > div {
   scroll-snap-stop: normal;
 }
 /* scroll-snap */
@@ -97,128 +103,121 @@ scroll-snap-type: unset;
   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: 256px;
 }
 /* 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>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&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 Proximity 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 Mandatory 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 Proximity 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;
-</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-stop", "scroll-snap-stop")}}</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-stop")}}</p>
+```
+
+#### HTML
+
+```html
+<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 Proximity 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 Mandatory 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 Proximity 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>
+```
+
+#### 結果
+
+{{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/)
author	Masahiro FUJIMOTO <mfujimot@gmail.com>	2021-10-12 01:31:31 +0900
committer	Masahiro FUJIMOTO <mfujimot@gmail.com>	2021-10-19 15:26:24 +0900
commit	94e8f8c474d5a10be866af1bc2eb0dd515a7228f (patch)
tree	dd3b85d74f3a6c1b39da0996d538c861acd5826e
parent	f29c1e5bbfb2590b04267bf88b5becf20af18bc5 (diff)
download	translated-content-94e8f8c474d5a10be866af1bc2eb0dd515a7228f.tar.gz translated-content-94e8f8c474d5a10be866af1bc2eb0dd515a7228f.tar.bz2 translated-content-94e8f8c474d5a10be866af1bc2eb0dd515a7228f.zip