From c37331cf01367b94bdbcedc92abf516b34809c5c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 10 Oct 2021 23:16:11 +0900 Subject: CSS スクロールスナップ点関係の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/09 時点の英語版に基づき更新 --- files/ja/web/css/css_scroll_snap_points/index.md | 61 ++--- files/ja/web/css/scroll-snap-coordinate/index.md | 180 +++++++------- files/ja/web/css/scroll-snap-destination/index.md | 162 ++++++------- files/ja/web/css/scroll-snap-points-x/index.md | 107 +++++++++ files/ja/web/css/scroll-snap-points-y/index.md | 107 +++++++++ files/ja/web/css/scroll-snap-type/index.md | 279 +++++++++++----------- 6 files changed, 541 insertions(+), 355 deletions(-) create mode 100644 files/ja/web/css/scroll-snap-points-x/index.md create mode 100644 files/ja/web/css/scroll-snap-points-y/index.md (limited to 'files/ja/web') diff --git a/files/ja/web/css/css_scroll_snap_points/index.md b/files/ja/web/css/css_scroll_snap_points/index.md index 5b6996036e..5bdae2fa62 100644 --- a/files/ja/web/css/css_scroll_snap_points/index.md +++ b/files/ja/web/css/css_scroll_snap_points/index.md @@ -3,57 +3,30 @@ title: CSS スクロールスナップ点 slug: Web/CSS/CSS_Scroll_Snap_Points tags: - CSS - - CSS スクロールスナップ点 - - Overview - - Reference + - CSS スクロールスナップ + - ガイド - 概要 + - Reference translation_of: Web/CSS/CSS_Scroll_Snap_Points --- -
{{CSSRef}} {{deprecated_header}}
- -

CSS スクロールスナップ点 (CSS Scroll Snap Points) は CSS のモジュールの一つで、スクロールのスナップ位置を導入します。これは、スクロールの実行が終了した後にコンテナーのスクロール領域が停止する位置を明示的に決定します。

- -
-

メモ: CSS スクロールスナップがこの機能を定義する最新の仕様書です。

-
- -

リファレンス

+{{CSSRef}} {{deprecated_header}} -

CSS プロパティ

+**CSS スクロールスナップ点** (CSS Scroll Snap Points) は CSS のモジュールの一つで、スクロールのスナップ位置を導入します。これは、スクロールの実行が終了した後にコンテナーのスクロール領域が停止する位置を明示的に決定します。 -
- -
+> **Note:** [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap)がこの機能を定義する最新の仕様書です。 -

仕様書

+## リファレンス - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-points-y", "scroll-snap-points-y")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
+### CSS プロパティ -

ブラウザーの対応

+- {{cssxref("scroll-snap-coordinate")}} +- {{cssxref("scroll-snap-destination")}} +- {{cssxref("scroll-snap-points-x")}} +- {{cssxref("scroll-snap-points-y")}} +- {{cssxref("scroll-snap-type")}} -

scroll-snap-coordinate プロパティ

+## 仕様書 -
-

{{Compat("css.properties.scroll-snap-coordinate")}}

-
+| 仕様書 | 状態 | 備考 | +| ----------------------------------------------------------------------------------------------- | ----------------------------------- | -------- | +| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-points-y", "scroll-snap-points-y")}} | {{Spec2("CSS Scroll Snap Points")}} | 初回定義 | diff --git a/files/ja/web/css/scroll-snap-coordinate/index.md b/files/ja/web/css/scroll-snap-coordinate/index.md index 1a9e185a3b..6e7f09e553 100644 --- a/files/ja/web/css/scroll-snap-coordinate/index.md +++ b/files/ja/web/css/scroll-snap-coordinate/index.md @@ -3,89 +3,96 @@ title: scroll-snap-coordinate slug: Web/CSS/scroll-snap-coordinate tags: - CSS - - CSS スクロールスナップ - CSS プロパティ - - Deprecated + - CSS スクロールスナップ + - 非推奨 - Reference - - scroll-snap-coordinate + - recipe:css-property +browser-compat: css.properties.scroll-snap-coordinate translation_of: Web/CSS/scroll-snap-coordinate --- -
{{CSSRef}}{{deprecated_header}}
+{{CSSRef}}{{deprecated_header}} -

