diff options
Diffstat (limited to 'files/ja/web/css/scroll-snap-destination/index.md')
| -rw-r--r-- | files/ja/web/css/scroll-snap-destination/index.md | 162 |
1 files changed, 81 insertions, 81 deletions
diff --git a/files/ja/web/css/scroll-snap-destination/index.md b/files/ja/web/css/scroll-snap-destination/index.md index 98b8ccb23f..6bb7353adf 100644 --- a/files/ja/web/css/scroll-snap-destination/index.md +++ b/files/ja/web/css/scroll-snap-destination/index.md @@ -3,81 +3,88 @@ title: scroll-snap-destination slug: Web/CSS/scroll-snap-destination tags: - CSS - - CSS スクロールスナップ - CSS プロパティ - - Deprecated + - CSS スクロールスナップ + - 非推奨 - Reference + - recipe:css-property +browser-compat: css.properties.scroll-snap-destination translation_of: Web/CSS/scroll-snap-destination --- -<div>{{CSSRef}}{{deprecated_header}}</div> +{{CSSRef}}{{deprecated_header}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>scroll-snap-destination</code></strong> プロパティは、スクロールコンテナーの視覚的な{{Glossary("viewport", "ビューポート")}}内の要素のスナップポイントが配置される X および Y 座標の位置を定義します。</p> +**`scroll-snap-destination`** は [CSS](/ja/docs/Web/CSS) のプロパティで、スクロールコンテナーの視覚{{Glossary("viewport", "ビューポート")}}内の要素のスナップ点が配置される X および Y 座標の位置を定義します。 -<pre class="brush:css no-line-numbers">/* <position> 値 */ +```css +/* <position> 値 */ scroll-snap-destination: 400px 600px; /* グローバル値 */ scroll-snap-destination: inherit; scroll-snap-destination: initial; scroll-snap-destination: unset; -</pre> +``` + +## 構文 -<p>{{cssinfo}}</p> +### 値 -<h2 id="Syntax" name="Syntax">構文</h2> +- `<position>` + - : スクロールコンテナーの視覚ビューポートの先頭側の端からのスナップ距離のオフセットを指定します。最初の値はスナップ距離の X 座標、二番目の値は Y 座標です。 -<h3 id="Values" name="Values">値</h3> +## 公式定義 -<dl> - <dt><code><position></code></dt> - <dd>スクロールコンテナーの視覚的なビューポートの先頭側の端からのスナップ距離のオフセットを指定します。最初の値はスナップ距離の X 座標、二番目の値は Y 座標です。</dd> -</dl> +{{cssinfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><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> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">#container { +## 例 + +<h3 id="Setting_scroll_snap_destination">スクロールスナップの宛先を設定</h3> + +#### HTML + +```html +<div id="container"> + <div> + <p>At coordinate (0, 0)</p> + <div class="scrollContainer destination0"> + <div>1</div> + <div>2</div> + <div>3</div> + </div> + </div> + + <div> + <p>At coordinate (25, 0)</p> + <div class="scrollContainer destination25"> + <div>1</div> + <div>2</div> + <div>3</div> + </div> + </div> + + <div> + <p>At coordinate (50, 0)</p> + <div class="scrollContainer destination50"> + <div>1</div> + <div>2</div> + <div>3</div> + </div> + </div> +</div> +``` + +#### CSS + +```css +#container { display: flex; } -#container > 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; -}</pre> - -<div>{{EmbedLiveSample("Example", "100%", "170")}}</div> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-destination", "scroll-snap-destination")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<div>{{Compat("css.properties.scroll-snap-destination")}}</div> +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_scroll_snap_destination", "100%", "170")}} + +## 仕様書 + +どの標準にも含まれていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) |