CSS Scroll Snapジェネレーター

CSS Scroll Snapジェネレーターの使い方

CSS Scroll Snapジェネレーターでは、横・縦スクロールを任意の位置で止めるためのCSSを、実際にプレビューでスクロールしながら調整できます。

左側の「カスタマイズ」で設定を変更すると、プレビューと生成コードへリアルタイムで反映されます。

1. スクロール方向を設定する

「スクロール方向」では、スクロールスナップを適用する方向を設定します。

• X：横方向にスクロールスナップを適用します。
• Y：縦方向にスクロールスナップを適用します。
• Both：横・縦の両方向にスクロールスナップを適用します。

設定した方向に応じて、scroll-snap-typeとoverflowのCSSが生成されます。

例えばXを選択した場合は、次のようなCSSになります。

.scroll-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

2. MandatoryとProximityを選択する

「スナップ方法」では、スクロール終了時にどの程度強制的にスナップさせるかを設定します。

Mandatoryでは、スクロールを止めると位置に関係なく最寄りのスナップ位置へ移動します。カードを1枚ずつ見せる横スクロールや、セクション単位で止めたいレイアウトなどに適しています。

Proximityでは、スナップ位置の近くでスクロールを止めた場合だけ、その位置へ移動します。Mandatoryよりも自由度の高いスクロールにしたい場合に適しています。

scroll-snap-type: x mandatory;

scroll-snap-type: x proximity;

3. Scroll Paddingを設定する

「Scroll Padding」では、スクロールコンテナー内のスナップ位置を内側へ調整できます。

例えば20pxを指定すると、コンテナーの端から20px内側を基準としてスナップ位置が計算されます。

scroll-padding: 20px;

単位はpx、rem、%から選択できます。

「個別に設定」をONにすると、上下左右それぞれに異なる値を設定できます。

scroll-paddingは通常のpaddingのように実際の余白を追加するプロパティではありません。スクロール可能範囲によっては、先頭・末尾のアイテムを指定した位置まで移動できない場合があります。

4. スナップ位置を設定する

「スナップ位置」では、各アイテムをコンテナー内のどの位置へ揃えるかを設定します。

Startは開始側、Centerは中央、Endは終了側へスナップします。

scroll-snap-align: start;

スクロール方向をBothにした場合は、「縦方向（Block）」と「横方向（Inline）」をそれぞれ設定できます。

例えば、縦方向をStart、横方向をCenterにすると、次のCSSが生成されます。

scroll-snap-align: start center;

5. スナップ停止を設定する

「スナップ停止」では、スクロール中にスナップ位置を通り過ぎる動作を調整できます。

Normalは通常の動作です。

Alwaysを選択すると、次のCSSが追加され、速くスクロールした場合でも途中のスナップ位置を通り過ぎにくくなります。

scroll-snap-stop: always;

タッチ操作やトラックパッドで複数のアイテムを一気にスクロールさせたくない場合などに利用できます。

6. Scroll Marginを設定する

「Scroll Margin」では、スナップするアイテム側の基準領域を調整できます。

scroll-margin: 12px;

scroll-paddingがスクロールコンテナー側に設定するのに対し、scroll-marginは各スナップ要素側に設定します。

単位はpxまたはremから選択でき、「個別に設定」をONにすると上下左右それぞれの値を変更できます。

7. プレビュー用の要素サイズと間隔を変更する

折りたたまれた「プレビュー設定」を開くと、次の項目を変更できます。

• 要素の幅
• 要素の高さ
• 要素間の距離

これらは、さまざまなレイアウトでScroll Snapの挙動を確認するためのプレビュー専用設定です。生成されるCSSには含まれません。

要素を小さくすると複数のカードが同時に見えるカルーセルに近い状態を、要素を大きくすると画面単位で切り替わるようなレイアウトを確認しやすくなります。

8. クラス名を変更する

折りたたまれた「詳細設定」を開くと、生成コードで使用するScroll ContainerとSnap Itemのクラス名を変更できます。

初期設定では、次のクラス名が使用されます。

.scroll-container
.scroll-item

入力欄には先頭の「.」を付けず、scroll-containerのようにクラス名だけを入力してください。既存のHTMLへ適用する場合は、使用しているクラス名に合わせて変更できます。

9. プレビューでスクロールの違いを確認する

プレビューは実際にスクロールできるため、マウスホイール、トラックパッド、タッチ操作などでスナップの挙動を確認できます。

プレビュー右上の「Snap」をON／OFFすると、Scroll Snapを適用したスクロールと通常のスクロールとを比較できます。

プレビュー枠の右下にある「ガイドを表示」をONにすると、次の基準をプレビュー上で確認できます。

• スナップ位置
• scroll-padding
• scroll-margin

Scroll PaddingやScroll Marginを調整するときは、ガイドを表示した状態にすると位置関係を把握しやすくなります。ガイド表示のON／OFFは生成されるCSSに影響しません。

10. 生成されたCSSをコピーする

設定内容に応じて、Scroll ContainerとSnap ItemのCSSがリアルタイムで生成されます。

例えば、次のようなコードを生成できます。

.scroll-container {
  overflow: auto;
  scroll-snap-type: both mandatory;
  scroll-padding: 20px;
}

.scroll-item {
  scroll-snap-align: start start;
  scroll-margin: 12px;
}

「コピーする」ボタンから、そのままCSSをコピーして使用できます。

スクロールスナップとは？

