# scroll-snap-align

> スクロールスナップ時の子要素の配置位置を指定するプロパティです。scroll-snap-typeと組み合わせて使用します。

- カテゴリ: インタラクション・UX
- URL: https://www.css-dictionary.com/property/scroll-snap-align/

## 構文

```css
scroll-snap-align: none | start | end | center
```

## Tailwindでは

- `snap-start` → scroll-snap-align: start
- `snap-center` → scroll-snap-align: center
- `snap-align-none` → scroll-snap-align: none

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 69+ / Firefox 68+ / Safari 11+ / Edge 79+

## コード例

### 例1: 要素の開始位置でスナップ

```css
scroll-snap-align: start;
```

### 例2: 要素の中央でスナップ

```css
scroll-snap-align: center;
```

### 例3: 要素の終了位置でスナップ

```css
scroll-snap-align: end;
```

### 例4: この要素ではスナップしない

```css
scroll-snap-align: none;
```

## TIPS

カルーセルのスライドや、画像ギャラリーの各アイテムに指定する。centerを使うと見栄えが良い。

## よくある間違い

親要素にscroll-snap-typeが必要。scroll-snap-typeとセットで使わないと効果がない。

## AIがよく間違えるポイント

スナップの吸着位置を決めるのは「子要素側」のscroll-snap-alignで、コンテナに書いても効きません——コンテナ側(type)と子側(align)の役割分担はAIの生成コードでも崩れがちです。startとcenterの使い分け（一覧はstart、ギャラリーはcenter）が定番です。

## AIへの依頼文例

- このscroll-snapが効かない原因を、コンテナ側と子側の指定の役割分担から調査して

## 関連プロパティ

- [scroll-snap-type](https://www.css-dictionary.com/property/scroll-snap-type.md)
- [scroll-margin](https://www.css-dictionary.com/property/scroll-margin.md)