JavaScriptを使わないCSSカルーセル：完全ガイド

ホーム » Python » JavaScriptを使わないCSSカルーセル：完全ガイド

JavaScriptを一切使わずにカルーセルを構築することは、もはやSFの世界の話ではない。; 最新の CSS は、スムーズでタッチ操作に適したスライダーを作成するために必要なすべてを提供します。 CSSのtouch-actionプロパティ ブラウザにネイティブに溶け込むような感覚を実現します。スクロールスナップから、ナビゲーションコントロールを自動生成する実験的な擬似要素まで、バンドルを軽量に保ちながら、フル機能のコンポーネントを提供できます。

もしあなたがこれまで、重いJavaScriptカルーセルライブラリや、水分補給の問題、アクセシビリティの癖などに悩まされてきたなら、CSSのみのカルーセルはまさに新鮮な風となるでしょう。最新の仕様（CSS Overflow Level 5など）と、以下のような定評のある機能を備えています。 scroll-snap-typeこれにより、高速でキーボード操作が容易で、JavaScriptが無効になっている場合でも安定して動作する、本番環境に対応したカルーセルを出荷することが現実的になりました。

現代のCSSがJavaScriptカルーセルをオプションにする理由

長年、「カルーセルをどうやって作るか？」という質問に対する定番の答えは「JavaScriptライブラリを入手すればいい」だった。Swiper、Slick、Glide、Bootstrapのカルーセルなど多くのライブラリは、イベントリスナー、タイマー、リサイズオブザーバー、ARIAロールを自動的に処理することでこの問題を解決しましたが、バンドルに余分なキロバイトが詰め込まれ、管理すべき依存関係が1つ増えました。

今日、CSSはカルーセルの一般的な使用例のほとんどに静かに追いついてきた。ほんの数個のプロパティを設定するだけで、通常の水平スクロールを、マウスホイール、トラックパッド、キーボードの矢印キー、タッチスワイプに対応した、ページ分割されたスナップスライド式のスクロール体験に変えることができます。リスナーも不要で、JSロジックによるリフローも発生せず、フレームワークのハイドレーションによる競合状態もありません。

基本的な考え方はシンプルです。カルーセルをスクロール可能な領域として扱います。スライド間をテレポートする魔法のコンポーネントとしてではなく、CSS はスナップポイント、スムーズなトランジション、そして最新の仕様ではブラウザが実際のインタラクティブ要素として DOM に挿入する組み込みのボタンやマーカーによってスクロールを「補助」します。

この変化は、業績と回復力に大きな影響を与える。CSSカルーセルは、JavaScriptがブロックされたり、読み込みに失敗したり、ユーザーによって無効化されたりした場合でも、問題なく動作します。ブラウザ独自のスクロールエンジンがほとんどの処理を担っており、主要なエンジンはすべて高度に最適化され、低電力デバイスやアクセシビリティツール向けに調整されています。

さらに、CSS の機能として、 :has()グリッドレイアウトとスクロール駆動アニメーションは同じスクロール領域に接続されますこれにより、3つの異なるシステム（あなたのコード、ライブラリのロジック、ブラウザのスクロール）を脆弱な方法で統合することなく、高度なスライドインジケーター、コンテンツの表示、または視差効果を構築できます。

コア構成要素：CSSのみのカルーセル用スクロールスナップ

CSSのみで構成されたカルーセルの中核を成すのは、スクロールスナップモジュールです。これにより、ユーザーがスクロールを停止した後にスクロール位置が固定される「磁力」ポイントを定義できます。2つのスライドの中間地点に止まるのではなく、ビューは最も近いスライドにスナップし、クラシックなスライダーの操作感を実現します。

HTML構造は最小限に抑えることができる水平方向にスクロールするコンテナと、その中に含まれる一連のスライド要素。マークアップが一貫していれば、各画像やカードに独自のクラスを付ける必要はありませんが、アイテムに名前を付けることで、スタイル設定やアクセシビリティが向上することがよくあります。

基本的な画像カルーセルの構造例 ラッパーとして概念化できる <ul class="carousel"> 複数で <li> 各アイテムには画像またはカードが含まれています。魔法はCSSにあります。