スクロールスナップ（Scroll Snap）は、スクロール終了時にスクロールエリア内の要素を指定した位置へ揃えるためのCSSの仕組みです。

横並びのカードをスクロールしたときに、中途半端な位置ではなく、カードの先頭や中央でピタッと止まるような動きをCSSだけで実装できます。

横スクロールのカルーセル風UIだけでなく、縦方向のセクション切り替えや、縦横両方向へ移動するグリッドなどにも利用できます。

Scroll ContainerとSnap Item

CSS Scroll Snapでは、大きく分けて2種類の要素があります。

Scroll Containerは、実際にスクロールする親要素です。

.scroll-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

Snap Itemは、スクロールコンテナー内でスナップさせる子要素です。

.scroll-item {
  scroll-snap-align: start;
}

scroll-snap-typeだけでは、どの要素をどの位置へスナップさせるかは決まりません。通常はScroll ContainerとSnap Itemの両方に必要なプロパティを設定します。

scroll-snap-typeとは？

scroll-snap-typeは、要素をScroll Containerとしてスナップさせるか、どの軸を対象にするか、スナップ位置をどの程度厳密に適用するかを指定するプロパティです。

scroll-snap-type: <axis> <strictness>;

このジェネレーターで選択できる軸は、次の3種類です。

• x：横軸のスナップ位置を使用します。
• y：縦軸のスナップ位置を使用します。
• both：横軸と縦軸のスナップ位置を、それぞれ独立して評価します。

スナップの厳密さには、mandatoryとproximityがあります。

mandatory

mandatoryでは、有効なスナップ位置が存在する場合、スクロール操作が終了してスクロール中でなくなったときに、いずれかのスナップ位置へ揃うことが必須となります。

scroll-snap-type: x mandatory;

ただし、どのスナップ位置を選ぶかという厳密なアルゴリズムや、そこへ移動するときのアニメーションは仕様で一律に定められておらず、ブラウザーやスクロール操作によって挙動が異なる場合があります。「常に単純な距離だけで最寄りの位置を選ぶ」「必ず1アイテムずつ移動する」という指定ではありません。

また、スナップ対象が表示領域より大きい場合は、その内容を閲覧できるよう、対象が表示領域を覆っている範囲内を自由にスクロールできる場合があります。離れたスナップ位置だけをmandatoryで指定すると、間のコンテンツへ到達しにくくなる可能性があるため注意が必要です。

proximity

proximityでは、スクロール操作の終了位置や操作方法などをもとに、ブラウザーがスナップさせるかどうかを判断します。スナップ位置の近くで止めたときは揃いやすく、離れた位置ではそのまま止まるため、ユーザーが途中の位置でスクロールを止められます。

scroll-snap-type: y proximity;

「近い」と判断する具体的な距離はCSSで指定できず、ブラウザーに委ねられています。

縦横両方向を対象にし、各軸でスナップ位置を評価する場合は、次のように指定します。

scroll-snap-type: both mandatory;

なお、scroll-snap-typeの初期値はnoneで、この場合はスナップしません。軸だけを指定して厳密さを省略した場合は、proximityとして扱われます。

scroll-snap-alignとは？

scroll-snap-alignは、Snap ItemをScroll Containerのどの位置へ揃えるかを指定します。

scroll-snap-align: start;
scroll-snap-align: center;
scroll-snap-align: end;

2つの値を指定した場合は、Block方向とInline方向の位置をそれぞれ指定できます。

scroll-snap-align: start center;

通常の横書きレイアウトでは、おおむねBlockが縦方向、Inlineが横方向に対応します。

scroll-paddingとは？

scroll-paddingはScroll Container側に指定し、スナップ位置を計算するときの基準領域（スナップポート）を、スクロール表示領域の端から内側へ調整するプロパティです。

.scroll-container {
  scroll-padding: 20px;
}

例えば上側に固定ヘッダーがある場合、ヘッダーの高さに合わせてscroll-padding-topを設定すると、その分だけ内側の位置を基準にスナップさせられます。

通常のpaddingとは異なり、要素のレイアウトやスクロール可能範囲へ実際の余白を追加するものではありません。先頭や末尾に空間を設けたい場合は、レイアウト側のpaddingなどを別途設定します。

scroll-marginとは？

scroll-marginはSnap Item側に指定し、スナップ位置の計算に使用されるアイテム側の領域（スナップ領域）を、要素のボーダーから外側へ広げるプロパティです。

.scroll-item {
  scroll-margin: 12px;
}

正の値を指定すると、アイテムのボーダーより手前でスナップするため、アイテムとスナップポートの端との間に間隔を設けられます。

scroll-paddingがScroll Container全体の基準領域を調整するのに対し、scroll-marginは各Snap Itemの基準領域を調整します。用途に応じて、両方を組み合わせることもできます。

CSS Scroll SnapとJavaScriptスライダーの違い

CSS Scroll Snapは、ブラウザー本来のスクロール操作を利用して、特定の位置へスナップさせる機能です。

SwiperなどのJavaScriptライブラリを使ったスライダーとは異なり、CSSだけでも基本的なスクロールスナップを実装できます。

一方で、次のような機能が必要な場合は、JavaScriptを使ったスライダーの方が適していることがあります。

• 自動再生
• ループ
• ページネーション
• 前へ・次へボタン
• 複雑なスライド制御

単純な横スクロールやセクション単位のスナップであれば、CSS Scroll Snapだけで実装できるケースも多くあります。

FAQ