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

- scroll-margin-block-end および scroll-margin-block-start は新規翻訳
- 「CSS スクロールスナップの基本概念」は新規翻訳
- それ以外は 2021/10/09 時点の英語版に同期

3 files changed, 136 insertions, 78 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)を参照してください。