コンテナをスクロールが有効な水平フレックスレイアウトとして定義します。 そして、x軸に沿ってスナップするように指定します。

.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }

それぞれのスライドはスナップ位置を露出させる通常はビューポートの中央または開始位置に配置され、固定基準を設定することで、ビューごとに1つまたは複数が表示されます。

.carousel-item { flex: 0 0 100%; scroll-snap-align: center; }

このパターンは、驚くほど完成度の高いカルーセルをすでに提供します。モバイル端末ではスワイプ操作、マウスやトラックパッドではスクロール操作が可能で、ビューポートは常に最も近いスライドに自動的に切り替わります。スクロールイベントを監視したり、手動で位置を調整したりするJavaScriptは使用していません。

複数のアイテムを表示するカルーセル（商品ストリップなど）を作成するには、フレックスベースを調整するだけで済みます。例えば、次のような方法を使えば、1ビューあたり3つのアイテムを少し間隔を空けて表示できます。 flex: 0 0 calc(33.333% - 1rem) 左右の余白も考慮されます。Scroll Snapは、各「ページ」が幅いっぱいのスライド1枚なのか、小さなカードのグループなのかを気にしません。

次のような特性 object-fit: cover 生画像を扱う際に役立ちますこれにより、画像が引き伸ばされることなくスライド領域全体を埋め尽くすことができます。固定のアスペクト比と組み合わせることで、あらゆる画面サイズで視覚的に一貫性を保つ画像カルーセルを作成できます。

シンプルなスクロールからネイティブアプリのようなカルーセルまで

シンプルなスクロールスナップ式のカルーセルだけでも十分快適だが、最新のスペックはさらにそれを向上させる。特にChrome 135以降では、CSS Overflow Level 5のドラフトが実際の機能として登場し始めています。この仕様では、カルーセルはスクロール領域として扱われ、その周囲にオプションでブラウザが生成するUIが表示されます。

そのモデルでは、「カルーセル」は、1つのスクロール機能と最大2セットの機能から構成される。スクロールボタンとスクロールマーカー。どちらもCSSの擬似要素で作成されますが、ブラウザはスクロール要素の隣に実際のDOM要素を出力するため、ネイティブコントロールのように動作します。

重要なのは、ブラウザがセマンティクス、フォーカス順序、状態管理を自動的に設定してくれることです。挿入された要素には適切な役割があり、適切な順序でタブ移動が可能で、現在のスクロール位置を反映します。つまり、同じレベルのアクセシビリティを自作のJSライブラリで再現するのは容易ではありません。ARIA属性、フォーカスグループの動作、キーボードナビゲーション、ライブリージョンアナウンスなど、すべてが連携して動作する必要があります。

たとえまだ実験的な部分に頼る準備ができていないとしても、この方向性は重要ですこれは、カルーセル、タブ、スクロールスパイコンポーネント、および同様のUIパターンがCSSにおいて「第一級の要素」に昇格されつつあり、カスタムJavaScriptグルーコードの必要性が徐々に減少していくことを示しています。

最終的な結果として、すべてのユーザーにとってより堅牢なベースラインが実現する。JavaScriptを無効にしているユーザー、支援技術を利用しているユーザー、低電力デバイスを使用しているユーザー、不安定なネットワーク環境でブラウジングしているユーザーなど、あらゆる状況において、ネイティブスクロールとCSSスタイリングは、スクリプトを多用するウィジェットよりも優れています。

::scroll-button() を使用してスクロールボタンを追加する

一部のプラットフォームでは、スクロールバーの横に小さな矢印が表示されています。しかし、新しい ::scroll-button() 擬似要素はさらに一歩進んで、CSS がカルーセルを含むスクロール可能な領域に専用の「前へ/次へ」ボタンを定義できるようにします。

これらのCSSで定義されたスクロールボタンは、従来のスクロールバーの矢印とは異なる動作をします。コンテンツを少しずつ移動させるのではなく、クリックするたびに表示領域の約85%がジャンプします。全幅でスナップアラインされたカルーセルでは、これはスライドごとのナビゲーションボタンとほぼ同じ感覚です。

