カルーセル（スライダー）を実装するためにSwiperやSlickなどのJSライブラリを読み込んでいませんか？実は、CSSの scroll-snap プロパティだけで、ネイティブのような心地よいスナップスクロールを実現できます。
本記事では3つの実用パターンを、コピペ可能なコードで紹介します。
1. 水平カルーセル
最もよく使われるパターン。カードを横にスワイプすると、ピタッとスナップします。実績紹介やお客様の声に最適です。左右にスワイプしてみてください。
01
企画・戦略
02
デザイン
03
コーディング
04
テスト
05
公開・運用
HTML
<div class="carousel">
<div class="carousel__item"><div class="carousel__num">01</div><div class="carousel__label">企画・戦略</div></div>
<div class="carousel__item"><div class="carousel__num">02</div><div class="carousel__label">デザイン</div></div>
<div class="carousel__item"><div class="carousel__num">03</div><div class="carousel__label">コーディング</div></div>
<div class="carousel__item"><div class="carousel__num">04</div><div class="carousel__label">テスト</div></div>
<div class="carousel__item"><div class="carousel__num">05</div><div class="carousel__label">公開・運用</div></div>
</div>
CSS
/* ===== ベースのレイアウト（デザインに合わせて調整してください） ===== */
.carousel__label {
/* 本体のスタイル */
}
.carousel__num {
/* 本体のスタイル */
}
/* ===== 動作のアニメーション ===== */
/* コンテナ：横スクロール＋スナップ 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（ランディングページ）のストーリーテリングに効果的です。下のデモを上下にスクロールしてみてください。
HTML
<div class="vsnap">
<div class="vsnap__section">Section 1 ／ Hero</div>
<div class="vsnap__section">Section 2 ／ Features</div>
<div class="vsnap__section">Section 3 ／ CTA</div>
</div>
CSS
/* ===== ベースのレイアウト（デザインに合わせて調整してください） ===== */
.vsnap__section {
/* 本体のスタイル */
}
.vsnap {
/* 本体のスタイル */
}
/* ===== 動作のアニメーション ===== */
.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 スナップ）
厳密にスナップさせず、ある程度近づいた時だけ吸着する柔らかいスナップ。ニュースフィードや商品リストなど、自由なスクロールも許容したい場面に最適です。
🎨
デザイン
💻
開発
📊
分析
🚀
運用
📱
SNS
HTML
<div class="card-snap">
<div class="card-snap__item"><div class="card-snap__icon">🎨</div><div class="card-snap__title">デザイン</div></div>
<div class="card-snap__item"><div class="card-snap__icon">💻</div><div class="card-snap__title">開発</div></div>
<div class="card-snap__item"><div class="card-snap__icon">📊</div><div class="card-snap__title">分析</div></div>
<div class="card-snap__item"><div class="card-snap__icon">🚀</div><div class="card-snap__title">運用</div></div>
<div class="card-snap__item"><div class="card-snap__icon">📱</div><div class="card-snap__title">SNS</div></div>
</div>
CSS
/* ===== ベースのレイアウト（デザインに合わせて調整してください） ===== */
.card-snap__item {
/* 本体のスタイル */
}
.card-snap__icon {
/* 本体のスタイル */
}
.card-snap__title {
/* 本体のスタイル */
}
.card-snap {
/* 本体のスタイル */
}
/* ===== 動作のアニメーション ===== */
/* 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への依存を最小限に抑える設計を心がけています。パフォーマンスと保守性の両立が、私たちの制作指針です。
← 前の記事：ツールチップ
次の記事：グラスモーフィズム →