CSS の scroll-snap-coordinate プロパティは、このプロパティは、最も近い祖先のスクロールコンテナーの {{cssxref("scroll-snap-destination")}} に配置される要素内の X 座標と Y 座標の位置をそれぞれの軸で定義します。

+**`scroll-snap-coordinate`** は [CSS](/ja/docs/Web/CSS)のプロパティで、このプロパティは、最も近い祖先のスクロールコンテナーの {{cssxref("scroll-snap-destination")}} に配置される要素内の X 座標と Y 座標の位置をそれぞれの軸で定義します。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 scroll-snap-coordinate: none;
 
-/* <position> 値 */
+/*  値 */
 scroll-snap-coordinate: 50px 50px;                   /* 単一の座標 */
 scroll-snap-coordinate: 100px 100px, 100px bottom;   /* 複数の座標 */
 
 /* グローバル値 */
 scroll-snap-coordinate: inherit;
 scroll-snap-coordinate: initial;
-scroll-snap-coordinate: unset;
+scroll-snap-coordinate: unset; +``` + +要素が変換されていた場合は、スナップ座標はそのように変換されるので、スナップ点の配置は要素が表示された時に行われます。 -

要素が変形されていた場合は、スナップ座標はそのように変換されるので、スナップ点の配置は要素が表示された時に行われます。

+## 構文 -
{{cssinfo}}
+### 値 -

構文

+- `none` + - : 要素がスナップ点を提供しないことを示します。 +- {{cssxref("<position>")}} + - : スナップ座標を要素の境界ボックスの開始側の辺からのオフセットで示します。それぞれの組は、最初の値がスナップ座標の X 座標で、二番目の値は Y 座標です。 -

値

+## 公式定義 -
-
none
-
要素がスナップ点を提供しないことを示します。
-
{{cssxref("<position>")}}
-
スナップ座標を要素の境界ボックスの開始側の辺からのオフセットで示します。それぞれの組は、最初の値がスナップ座標の X 座標で、二番目の値は Y 座標です。
-
+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

- -

HTML

- -
<div id="container">
-  <div>
-    <p>At coordinate (0, 0)</p>
-    <div class="scrollContainer coordinate0">
-      <div>1</div>
-      <div>2</div>
-      <div>3</div>
-    </div>
-  </div>
-
-  <div>
-    <p>At coordinate (25, 0)</p>
-    <div class="scrollContainer coordinate25">
-      <div>1</div>
-      <div>2</div>
-      <div>3</div>
-    </div>
-  </div>
-
-  <div>
-    <p>At coordinate (50, 0)</p>
-    <div class="scrollContainer coordinate50">
-      <div>1</div>
-      <div>2</div>
-      <div>3</div>
-    </div>
-  </div>
-</div>
-
- -

CSS

- -
#container {
+## 例
+
+
スクロールスナップ座標の設定

+
+#### HTML
+
+```html
+

+  

+    
At coordinate (0, 0)

+    

+      
1

+      
2

+      
3

+    

+  

+
+  

+    
At coordinate (25, 0)

+    

+      
1

+      
2

+      
3

+    

+  

+
+  

+    
At coordinate (50, 0)

+    

+      
1

+      
2

+      
3

+    

+  

+

+```
+
+#### CSS
+
+```css
+#container {
   display: flex;
 }
 
-#container > div:nth-child(-n+2) {
+#container > div:nth-child(-n+2) {
   margin-right: 20px;
 }
 
