scroll-snap 横スクロールカルーセル
このスニペットは、横スクロールするコンテンツが各カードの先頭でぴたりと止まる「スクロールスナップ」型のカルーセルです。トラックに overflow-x:auto と scroll-snap-type:x mandatory を、各カードに flex:0 0 220px で固定幅を与えて、指やマウスホイールでスワイプ…
解説
このスニペットは、横スクロールするコンテンツが各カードの先頭でぴたりと止まる「スクロールスナップ」型のカルーセルです。トラックに overflow-x:auto と scroll-snap-type:x mandatory を、各カードに flex:0 0 220px で固定幅を与えて、指やマウスホイールでスワイプすると最寄りのカードに吸い付くように整列します。JavaScript を使わず、ネイティブのスクロール挙動だけで滑らかに動くのが特徴です。
こんなときに
- スマホ向けの商品カードやギャラリーの横送り
- おすすめ記事・事例を限られた幅で見せたいとき
- タッチ操作が主役のモバイルファースト UI
カード幅は flex-basis の値で、止まる位置の余白は scroll-padding で調整します。スクロールバーは細く装飾していますが、好みで隠すこともできます。注意点として、矢印ボタンでの送りが必要なら別途 JavaScript を足してください。また、スクロールできることが伝わりにくい場合があるので、見出しのヒント文や、端を少し見切れさせる工夫で操作を促すと親切です。
使用例・適したシーン
- 施工事例の比較
- リフォームのビフォーアフター
- 美容・施術の症例
よくある質問
前へ・次への矢印ボタンは付いていますか
このスニペットは指やホイールでのスワイプを前提にしており、矢印ボタンは含みません。必要な場合は scrollBy などを使う短いスクリプトを追加すると実現できます。
カードの幅を変えたいときは
各カードの flex の固定幅、たとえば 220px の数値を変更してください。あわせて scroll-padding を調整すると、止まる位置の余白を好みに合わせられます。