CSSスクロールスナップジェネレーターとは
CSSスクロールスナップは、コンテナのスクロール位置を制御して、定義した配置ポイントにスナップするようにします。これにより、カルーセル、水平ギャラリー、セクション単位のスクロールがJavaScriptなしで実現します。ブラウザがスナップ物理を処理するため、トラックパッド、マウスホイール、タッチデバイスでスムーズに動作します。
クイックアンサー
カルーセル、ギャラリー、セクションベースのレイアウト用のCSSスクロールスナップルールを生成します。方向、スナップタイプ、配置を選択して、スクロール位置が各子要素にどのようにスナップするかを制御します。
Last updated: 2026-06-11
制限事項
- mandatoryスナップタイプは、スクロール位置がすべての子にスナップするため、長いコンテンツの高速スクロールを妨げ、迅速なブラウジングが堅苦しくなる可能性があります。
- スクロールスナップはコンテナにoverflowがscrollまたはautoに設定されている必要があります。overflow: hiddenのコンテナはスクロールスナップ動作を有効化しません。
- スクロールスナップはprefers-reduced-motionのユーザー設定と競合する可能性があります。動きの低減をリクエストしたユーザーは、強制スナップポイントに混乱する可能性があります。スナップ動作を@media (prefers-reduced-motion: no-preference)ブロックでラップして、アクセシビリティ設定を尊重してください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- スクロール方向を選択します。カルーセルやギャラリーには水平、セクション単位のページには垂直を選択します。
- スナップタイプを選択します。mandatoryは常に最も近いポイントにスナップし、proximityはスクロールがスナップポイントの近くにある場合のみスナップします。
- 配置を選択します。startは子をコンテナの先頭に、centerは中央に、endは末尾に配置します。
- 生成されたCSSとHTMLスケルトンをコピーし、プレースホルダーの子コンテンツを独自のものに置き換えます。
主な用途
- スクロールまたはスワイプで各画像にスナップする水平画像ギャラリーを構築する。
- 各セクションがスクロール時にビューにスナップする全画面ランディングサイトを作成する。
- JavaScriptカルーセルを軽量なCSSオンリースクロールスナップコンポーネントに置き換える。