2026年4月16日
CSS scroll-snap とは？
スクロールするとぴったり次のセクションに止まる——そんな動きを作るのが CSS scroll-snap（スクロールスナップ） です。
JavaScriptなしで、CSSだけでスライダーやフルページスクロールが実装できます。
基本的な使い方
親要素に scroll-snap-type、子要素に scroll-snap-align を指定します。
/* 親要素：スクロール方向とスナップの強さを指定 */
.container {
overflow-y: scroll;
scroll-snap-type: y mandatory; /* 縦方向・強制スナップ */
height: 100vh;
}
/* 子要素：スナップする位置を指定 */
.section {
scroll-snap-align: start; /* 上端でスナップ */
height: 100vh;
}👉 displayプロパティ完全解説も参考にしてください。
横スクロールスライダー
.slider {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
gap: 16px;
}
.slide {
scroll-snap-align: start;
flex-shrink: 0;
width: 100%;
}🔥 CSSセレクターの使い方で実践してみましょう。
scroll-snap-typeの値
| 値 | 意味 |
|---|---|
x mandatory | 横方向・必ずスナップ |
y mandatory | 縦方向・必ずスナップ |
y proximity | 縦方向・近くにあればスナップ |
💡 hoverで動きをつける方法で基礎を確認できます。
まとめ
- ✅ 親要素に
scroll-snap-type、子要素にscroll-snap-alignを指定 - ✅
mandatory：必ずスナップ、proximity：近くにあればスナップ - ✅ 横スクロールスライダーも縦フルページスクロールも作れる
- ✅ JavaScriptなしでCSSだけで実装できる
scroll-snapを使いこなすと、インタラクティブなレイアウトが作れます。レッスンでさらに詳しく学んでみましょう。