正確な単一アイテムの移動が必要な場合は、スクロールスナップオプションを組み合わせることができます。典型的なレシピは scroll-snap-type: x mandatory 容器に scroll-snap-stop: always 各スナップの子要素ごとに。こうすることで、スクロールボタンを一度押すだけで、カード間をスムーズに移動できます。

構文の観点から見ると、スクロールボタンの追加は、他の擬似要素のスタイル設定とよく似ています。スクロール可能な要素を選択します（たとえば、 .carousel）とターゲット ::scroll-button(left) or ::scroll-button(right) 戻るボタンと進むボタンを表す。最小限の例：

.carousel::scroll-button(left) { content: "⬅" / "Scroll left"; }

.carousel::scroll-button(right) { content: "⮕" / "Scroll right"; }

スラッシュで区切られたコンテンツ値を使用すると、視覚的なラベルとアクセシビリティラベルの両方を提供できます。ブラウザはその後、実際の <button> ノードはスクロールエリアの兄弟要素として配置され、その中にコンテンツが配置されます。他の要素と同様に、絶対位置指定、CSSグリッド、アンカー位置指定などを使用して、ノードの位置やスタイルを自由に設定できます。

ここではフォーカススタイリングが依然として重要です例えば、次のようなルールを適用すると、 .carousel::scroll-button(*):focus-visible { outline-offset: 5px; } ユーザーがこれらのボタンにタブ移動した際に、要素の境界線からずれた明確なフォーカスリングが表示されるようにすることで、キーボード操作の使いやすさとWCAGへの準拠を維持します。

内部的には、ブラウザはボタンの状態とスクロール可能な範囲を追跡しています。つまり、最初のスライドにいるときに「前へ」ボタンを無効にしたり、最後のスライドにいるときに「次へ」ボタンを無効にしたりすることを心配する必要はありません。プラットフォームがこれらの条件を標準的な方法で処理できるからです。

::scroll-marker() を使用して、箇条書きやラベルのナビゲーションにスクロールマーカーを追加します。

視覚的な目印（カルーセルの下に表示される点やサムネイルなど）は、今日ではユーザーにとってほぼ必須となっている。。 新しい ::scroll-marker() 擬似要素を使用すると、スクロール可能なリスト内の特定の項目にそれぞれリンクされたインジケーターを、CSSのみで生成できます。

スクロールバーのサムとは異なり、スクロールマーカーは意味的に重要なポイントを表します。各マーカーはピクセル単位の位置だけでなく、実際の子要素にも対応しているため、すべてのフレームではなく、テレビシリーズのシーズン、製品カテゴリ、物語の論理的な章といったシナリオに最適です。

マーカーは有効として表示されます <a> 要素はこれにより、ページ内ナビゲーションとスクリーンリーダーに対応した適切なセマンティクスという2つの重要な機能が無料で提供されます。アンカーリンクとよく似た動作をしますが、カルーセルでの使用に特化したいくつかの機能強化が施されています。

これらの強化点の中には、 :target-current 疑似クラスこれは、対応するアイテムが現在画面にスナップされている場合、または「アクティブなスライド」とみなされる場合に一致します。これを使用して、アクティブなマーカーを異なる背景や枠線で強調表示できます。

これを接続するために、まずマーカー群を配置する場所を定義します。 scroll-marker-group コンテナのプロパティで、通常はスクロールバーの前または後です。たとえば、 scroll-marker-group: after; DOM内でカルーセル領域の後にマーカーを配置します。

次に、マーカーを生成する必要のある個々の子供をターゲットにします。スライドが <li> 要素、例えば .carousel > li::scroll-marker 承知しました。一般的なパターンとしては、空のドットを作成する方法があります。

.carousel { scroll-marker-group: after; }

.carousel > li::scroll-marker { content: " "; }

.carousel > li::scroll-marker:target-current { background: var(--accent); }

ブラウザが生成を処理します <a> マーカーを専用の::scroll-marker-groupコンテナにグループ化します。そして、それらをフォーカスグループのように動作するキーボード操作可能な要素として表示します。スクリーンリーダーは、それらをタブリストと同様に表示できます。マーカー間でフォーカスを移動し、マーカーをアクティブにすることで特定のスライドにジャンプできます。

