やってみようカードを横に流して、どこで止まるか見てください
スクロールマイナー（知る人ぞ知る）
スクロールスナップ
Scroll Snap
横や縦に流すと、カードの途中で止まらず、1枚ずつピタッとそろった位置で止まる。
別名スナップスクロールピタッと止まるスクロールページングカードのスナップ
どこで使われている？
- よく見かける場所
- アプリストアのおすすめ、ショッピングアプリの商品カード、ストーリーズ、写真の横スクロール
- 使うとよい場面
- 横に並んだカードを、1枚ずつきれいに見せたいとき
- 避けたい場面
- 長い文章のページ（読んでいる途中で勝手に動くと読みにくい）
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「スクロールスナップ（Scroll Snap）」を実装してください。 動き：横スクロールの一覧で、指を離したあとの止まる位置を、カードの左端（または中央）にそろえる。中途半端な位置では止まらず、近いカードの位置まで自動で動いて止まる。 使う部品：CSS の scroll-snap-type と scroll-snap-align
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | CSS の scroll-snap-type と scroll-snap-align |
|---|---|
| iPhoneアプリなら | ScrollView の .scrollTargetBehavior(.viewAligned) |
| Androidアプリなら | LazyRow ＋ rememberSnapFlingBehavior |
| Flutterなら | PageView（または PageScrollPhysics） |
| React Nativeなら | FlatList の snapToInterval |