diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 8817549459233a..87322024357699 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -19826,14 +19826,6 @@ "modified": "2020-10-15T22:29:36.376Z", "contributors": ["mfuji09"] }, - "Web/CSS/scroll-snap-coordinate": { - "modified": "2020-10-15T22:12:59.561Z", - "contributors": ["mfuji09"] - }, - "Web/CSS/scroll-snap-destination": { - "modified": "2020-10-15T22:13:25.242Z", - "contributors": ["mfuji09"] - }, "Web/CSS/scroll-snap-stop": { "modified": "2020-10-15T22:12:57.197Z", "contributors": ["mfuji09"] diff --git a/files/ja/web/css/scroll-snap-coordinate/index.md b/files/ja/web/css/scroll-snap-coordinate/index.md deleted file mode 100644 index 5c32d7476e9fb2..00000000000000 --- a/files/ja/web/css/scroll-snap-coordinate/index.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: scroll-snap-coordinate -slug: Web/CSS/scroll-snap-coordinate ---- - -{{CSSRef}}{{deprecated_header}} - -**`scroll-snap-coordinate`** は [CSS](/ja/docs/Web/CSS)のプロパティで、このプロパティは、最も近い祖先のスクロールコンテナーの {{cssxref("scroll-snap-destination")}} に配置される要素内の X 座標と Y 座標の位置をそれぞれの軸で定義します。 - -```css -/* キーワード値 */ -scroll-snap-coordinate: none; - -/* 値 */ -scroll-snap-coordinate: 50px 50px; /* 単一の座標 */ -scroll-snap-coordinate: 100px 100px, 100px bottom; /* 複数の座標 */ - -/* グローバル値 */ -scroll-snap-coordinate: inherit; -scroll-snap-coordinate: initial; -scroll-snap-coordinate: unset; -``` - -要素が変換されていた場合は、スナップ座標はそのように変換されるので、スナップ点の配置は要素が表示された時に行われます。 - -## 構文 - -### 値 - -- `none` - - : 要素がスナップ点を提供しないことを示します。 -- {{cssxref("<position>")}} - - : スナップ座標を要素の境界ボックスの開始側の辺からのオフセットで示します。それぞれの組は、最初の値がスナップ座標の X 座標で、二番目の値は Y 座標です。 - -## 公式定義 - -{{cssinfo}} - -## 形式文法 - -{{csssyntax}} - -## 例 - -

スクロールスナップ座標の設定

- -#### 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) { - margin-right: 20px; -} - -.scrollContainer { - width: 100px; - overflow: auto; - white-space: nowrap; - scroll-snap-type: mandatory; - font-size: 0; -} - -.scrollContainer > div { - width: 100px; - height: 100px; - display: inline-block; - line-height: 100px; - text-align: center; - font-size: 50px; -} - -.coordinate0 > div { - scroll-snap-coordinate: 0 0; -} - -.coordinate25 > div { - scroll-snap-coordinate: 25px 0; -} - -.coordinate50 > div { - scroll-snap-coordinate: 50px 0; -} - -.scrollContainer > div:nth-child(even) { - background-color: #87ea87; -} - -.scrollContainer > div:nth-child(odd) { - background-color: #87ccea; -} -``` - -#### 結果 - -{{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 deleted file mode 100644 index f17156a35b2b0c..00000000000000 --- a/files/ja/web/css/scroll-snap-destination/index.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: scroll-snap-destination -slug: Web/CSS/scroll-snap-destination ---- - -{{CSSRef}}{{deprecated_header}} - -**`scroll-snap-destination`** は [CSS](/ja/docs/Web/CSS) のプロパティで、スクロールコンテナーの視覚{{Glossary("viewport", "ビューポート")}}内の要素のスナップ点が配置される X および Y 座標の位置を定義します。 - -```css -/* 値 */ -scroll-snap-destination: 400px 600px; - -/* グローバル値 */ -scroll-snap-destination: inherit; -scroll-snap-destination: initial; -scroll-snap-destination: unset; -``` - -## 構文 - -### 値 - -- `` - - : スクロールコンテナーの視覚ビューポートの先頭側の端からのスナップ距離のオフセットを指定します。最初の値はスナップ距離の X 座標、二番目の値は Y 座標です。 - -## 公式定義 - -{{cssinfo}} - -## 形式文法 - -{{csssyntax}} - -## 例 - -

スクロールスナップの宛先を設定

- -#### 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) { - margin-right: 20px; -} - -.scrollContainer { - width: 100px; - overflow: auto; - white-space: nowrap; - scroll-snap-points-x: repeat(100%); - scroll-snap-type: mandatory; - scroll-snap-destination: 20px 0; - font-size: 0; -} - -.destination0 { - scroll-snap-destination: 0 0; -} - -.destination25 { - scroll-snap-destination: 25px 0; -} - -.destination50 { - scroll-snap-destination: 50px 0; -} - -.scrollContainer > div { - width: 100px; - height: 100px; - display: inline-block; - line-height: 100px; - text-align: center; - font-size: 50px; -} - -.scrollContainer > div:nth-child(even) { - background-color: #87EA87; -} - -.scrollContainer > div:nth-child(odd) { - background-color: #87CCEA; -} -``` - -#### 結果 - -{{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 deleted file mode 100644 index b3af48fe374c9a..00000000000000 --- a/files/ja/web/css/scroll-snap-points-x/index.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: scroll-snap-points-x -slug: 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 deleted file mode 100644 index 0f9ea49111d298..00000000000000 --- a/files/ja/web/css/scroll-snap-points-y/index.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: scroll-snap-points-y -slug: 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-x/index.md b/files/ja/web/css/scroll-snap-type-x/index.md deleted file mode 100644 index a60f14c7536293..00000000000000 --- a/files/ja/web/css/scroll-snap-type-x/index.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: scroll-snap-type-x -slug: Web/CSS/scroll-snap-type-x ---- - -{{CSSRef}}{{deprecated_header}} - -**`scroll-snap-type-x`** は [CSS](/ja/docs/Web/CSS) のプロパティで、スクロールコンテナーの水平軸にスナップ点がある場合に、どの程度厳密に実行されるかを定義します。 - -これらのスナップ点を強制するために使用される正確なアニメーションや物理学の指定は、このプロパティでは扱っておらず、ユーザーエージェントに任されています。 - -```css -/* キーワード値 */ -scroll-snap-type-x: none; -scroll-snap-type-x: mandatory; -scroll-snap-type-x: proximity; - -/* グローバル値 */ -scroll-snap-type-x: inherit; -scroll-snap-type-x: initial; -scroll-snap-type-x: unset; -``` - -## 構文 - -### 値 - -- `none` - - : このスクロールコンテナーの視覚的{{Glossary("viewport", "ビューポート")}}が水平方向にスクロールされるとき、スナップ点を無視しなければならない。 -- `mandatory` - - : このスクロールコンテナーの視覚的ビューポートは、現在水平方向にスクロールされていない場合、スナップ点で静止します。つまり、可能であれば、スクロール動作が終了した時点でその点にスナップします。コンテンツが追加、移動、削除、サイズ変更された場合、スクロールオフセットは、そのスナップ点での静止状態を維持するように調整されます。 -- `proximity` - - : このスクロールコンテナーの視覚的ビューポートは、ユーザーエージェントのスクロール引数を考慮して、現在水平方向にスクロールされていない場合、スナップ点に静止することができる。コンテンツが追加、移動、削除、サイズ変更された場合、スクロールオフセットは、そのスナップ点での静止を維持するために調整されるかもしれません。 - -## 公式定義 - -{{CSSInfo}} - -## 形式文法 - -{{CSSSyntax}} - -## 仕様書 - -どの標準にも含まれていません。 - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [`scroll-snap-type-y`](/ja/docs/Web/CSS/scroll-snap-type-y) -- [`scroll-snap-type`](/ja/docs/Web/CSS/scroll-snap-type) diff --git a/files/ja/web/css/scroll-snap-type-y/index.md b/files/ja/web/css/scroll-snap-type-y/index.md deleted file mode 100644 index 53b00d475bbb6c..00000000000000 --- a/files/ja/web/css/scroll-snap-type-y/index.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: scroll-snap-type-y -slug: Web/CSS/scroll-snap-type-y ---- - -{{CSSRef}}{{deprecated_header}} - -**`scroll-snap-type-y`** は [CSS](/ja/docs/Web/CSS) のプロパティで、スクロールコンテナーの垂直軸にスナップ点がある場合に、どの程度厳密に実行されるかを定義します。 - -これらのスナップ点を強制するために使用される正確なアニメーションや物理学の指定は、このプロパティでは扱っておらず、ユーザーエージェントに任されています。 - -```css -/* キーワード値 */ -scroll-snap-type-y: none; -scroll-snap-type-y: mandatory; -scroll-snap-type-y: proximity; - -/* グローバル値 */ -scroll-snap-type-y: inherit; -scroll-snap-type-y: initial; -scroll-snap-type-y: unset; -``` - -## 構文 - -### 値 - -- `none` - - : このスクロールコンテナーの視覚的{{Glossary("viewport", "ビューポート")}}が垂直方向にスクロールされるとき、スナップ点を無視しなければならない。 -- `mandatory` - - : このスクロールコンテナーの視覚的ビューポートは、現在垂直方向にスクロールされていない場合、スナップ点で静止します。つまり、可能であれば、スクロール動作が終了した時点でその点にスナップします。コンテンツが追加、移動、削除、サイズ変更された場合、スクロールオフセットは、そのスナップ点での静止状態を維持するように調整されます。 -- `proximity` - - : このスクロールコンテナーの視覚的ビューポートは、ユーザーエージェントのスクロール引数を考慮して、現在垂直方向にスクロールされていない場合、スナップ点に静止することができる。コンテンツが追加、移動、削除、サイズ変更された場合、スクロールオフセットは、そのスナップ点での静止を維持するために調整されるかもしれません。 - -## 公式定義 - -{{CSSInfo}} - -## 形式文法 - -{{CSSSyntax}} - -## 仕様書 - -どの標準にも含まれていません。 - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [`scroll-snap-type-x`](/ja/docs/Web/CSS/scroll-snap-type-x) -- [`scroll-snap-type`](/ja/docs/Web/CSS/scroll-snap-type)