diff options
Diffstat (limited to 'files/ja/web/css/css_scroll_snap/index.md')
-rw-r--r-- | files/ja/web/css/css_scroll_snap/index.md | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/files/ja/web/css/css_scroll_snap/index.md b/files/ja/web/css/css_scroll_snap/index.md new file mode 100644 index 0000000000..57af06183b --- /dev/null +++ b/files/ja/web/css/css_scroll_snap/index.md @@ -0,0 +1,75 @@ +--- +title: CSS スクロールスナップ +slug: Web/CSS/CSS_Scroll_Snap +tags: + - CSS + - CSS スクロールスナップ + - Reference + - 概要 +translation_of: Web/CSS/CSS_Scroll_Snap +--- +<div>{{CSSRef}}</div> + +<p class="summary"><strong>CSS スクロールスナップ</strong>は CSS モジュールの一つで、スクロール操作の完了後にスクロールコンテナーのスクロールポートが終了するスクロール位置を強制する、スクロールスナップ位置を導入します。</p> + +<div class="note"> +<p><strong>メモ</strong>: 以前のバージョンのスクロールスナップはスクロールスナップ点と呼ばれており、非推奨になりました。このバージョンが現行です。</p> +</div> + +<h2 id="Reference" name="Reference">リファレンス</h2> + +<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> + +<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> + +<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> |