マーカーは点だけに限られません。 設定できます content 数字へ（"1", "2"など）、人間が読みやすい「シーズン1」や「第3章」などのラベル、あるいはeコマースの商品ギャラリーなど写真が多いレイアウト用のサムネイルギャラリーを作成するためのインライン画像など。

ボタン、マーカー、フォールバック戦略を組み合わせる

スクロールボタンとマーカーをスクロールスナップカルーセルに組み合わせると、JavaScriptソリューションと見分けがつかないようなコンポーネントが出来上がります。しかし、メンテナンスが容易で、可動部品も少ない。ユーザーは矢印をクリックしたり、箇条書きをタップしたり、タッチスクリーンでスワイプしたり、キーボードナビゲーションを使用したりするなど、すべて一貫した動作で操作できる。

この組み合わせは、一般的なパフォーマンスとUXの問題点にも対処します。スクリプトがスライドの変更を調整しないため、手動でのレイアウトの乱れは発生しません。 scrollLeft 調整やタイマーが不適切なタイミングで作動するのを防ぎます。DOMツリーが最初から準備されているため、ライフサイクルの後半で要素を挿入したり測定したりすることがなく、CLS（累積レイアウトシフト）が低減されます。

ただし、注意点があります。::scroll-button と ::scroll-marker はまだ実験段階です。 そして現在、この機能は実験的なフラグを有効にした場合にのみChrome 135以降で利用可能になります。つまり、本番環境で使用する予定がある場合は、必ず適切なフォールバック処理を設計する必要があります。

特徴検出 @supports ここであなたの最高の味方は従来のナビゲーションバー（リンク）を表示できます。 #slide1, #slide2 デフォルトでは非表示にし、ネイティブコントロールが利用可能な場合は非表示にする、といった具合です。大まかな概念パターンは次のようになります。

.carousel-nav { display: flex; gap: 0.5rem; }

@supports (scroll-button-inline: both) { .carousel-nav { display: none; } }

HTMLでは、アンカーリンク付きのシンプルなナビゲーションで十分です。:各スライドには idナビゲーションはこれらのIDを指し示します。スクロールスナップコンテナ内のアンカーにジャンプすると、スナップ動作とうまく統合されるため、ジャンプ後にスライドがきちんとスナップします。

これは、対応するブラウザで実験的な擬似要素のメリットを享受できることを意味します。—ネイティブボタン、マーカー、スクロール状態フックをすべて備えながら、他の部分では完全に機能するエクスペリエンスを提供します。ユーザーが使い物にならないスライダーに遭遇することはありません。

さらに、JavaScriptが無効になっている場合でも、これらはすべて正常に動作します。なぜなら、HTMLアンカー、CSSスクロール動作、ブラウザのスクロールエンジンに完全に依存することになるからです。ギャラリー、タイムライン、ステップバイステップのショーケースなど、多くのUXパターンではそれで十分です。

CSSのみを使用したキーフレームアニメーションによる自動再生カルーセル

カルーセルに人々が期待する一般的な機能の1つは、自動再生です。数秒後にスライドが自動的に進む。これはJavaScriptのタイマーを使って実装されることが多いが、純粋なCSSアニメーションを使って同様の動作を実現することもできる。

コツは、すべてのスライドを含むフレックス行の変形をアニメーション化することです。スライドの枚数が固定されている場合、キーフレームタイムラインを定義し、各スライドの位置に一定時間留まった後、次のスライドにジャンプするようにします。例えば、次のような感じです。

@keyframes slide { 0%, 20% { transform: translateX(0); } 25%, 45% { transform: translateX(-100%); } 50%, 70% { transform: translateX(-200%); } 75%, 95% { transform: translateX(-300%); } 100% { transform: translateX(0); } }

次に、このアニメーションをラッパーに適用します。 スライド要素を保持するもの、例： .autoplay-carousel { display: flex; animation: slide 12s infinite; }パーセンテージの範囲は、各スライドにおける「滞在時間」を定義しており、次のスライドに進む前にコンテンツを読みやすくするものです。

ユーザーが自動再生を一時停止できる方法を追加することが非常に重要です。シンプルだが効果的なパターンは、マウスオーバー時に一時停止することです。 .autoplay-carousel:hover { animation-play-state: paused; }そのため、デスクトップユーザーはコンテンツを操作する際に、その動きを停止させることができます。