@@ -97,7 +104,7 @@ scroll-snap-coordinate: unset;
font-size: 0; } -.scrollContainer > div { +.scrollContainer > div { width: 100px; height: 100px; display: inline-block; @@ -106,49 +113,40 @@ scroll-snap-coordinate: unset; font-size: 50px; } -.coordinate0 > div { +.coordinate0 > div { scroll-snap-coordinate: 0 0; } -.coordinate25 > div { +.coordinate25 > div { scroll-snap-coordinate: 25px 0; } -.coordinate50 > div { +.coordinate50 > div { scroll-snap-coordinate: 50px 0; } -.scrollContainer > div:nth-child(even) { +.scrollContainer > div:nth-child(even) { background-color: #87ea87; } -.scrollContainer > div:nth-child(odd) { +.scrollContainer > div:nth-child(odd) { background-color: #87ccea; -} - -

Result

- -

{{EmbedLiveSample("Example", "100%", "170")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-coordinate", "scroll-snap-coordinate")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.properties.scroll-snap-coordinate")}}

+} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_scroll_snap_coordinates", "100%", "170")}} + +## 仕様書 + +どの標準にも含まれていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-snap-destination/index.md b/files/ja/web/css/scroll-snap-destination/index.md index 98b8ccb23f..6bb7353adf 100644 --- a/files/ja/web/css/scroll-snap-destination/index.md +++ b/files/ja/web/css/scroll-snap-destination/index.md @@ -3,81 +3,88 @@ title: scroll-snap-destination slug: Web/CSS/scroll-snap-destination tags: - CSS - - CSS スクロールスナップ - CSS プロパティ - - Deprecated + - CSS スクロールスナップ + - 非推奨 - Reference + - recipe:css-property +browser-compat: css.properties.scroll-snap-destination translation_of: Web/CSS/scroll-snap-destination --- -
{{CSSRef}}{{deprecated_header}}
+{{CSSRef}}{{deprecated_header}} -

CSS の scroll-snap-destination プロパティは、スクロールコンテナーの視覚的な{{Glossary("viewport", "ビューポート")}}内の要素のスナップポイントが配置される X および Y 座標の位置を定義します。

+**`scroll-snap-destination`** は [CSS](/ja/docs/Web/CSS) のプロパティで、スクロールコンテナーの視覚{{Glossary("viewport", "ビューポート")}}内の要素のスナップ点が配置される X および Y 座標の位置を定義します。 -
/* <position> 値 */
+```css
+/*  値 */
 scroll-snap-destination: 400px 600px;
 
 /* グローバル値 */
 scroll-snap-destination: inherit;
 scroll-snap-destination: initial;
 scroll-snap-destination: unset;
-
+``` + +## 構文 -

{{cssinfo}}

+### 値 -

構文

+- `` + - : スクロールコンテナーの視覚ビューポートの先頭側の端からのスナップ距離のオフセットを指定します。最初の値はスナップ距離の X 座標、二番目の値は Y 座標です。 -

値

+## 公式定義 -
-
<position>
-
スクロールコンテナーの視覚的なビューポートの先頭側の端からのスナップ距離のオフセットを指定します。最初の値はスナップ距離の X 座標、二番目の値は Y 座標です。
-
+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

- -

HTML

- -
<div id="container">
-  <div>
-    <p>At coordinate (0, 0)</p>
-    <div class="scrollContainer destination0">
-      <div>1</div>
-      <div>2</div>
-      <div>3</div>
-    </div>
-  </div>
-
-  <div>
-    <p>At coordinate (25, 0)</p>
-    <div class="scrollContainer destination25">
-      <div>1</div>
-      <div>2</div>
-      <div>3</div>
-    </div>
-  </div>
-
-  <div>
-    <p>At coordinate (50, 0)</p>
-    <div class="scrollContainer destination50">
-      <div>1</div>
-      <div>2</div>
-      <div>3</div>
-    </div>
-  </div>
-</div>
-
- -

CSS

- -
#container {
+## 例
+
+
スクロールスナップの宛先を設定

+
+#### HTML
+
+```html
+

+  

+    
At coordinate (0, 0)

+    

+      
1

+      
2

+      
3

+    

+  

+
+  

+    
At coordinate (25, 0)

+    

+      
1

+      
2

+      
3

+    

+  

+
+  

+    
At coordinate (50, 0)

+    

+      
1

+      
2

+      
3

+    

+  

+

+```
+
+#### CSS
+
+```css
+#container {
   display: flex;
 }
 
-#container > div:nth-child(-n+2) {
+#container > div:nth-child(-n+2) {
   margin-right: 20px;
 }
 
@@ -103,7 +110,7 @@ scroll-snap-destination: unset;
   scroll-snap-destination: 50px 0;
 }
 
-.scrollContainer > div {
+.scrollContainer > div {
   width: 100px;
   height: 100px;
   display: inline-block;
@@ -112,35 +119,28 @@ scroll-snap-destination: unset;
   font-size: 50px;
 }
 
-.scrollContainer > div:nth-child(even) {
+.scrollContainer > div:nth-child(even) {
   background-color: #87EA87;
 }
 
-.scrollContainer > div:nth-child(odd) {
+.scrollContainer > div:nth-child(odd) {
   background-color: #87CCEA;
-}
- -
{{EmbedLiveSample("Example", "100%", "170")}}
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-destination", "scroll-snap-destination")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの対応

- -
{{Compat("css.properties.scroll-snap-destination")}}
+} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_scroll_snap_destination", "100%", "170")}} + +## 仕様書 + +どの標準にも含まれていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-snap-points-x/index.md b/files/ja/web/css/scroll-snap-points-x/index.md new file mode 100644 index 0000000000..debd568733 --- /dev/null +++ b/files/ja/web/css/scroll-snap-points-x/index.md @@ -0,0 +1,107 @@ +--- +title: scroll-snap-points-x +slug: Web/CSS/scroll-snap-points-x +tags: + - CSS + - CSS プロパティ + - CSS スクロールスナップ + - 非推奨 + - Reference + - recipe:css-property +browser-compat: css.properties.scroll-snap-points-x +translation_of: Web/CSS/scroll-snap-points-x +--- +{{CSSRef}}{{deprecated_header}} + +**`scroll-snap-points-x`** は [CSS](/ja/docs/Web/CSS) のプロパティで、適用先のスクロールコンテナーの内容物におけるスナップ点の水平位置を定義します。 + +```css +/* キーワード値 */ +scroll-snap-points-x: none; + +/* 反復スナップ点 */ +scroll-snap-points-x: repeat(400px); + +/* グローバル値 */ +scroll-snap-points-x: inherit; +scroll-snap-points-x: initial; +scroll-snap-points-x: unset; +``` + +## 構文 + +### 値 + +- `none` + - : スクロールコンテナーはスナップ点を定義しません。スクロールコンテナー内の要素は、スクロールコンテナーに代わってスナップ点を定義することができます。 +- `repeat()` + - : スナップ点を定義するための間隔を、コンテナーの関連する先頭の橋から定義します。正の長さのみが許可されます。パーセント値はコンテナーの幅を示します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +

水平スクロールスナップ点の設定

+ +#### HTML + +```html +
+ 
1
+ 
2
+ 
3
+
+``` + +#### CSS + +```css +#container { +  width: 200px; +  overflow: auto; +  white-space: nowrap; +  scroll-snap-points-x: repeat(100%); +  scroll-snap-type: mandatory; +  font-size: 0; +} + +#container > div { + width: 200px; + height: 200px; + display: inline-block; + line-height: 200px; + text-align: center; + font-size: 100px; +} + +#container > div:nth-child(even) { + background-color: #87ea87; +} + +#container > div:nth-child(odd) { + background-color: #87ccea; +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_horizontal_scroll_snap_points", 220, 220)}} + +## 仕様書 + +どの標準にも含まれていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-snap-points-y/index.md b/files/ja/web/css/scroll-snap-points-y/index.md new file mode 100644 index 0000000000..6c11289051 --- /dev/null +++ b/files/ja/web/css/scroll-snap-points-y/index.md @@ -0,0 +1,107 @@ +--- +title: scroll-snap-points-y +slug: Web/CSS/scroll-snap-points-y +tags: + - CSS + - CSS プロパティ + - CSS スクロールスナップ + - 非推奨 + - Reference + - recipe:css-property +browser-compat: css.properties.scroll-snap-points-y +translation_of: Web/CSS/scroll-snap-points-y +--- +{{CSSRef}}{{deprecated_header}} + +**`scroll-snap-points-y`** は [CSS](/ja/docs/Web/CSS) のプロパティで、適用先のスクロールコンテナーの内容物におけるスナップ点の垂直位置を定義します。 + +```css +/* キーワード値 */ +scroll-snap-points-y: none; + +/* 反復スナップ点 */ +scroll-snap-points-y: repeat(400px); + +/* グローバル値 */ +scroll-snap-points-y: inherit; +scroll-snap-points-y: initial; +scroll-snap-points-y: unset; +``` + +## 構文 + +### 値 + +- `none` + - : スクロールコンテナーはスナップ点を定義しません。スクロールコンテナー内の要素は、スクロールコンテナーに代わってスナップ点を定義することができます。 +- `repeat()` + - : スナップ点を定義するための間隔を、コンテナーの関連する先頭の橋から定義します。正の長さのみが許可されます。パーセント値はコンテナーの幅を示します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +

垂直スクロールスナップ点の設定

+ +#### HTML + +```html +
+ 
1
+ 
2
+ 
3
+
+``` + +#### CSS + +```css +#container { +  width: 200px; +  overflow: auto; +  white-space: nowrap; +  scroll-snap-points-x: repeat(100%); +  scroll-snap-type: mandatory; +  font-size: 0; +} + +#container > div { + width: 200px; + height: 200px; + display: inline-block; + line-height: 200px; + text-align: center; + font-size: 100px; +} + +#container > div:nth-child(even) { + background-color: #87ea87; +} + +#container > div:nth-child(odd) { + background-color: #87ccea; +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_vertical_scroll_snap_points", 220, 220)}} + +## 仕様書 + +どの標準にも含まれていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-snap-type/index.md b/files/ja/web/css/scroll-snap-type/index.md index b80fe7bda1..e57550e90c 100644 --- a/files/ja/web/css/scroll-snap-type/index.md +++ b/files/ja/web/css/scroll-snap-type/index.md @@ -3,18 +3,23 @@ title: scroll-snap-type slug: Web/CSS/scroll-snap-type tags: - CSS - - CSS スクロールスナップ - CSS プロパティ + - CSS スクロールスナップ - Reference + - recipe:css-property +browser-compat: css.properties.scroll-snap-type translation_of: Web/CSS/scroll-snap-type --- -
{{CSSRef}}
+{{CSSRef}} + +**`scroll-snap-type`** は [CSS](/ja/docs/Web/CSS) のプロパティで、スナップ点が存在する場合にスクロールコンテナーにどれだけ厳密にスナップ点を強制するかを設定します。 -

scroll-snap-type は CSS のプロパティで、スナップ点が存在する場合にスクロールコンテナーにどれだけ厳密にスナップ点を強制するかを設定します。

+{{EmbedInteractiveExample("pages/css/scroll-snap-type.html")}} -

スナップ点へ強制するために使用する詳細なアニメーションや力学の指定はこのプロパティでは扱わず、代わりにユーザーエージェントに委ねられます。

+スナップ点へ強制するために使用する詳細なアニメーションや力学の指定はこのプロパティでは扱わず、ユーザーエージェントに委ねられます。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 scroll-snap-type: none;
 scroll-snap-type: x;
 scroll-snap-type: y;
@@ -33,111 +38,115 @@ scroll-snap-type: both mandatory;
 scroll-snap-type: inherit;
 scroll-snap-type: initial;
 scroll-snap-type: unset;
-
- -

{{cssinfo}}

- -

構文

- -

値

- -
-
none
-
このスクロールコンテナーの視覚的な{{Glossary("viewport", "ビューポート")}}がスクロールする時は、スナップ点を無視しなければなりません。
-
x
-
スクロールコンテナーは水平軸のみで、スナップ位置に合わせられます。
-
y
-
スクロールコンテナーは垂直軸のみで、スナップ位置に合わせられます。
-
block
-
スクロールコンテナーはブロック軸のみで、スナップ位置に合わせられます。
-
inline
-
スクロールコンテナーはインライン軸のみで、スナップ位置に合わせられます。
-
both
-
スクロールコンテナーは両方の軸で、個別にスナップ位置に合わせられます (それぞれの軸で異なる要素に位置が合わせられる可能性があります)。
-
mandatory
-
このスクロールコンテナーの視覚的なビューポートは、現在スクロール中でなければスナップ点に合わせられます。これはスクロールアクションが終了した際に、可能であればその点にはまるということを意味しています。内容が追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されます。
-
proximity
-
このスクロールコンテナーの視覚的なビューポートは、現在スクロール中でなければ、ユーザーエージェントのスクロール引数を考慮しつつスナップ点に載るよう動作する可能性があります。コンテンツが追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されることがあります。
-
- -

形式文法

+``` + +## 構文 + +### 値 + +- `none` + - : このスクロールコンテナーの視覚{{Glossary("viewport", "ビューポート")}}がスクロールする時は、スナップ点を無視しなければなりません。 +- `x` + - : スクロールコンテナーは水平軸のみで、スナップ位置に合わせられます。 +- `y` + - : スクロールコンテナーは垂直軸のみで、スナップ位置に合わせられます。 +- `block` + - : スクロールコンテナーはブロック軸のみで、スナップ位置に合わせられます。 +- `inline` + - : スクロールコンテナーはインライン軸のみで、スナップ位置に合わせられます。 +- `both` + - : スクロールコンテナーは両方の軸で、個別にスナップ位置に合わせられます (それぞれの軸で異なる要素に位置が合わせられる可能性があります)。 +- `mandatory` + - : このスクロールコンテナーの視覚ビューポートは、現在スクロール中でなければスナップ点に合わせられます。これはスクロールアクションが終了した際に、可能であればその点にはまるということを意味しています。内容が追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されます。 +- `proximity` + - : このスクロールコンテナーの視覚ビューポートは、現在スクロール中でなければ、ユーザーエージェントのスクロール引数を考慮しつつスナップ点に載るよう動作する可能性があります。コンテンツが追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されることがあります。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -

例

- -

HTML コンテンツ

- -
<div class="holster">
-<div class="container x mandatory-scroll-snapping" dir="ltr">
-  <div>X Mand. LTR</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container x proximity-scroll-snapping" dir="ltr">
-  <div>X Prox. LTR</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container y mandatory-scroll-snapping" dir="ltr">
-  <div>Y Mand. LTR</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container y proximity-scroll-snapping" dir="ltr">
-  <div>Y Prox. LTR</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container x mandatory-scroll-snapping" dir="rtl">
-  <div>X Mand. RTL</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container x proximity-scroll-snapping" dir="rtl">
-  <div>X Prox. RTL</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container y mandatory-scroll-snapping" dir="rtl">
-  <div>Y Mand. RTL</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-
-<div class="container y proximity-scroll-snapping" dir="rtl">
-  <div>Y Prox. RTL</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-</div>
-</div>
-
- -

CSS コンテンツ

- -
/* setup */
+## 例
+
+
様々な軸にスナップ

+
+#### HTML
+
+```html
+

+

+  
X Mand. LTR

+  
2

+  
3

+  
4

+  
5

+

+
+

+  
X Prox. LTR

+  
2

+  
3

+  
4

+  
5

+

+
+

+  
Y Mand. LTR

+  
2

+  
3

+  
4

+  
5

+

+
+

+  
Y Prox. LTR

+  
2

+  
3

+  
4

+  
5

+

+
+

+  
X Mand. RTL

+  
2

+  
3

+  
4

+  
5

+

+
+

+  
X Prox. RTL

+  
2

+  
3

+  
4

+  
5

+

+
+

+  
Y Mand. RTL

+  
2

+  
3

+  
4

+  
5

+

+
+

+  
Y Prox. RTL

+  
2

+  
3

+  
4

+  
5

+

+

+```
+
+#### CSS
+
+```css
+/* setup */
 html, body, .holster {
   height: 100%;
 }
@@ -184,61 +193,53 @@ html, body, .holster {
   scroll-snap-type: y proximity;
 }
 
-.container > div {
+.container > div {
   text-align: center;
   scroll-snap-align: center;
   flex: none;
 }
 
-.x.container > div {
+.x.container > div {
   line-height: 128px;
   font-size: 64px;
   width: 100%;
   height: 128px;
 }
 
-.y.container > div {
+.y.container > div {
   line-height: 256px;
   font-size: 128px;
   width: 256px;
   height: 100%;
 }
 /* appearance fixes */
-.y.container > div:first-child {
+.y.container > div:first-child {
   line-height: 1.3;
   font-size: 64px;
 }
 /* coloration */
-.container > div:nth-child(even) {
+.container > div:nth-child(even) {
   background-color: #87EA87;
 }
 
-.container > div:nth-child(odd) {
+.container > div:nth-child(odd) {
   background-color: #87CCEA;
 }
-
- -

{{EmbedLiveSample("Example", "100%", "1630")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-type", "scroll-snap-type")}}{{Spec2("CSS Scroll Snap Points")}}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.properties.scroll-snap-type")}}

+``` + +#### 結果 + +{{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/) -- cgit v1.2.3-54-g00ecf