CSS Carousel Generatorとは
CSSカルーセルはユーザーがスクロールする際に項目が所定の位置にスナップする水平または垂直のスクロール可能なコンテナです。モダンCSS（Chrome 135以上）にはJavaScriptなしで動作する組み込みのスクロールボタンやマーカーおよび現在スナップされている項目を他と異なるスタイルにするためのスクロールステートクエリが追加されています。これはJavaScriptカルーセルライブラリのネイティブな代替手段です。
クイックアンサー
JavaScript不要のネイティブCSSカルーセルをscroll-snap、ボタン、マーカーで構築します。スクロール動作にはscroll-snap-type、矢印には::scroll-button()、インジケータードットには::scroll-marker()、アクティブ項目のスタイルにはscroll-state(snapped: true)クエリを使用します。完全な機能はChrome 135以上で利用可能で他のブラウザでは適切に低下します。
Last updated: 2026-05-28
制限事項
- スクロールボタン（::scroll-button()）とマーカー（::scroll-marker()）にはChrome 135以上が必要です。FirefoxとSafariはまだサポートしていません。カルーセルは標準のスクロール可能なコンテナにフォールバックします。
- CSSカルーセルはJavaScriptなしでは自動再生、無限ループ、動的な項目数の処理ができません。高度なカルーセル機能にはCSS基盤の上に小さなJS拡張を使用してください。
- スクロールステートクエリ（container-type: scroll-state）は同じChrome 135以上リリースの一部です。アクティブ項目のスタイル設定のクロスブラウザサポートにはJavaScriptフォールバックが必要です。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- レイアウトの方向（水平または垂直）と項目の幅を選択します。
- スナップ動作と配置を設定します。mandatoryはすべての項目にスナップしproximityは近くにある場合にスナップします。
- オプションでナビゲーション用のスクロールボタンとマーカードットを含めます。
- アクセシブルなリストマークアップ（ul/li）とデモ出力用の項目数を選択します。
- CSSとHTMLをページにコピーします。各カルーセル項目に実際のコンテンツを追加します。
主な用途
- JavaScriptライブラリを追加せずに製品画像カルーセルを構築します。
- ブログ投稿やアプリストア風のリスト表示用のカードレールを作成します。
- キーボードナビゲーション可能なスクロールとスナップポイントを備えたアクセシブルな画像ギャラリーを作成します。