アクセシビリティに関する考慮事項は、動作設定においてもさらに重要になります。尊重する prefers-reduced-motion これはベストプラクティスと考えられているため、動きの少ないアニメーションを好むユーザー向けに、アニメーションを完全に無効にすることができます。

@media (prefers-reduced-motion: reduce) { .autoplay-carousel { animation: none; } }

CSS の自動再生ソリューションは、JS が対応できるすべてのエッジケースを簡単に処理することはできません。―真に動的なスライド数や複雑なユーザー主導の一時停止／再開ロジックなどとは異なり―スクリプトを一切使用したくない場合、シンプルで静的なカルーセルには驚くほど堅牢です。

CSSのみのカルーセルとJavaScriptカルーセルの比較

カルーセルにCSSとJavaScriptのどちらを使うかは、二者択一の問題ではない。それは、要件、対象ユーザー、およびメンテナンス予算によって異なります。しかし、多くの実際のシナリオでは、CSSが圧倒的に有利になっています。

パフォーマンスの観点から見ると、CSSカルーセルが明らかに優れている。ライブラリコードの解析や実行、スクロール操作ごとのイベントリスナー、スクリプトによる調整によってトリガーされるランタイムレイアウトの再計算は一切ありません。ブラウザのスクロールエンジンは高度に最適化されたネイティブコードで記述されており、ハイエンドデスクトップから低消費電力のスマートフォンまで、あらゆるデバイスに対応するように調整されています。

アクセシビリティの観点から見ると、新しいCSSカルーセル機能は基準を大幅に引き上げています。ブラウザに標準搭載されているスクロールボタンやマーカーには、ARIAロール、キーボード操作、アナウンスなどがあらかじめ組み込まれており、これらはJavaScriptで個別に実装する必要がありません。たとえそれらがなくても、ロールやラベルを使えばスクロールスナップカルーセルをアクセシブルにすることができます。

一方で、JavaScriptは非常に高度なパターンには依然として有用である。複雑な自動再生ロジック、分析フック、カスタム物理演算が必要な場合、または共有状態を持つ複数のカルーセル（メイン画像、サムネイル行、外部ページネーションなど）を同期させる必要がある場合は、スクリプト駆動型のアプローチの方が柔軟性が高い場合があります。

しかし、重要な点は、多くの「日常的な」回転式回転台は、実際にはこのレベルの複雑さを必要としないということである。シンプルな商品ギャラリー、お客様の声のスライダー、または「注目の記事」ストリップは、通常、スクロールスナップ、いくつかのCSSルール、およびオプションのネイティブコントロールを使用して実装できます。これにより、3つのスライド間を移動するためだけに50KBの依存関係を取り込む必要がなくなります。

JavaScriptが失敗した場合の回復力も考慮すべき点です。CSSのみで構成されたカルーセルは、企業のプロキシによってJavaScriptがブロックされたり、広告ブロッカーによってJavaScriptがブロックされたり、ユーザーがページにアクセスした時点でJavaScriptがまだ読み込まれていなかったりしても、問題なく動作し続けます。このような段階的な動作低下は、ページ読み込み後に初期化フェーズを必要とするライブラリでは実現が困難です。

CSSカルーセルのアクセシビリティに関するベストプラクティス

ブラウザがアクセシビリティ面で多少役立つとしても、あなたは依然として重要な役割を担っています。 CSSカルーセルを誰にとっても使いやすいものにするには、セマンティクス、フォーカス管理、モーション感度を常に念頭に置く必要があります。

まず、メリーゴーランドに適切な目印を与えましょう。要素でラップして role="region" そして記述的な aria-label 「製品ギャラリー」や「おすすめ記事」といった表現を使うことで、スクリーンリーダーの利用者がコンテンツを見つけやすく、理解しやすくなります。

各スライドにはアクセシビリティラベルも貼付できます例えば、 aria-label 「スライド1/3」「スライド2/3」などと表示することで、ユーザーがスライドにアクセスした際に、全体の流れの中で自分がどの位置にあるかをすぐに把握できます。

