## 垂直スクロールスナップ VM には既に `index.html` と `style.css` が用意されています。このコードは、スクロール中に要素にスナップするスクロール可能なコンテナを作成します。この効果を実現するために、以下の手順がとられます。 1. `display: grid` と `grid-auto-flow: row` を使って垂直レイアウトを作成します。 2. `scroll-snap-type: y mandatory` と `overscroll-behavior-y: contain` を使って垂直スクロール時のスナップ効果を作成します。 3. `scroll-snap-align` に `start`、`stop`、または `center` を指定することで、スナップの位置合わせを変更できます。以下が HTML と CSS のコードです。 ```html

``` ```css .vertical-snap { margin: 0 auto; display: grid; grid-auto-flow: row; gap: 1rem; width: calc(180px + 1rem); padding: 1rem; height: 480px; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-type: y mandatory; } .vertical-snap > a { scroll-snap-align: center; } .vertical-snap img { width: 180px; object-fit: contain; border-radius: 1rem; } ``` 右下隅の「Go Live」をクリックして、ポート 8080 で Web サービスを実行してください。その後、**Web 8080** タブを更新して Web ページをプレビューできます。