スクロールスナップ時の子要素の配置位置を指定するプロパティです。scroll-snap-typeと組み合わせて使用します。
scroll-snap-align: none | start | end | center| snap-start | scroll-snap-align: start |
| snap-center | scroll-snap-align: center |
| snap-align-none | scroll-snap-align: none |
scroll-snap-align: start;要素の開始位置でスナップ
scroll-snap-align: center;要素の中央でスナップ
scroll-snap-align: end;要素の終了位置でスナップ
scroll-snap-align: none;この要素ではスナップしない
カルーセルのスライドや、画像ギャラリーの各アイテムに指定する。centerを使うと見栄えが良い。
親要素にscroll-snap-typeが必要。scroll-snap-typeとセットで使わないと効果がない。
スナップの吸着位置を決めるのは「子要素側」のscroll-snap-alignで、コンテナに書いても効きません——コンテナ側(type)と子側(align)の役割分担はAIの生成コードでも崩れがちです。startとcenterの使い分け(一覧はstart、ギャラリーはcenter)が定番です。
このscroll-snapが効かない原因を、コンテナ側と子側の指定の役割分担から調査して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。