目に見えるフォーカスインジケーターを忘れないでくださいインタラクティブな要素であれば、 ::scroll-button ::scroll-marker-生成されたリンク、またはフォールバックナビゲーション内の手動アンカーは、コントラストガイドラインを満たし、グローバルリセットによって削除されない明確なフォーカススタイルが必要です。

自動再生またはスクロール駆動のアニメーションを使用する場合は、モーション設定を尊重してください。。 使い方 prefers-reduced-motion 乗り物酔いしやすいユーザーへの配慮を重視するなら、アニメーションを無効化または簡略化することは必須であり、より強い効果をメディアクエリで囲むのは容易です。

最後に、タッチターゲットのサイズを考慮してください。ネイティブのスクロールマーカーでも独自のナビゲーションリンクでも、インタラクティブな領域は少なくとも44×44 CSSピクセル程度にしてください。これは通常、小さな円をぎっしり詰め込むのではなく、十分なパディングと間隔を確保することを意味します。

実際のワークフロー、ツール、そして今後の方向性

CSSカルーセルの実験を容易にするために、一部のチームはライブコンフィギュレーターツールを作成しました。 ここでは、スイッチを切り替える（スクロールボタンを有効にしたり、マーカーを切り替えたり、スナップモードを調整したり）と、その設定に必要な更新されたCSSをすぐに確認できます。こうしたプレイグラウンドは、試行錯誤しながら学ぶのに最適です。

コンフィギュレーターに加えて、CSSのみで構成されたカルーセルデモの厳選されたギャラリーが、どのようなことが可能かを示しています。タブ付きインターフェース、スクロールスパイナビゲーション、ステップベースのスライド、サムネイルギャラリーなど、さまざまなパターンが見られますが、これらはすべてスクロール領域、スナップ機能、オプションのコントロールといった共通の基盤を共有しています。

これらのデモサイトの多くは、意図的にJavaScriptを一切含まない状態で出荷されています。 その点を証明するために、HTMLとCSSだけで、リッチでインタラクティブなUIを完全に実現できます。 @layer 宣言によって、自分のデザインシステムに合ったスタイルを検査し、選択することができます。

今後を見据えると、CSSプラットフォームはすでに2つの重要な進化の方向性に取り組んでいます。1つ目は「独自の要素を持ち込む」機能で、ブラウザが生成するボタンやマーカーに頼るのではなく、独自の要素を挿入できるようになります。 <a> and <button> マークアップを維持しながら、基盤となるスクロールロジックの恩恵も受けます。

これにより、ユーティリティフレームワークを用いて構築された、ブランド化された、洗練されたデザインのコントロールへの道が開かれるだろう。 Tailwindのようなフレームワークでありながら、セマンティクスと動作はプラットフォームによって制御されるようにします。基本的にはUIを装飾するだけで、ブラウザが動作の頭脳としての役割を担うようにします。

2つ目の大きな分野は、循環スクロールまたは無限スクロールです。今日の多くのカルーセルは、最後までスクロールすると「折り返し」動作を行い、最初のスライドにシームレスに戻ります。これをきれいに実装するのは難しく、多くの場合、コンテンツの重複や複雑なロジックが必要になります。プラットフォームレベルで循環スクロールがサポートされれば、ブラウザは折り返し動作をより洗練された効率的な方法で処理できるようになります。

これらの機能が成熟し、Chromeを超えて他のエンジンにも広がるにつれてネイティブCSSカルーセルでできることと、高機能なJavaScriptライブラリが提供することとの間のギャップは縮まり続け、スクリプトを使用しないアプローチは、特殊なケースでの実験ではなく、デフォルトの出発点となるでしょう。

要するに、最新のCSSはカルーセルの構築方法を再考するあらゆる理由を与えてくれる。シンプルなスクロールスナップレイアウトから始め、サポートされている場合は実験的なボタンやマーカーを重ね合わせ、アクセシビリティのベストプラクティスを随所に散りばめることで、JavaScriptに依存することなく、レスポンシブでスムーズかつ堅牢なスライダーを実現できます。多くのプロジェクトにとって、これはページの高速化、保守すべきコードの削減、そしてすべてのユーザーにとってより安定したエクスペリエンスを意味します。