カルーセル（スライダー）を実装するためにSwiperやSlickなどのJSライブラリを読み込んでいませんか？実は、CSSの scroll-snap プロパティだけで、ネイティブのような心地よいスナップスクロールを実現できます。
本記事では3つの実用パターンを、コピペ可能なコードで紹介します。
1. 水平カルーセル
最もよく使われるパターン。カードを横にスワイプすると、ピタッとスナップします。実績紹介やお客様の声に最適です。左右にスワイプしてみてください。
CSS
/* コンテナ：横スクロール＋スナップ ON */
.carousel {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
/* スクロールバーを非表示 */
.carousel::-webkit-scrollbar { display: none; }
.carousel { scrollbar-width: none; }
/* カード：中央にスナップ */
.carousel__item {
flex: 0 0 260px;
scroll-snap-align: center;
}
💡 ポイント：
scroll-snap-type: x mandatory は「ユーザーがスクロールを止めたら、必ず最寄りのスナップポイントに吸着する」という意味。proximity にすると、ある程度近づいた時だけ吸着します。
2. フルスクリーンセクション（縦スナップ）
縦方向にスクロールするたび、セクション単位でピタッと止まるレイアウト。LP（ランディングページ）のストーリーテリングに効果的です。下のデモを上下にスクロールしてみてください。
CSS
.fullpage {
height: 100vh;
overflow-y: auto;
scroll-snap-type: y mandatory;
}
.fullpage__section {
height: 100vh;
scroll-snap-align: start;
display: flex;
align-items: center;
justify-content: center;
}
3. カードリスト（proximity スナップ）
厳密にスナップさせず、ある程度近づいた時だけ吸着する柔らかいスナップ。ニュースフィードや商品リストなど、自由なスクロールも許容したい場面に最適です。
CSS
/* proximity：近づいた時だけスナップ */
.card-list {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x proximity;
scroll-padding: 0 24px;
}
.card-list__item {
flex: 0 0 180px;
scroll-snap-align: start;
}
まとめ
- mandatory → 必ずスナップ。フルスクリーンLPやカルーセル向き
- proximity → 柔らかいスナップ。自由スクロールとの両立
- scroll-snap-align →
start（先頭に揃える）/center（中央に揃える）を使い分け
JSライブラリなしでカルーセルが実装できるため、バンドルサイズの削減と表示速度の向上にも貢献します。
💡 ツタワルの制作では：可能な限りCSSネイティブ機能で実装し、JavaScriptへの依存を最小限に抑える設計を心がけています。パフォーマンスと保守性の両立が、私たちの制作指針です。