scroll-snap-typeとscroll-snap-align
CSSのスクロールスナッププロパティを使い、カルーセルやページ送りのスクロール体験を作成します。
「scroll-snap-typeとscroll-snap-align」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
CSS Scroll Snapとは
CSS Scroll Snapを使うと、スクロール可能なコンテナをスクロールした後、特定の位置に「スナップ」させることができます。JavaScriptなしで、制御されたページ送りやカルーセルの動作を実現できます。
コンテナへのscroll-snap-type
スクロール可能なコンテナでスナップを有効にします。
<div class="carousel">
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>scroll-snap-typeの値
2つの部分で構成されます。
- 軸：
x、y、またはboth - 厳密さ：
mandatory（常にスナップ）またはproximity（スナップポイントの近くに来たときにスナップ）
<div class="paged">Paged container</div>
<div class="freeform">Freeform container</div>アイテムへのscroll-snap-align
各子要素をコンテナ内のどの位置にスナップさせるかを定義します。
<div class="carousel-demo">
<div class="carousel-item">1</div><div class="carousel-item">2</div>
</div>フルスクリーンのページスナップ
縦方向にページ送りするフルスクリーンセクションのレイアウトです。
<div class="sections">
<div class="section">Section 1</div><div class="section">Section 2</div>
</div>水平方向のカルーセルスナップ
スナップ機能付きの水平方向のカードカルーセルです。
<div class="carousel">
<div class="card">Card 1</div><div class="card">Card 2</div><div class="card">Card 3</div>
</div>scroll-snap-stop
scroll-snap-stop: alwaysは、高速スクロールによってスナップポイントが飛ばされるのを防ぎます。ユーザーは1回のスクロール操作で1つ以上先のアイテムへ進めなくなります。
<div class="slider">
<div class="slide">1</div><div class="slide">2</div>
</div>scroll-snap-marginとscroll-padding
アイテム側ではscroll-margin、コンテナ側ではscroll-paddingを使って、スナップ位置をオフセットします。
<div class="carousel">Carousel container</div>overscroll-behavior
overscroll-behavior: containはスクロールの連鎖を防ぎます。コンテナがスクロール境界に達しても、ページまで同時にスクロールしなくなります。
<div class="modal-body">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>アクセシビリティに関する考慮事項
スナップカルーセルは、キーボードでも操作できるようにしてください。矢印キーでスナップポイント間を移動できるようにします。ARIAのカルーセル用ロールとラベルを追加してください。JavaScriptによるプログラム上のスクロールでも、同じスナップポイントを尊重する必要があります。
CSSカルーセルとJSカルーセル
CSS Scroll Snapを使うと、JavaScriptなしで基本的なカルーセルの要件の多くに対応できます。スナップ、スクロールバーの非表示、パディングによる配置などです。ドットインジケーター、アニメーション付きの前へ／次へボタン、複雑なアクセシビリティ管理が必要な場合は、JSライブラリを使用してください。
確認問題
コンテナが常にスナップポイントで正確に停止し、途中で止まらないようにするscroll-snap-typeの値はどれですか。
まとめ
CSS Scroll Snapを使うと、ページ送りやカルーセルの動作を実現できます。コンテナにscroll-snap-type: x mandatoryを設定し、アイテムにscroll-snap-align: startを設定します。スナップポイントの飛ばしを防ぐにはscroll-snap-stop: alwaysを使用します。スクロールの連鎖を防ぐにはoverscroll-behavior: containと組み合わせます。見た目をすっきりさせるには、scrollbar-width: noneでスクロールバーを非表示にします。
よくある質問
「scroll-snap-typeとscroll-snap-align」レッスンは無料ですか？
はい。「scroll-snap-typeとscroll-snap-align」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「scroll-snap-typeとscroll-snap-align」で何を学びますか？
CSSのスクロールスナッププロパティを使い、カルーセルやページ送りのスクロール体験を作成します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「scroll-snap-typeとscroll-snap-align」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- overflow：hidden、scroll、auto、clip
- scroll-behavior：smooth
- scroll-snap-typeとscroll-snap-align
- ::-webkit-scrollbarによるスクロールバーのスタイル設定