スマホのカルーセルは、JSのライブラリを入れずに CSS の scroll-snap でピタッと止める

横スクロールのコンテナに scroll-snap-type、中の各カードに scroll-snap-align を付けるだけで、指を離すとカードの位置で止まる。

どんな問題を解決するか / いつ使うか

スマホでカードや画像を横に並べてスワイプさせたいとき。カルーセル用のJSライブラリを読み込むと表示が遅くなり、AIに作らせるとライブラリを入れがち。CSSだけで足りる場面が多い。

やり方

css

.carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;   /* 横方向に、必ずどこかで止める */
  scroll-padding-inline: 16px;     /* 止まる位置の左右の余白 */
  overscroll-behavior-x: contain;  /* 端でページ全体が動かないように */
  -webkit-overflow-scrolling: touch;
}
.carousel > * {
  flex: 0 0 80%;                   /* 次のカードを少し見せて、横に続くと分かるように */
  scroll-snap-align: start;        /* カードの左端で止める（center も可） */
}

1枚ずつ確実に送りたいなら、各カードに scroll-snap-stop: always; を付ける。
AIに頼むときは「カルーセルはライブラリを使わず、scroll-snap で作って」とルールファイルに書いておく（モダンCSSのDos/Don'ts（100dvw、:focus-visible、:has()、@layer など）をAIへのルールにも入れる）。

注意点

前後ボタンやページ送りの点（インジケーター）が必要なら、そこだけ少しJSを書く（scrollBy や scrollIntoView）。
横に続くことが分かるよう、次のカードを少し見せる。スクロールバーを消す場合は特に。
キーボードで操作できるよう、コンテナに tabindex="0" と分かりやすいラベルを付ける。
主要ブラウザで使える。

出典

投稿者: @wokobo_net
投稿: @wokobo_net · 2026-10-13
収集日: 2026-10-14（JST）