スクロールスナップ（横方向）
横にスワイプすると、カードが 1 枚ずつピタッと止まる横スクロール UI です。動きの核は CSS の scroll-snap-type:x mandatory で、横方向のスクロールに必ずスナップを効かせる指定です。
解説
横にスワイプすると、カードが 1 枚ずつピタッと止まる横スクロール UI です。動きの核は CSS の scroll-snap-type:x mandatory で、横方向のスクロールに必ずスナップを効かせる指定です。各カードには scroll-snap-align:center を付けてあり、止まる位置がカードの中央に吸い付くため、半端な位置で停止しません。横並びは display:flex と overflow-x:auto で実現しており、JavaScript なしで滑らかに動きます。
向いている場面
スマホのカルーセル、商品やプランの横並び一覧、画像ギャラリー、オンボーディングの手順カードなど、指で順に送って見せたい UI の定番です。マウスでもドラッグやトラックパッドの横スワイプで操作できます。
- 止まる位置：
scroll-snap-alignをstartにすると左端、centerにすると中央で止まります。 - カード幅：各カードの
widthを画面幅基準にすると、1 枚ずつ全画面で見せる送りにできます。 - 配慮：スクロールバーが細く見えにくいので、矢印やドットなどの操作ヒントを添えると迷いません。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
カードを左端で止めることはできますか
できます。各カードの scroll-snap-align を center から start に変えると、止まる基準がカードの左端になります。1 枚を画面いっぱいに見せたいときに向いた設定です。
JavaScript なしで動きますか
動きます。横並びと吸着はすべて CSS の scroll-snap で実現しており、指のスワイプやトラックパッドの横操作にそのまま反応します。自動再生など追加機能だけスクリプトが要ります。