CSS を使用したカルーセル

Adam Argyle

公開日: 2025 年 3 月 20 日

Chrome 135 以降では、スクロールとカルーセルのエクスペリエンスを作成するために設計された CSS Overflow 5 仕様の機能を使用できます。

この記事では、これらの新機能を使用して JavaScript なしで作成されたさまざまなスクロールとカルーセルのエクスペリエンスの概要について説明します。次の動画をご覧になり、実現できるようになったことをご確認ください。

動画では、スクロール ボタン、スクロール マーカー、スクロール駆動アニメーション、scroll-state() クエリ、:has()、グリッド、アンカーなど、さまざまな要素が調和している様子が示されています。

さらに印象的なのは、アクセシビリティに関するストーリーです。

エンジニアリング チームとアクセシビリティ チームが協力して、カルーセルのベスト プラクティスをブラウザで処理できるようにしています。これよりもアクセシビリティの高いカルーセルを作成するのは非常に困難です。

::scroll-button() と ::scroll-marker() を使用する

カルーセルは、最大 2 つの UI アフォーダンス（ボタンとマーカー）が追加されたスクロール領域です。

CSS カルーセル機能のバージョン 1 では、ボタンとマーカーは CSS から作成されます。ブラウザは、要素を兄弟として、適切なロールで、適切なタブ順序で配置し、状態を維持します。これにより、アクセシビリティ対応のカルーセルを簡単に開発できます。

• スクロール ボタン
  ブラウザが提供する、ステートフルでインタラクティブなスクロール アフォーダンス <button> 要素。コンテンツへのアクセスとスクロールを支援し、押すとスクロール領域の 85% をスクロールします。

• スクロール マーカー
  ブラウザが提供する、ステートフル ナビゲーション <a> 要素。スクロール領域内のリクエストされたアイテムのコンテンツへのアクセスを支援します。

この記事の残りの部分では、これらの新機能を使用してカルーセルを構築する方法について説明します。

スクロールから始める

サイトのスクロール領域にボタンやマーカーを追加できます。

次の CSS は、後の手順でボタンとマーカーを追加するために使用する基本的なスクロール領域を作成します。カルーセルにスクロール スナップは必須ではありませんが、この例では使用されています。カルーセルは、垂直スクローラと双方向スクローラでも機能します。

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}

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

オペレーティング システムによっては、スクロールバーの周囲にスクロール ボタンがすでに表示されている場合があります。組み込みのスクロールバー ボタンはスクロール領域を少しずつ移動させますが、CSS スクロール ボタンはスクロール領域の 85% を移動させます。

スクロール スナップポイントを使用して一度に 1 つの全幅アイテムのみを表示するカルーセルでは、アイテムごとの金額のように感じられます。一度に複数のアイテムが表示される長いリストの場合、ほぼ 1 ページ分スクロールします。

CSS を使用してスクロール ボタンを追加するには:

1. 他の疑似要素と同様に、セレクタ（右にスクロールするボタンの場合は .carousel::scroll-button(right)）を使用して追加します。
2. オプションのユーザー補助のフォールバック代替テキストを指定して content を指定します。

ブラウザは、スクローラーの兄弟として、コンテンツを含む実際のボタンを作成します。これで、これらのボタンを自由にレイアウトしたり、スタイルを設定したり、必要に応じてanchor()したりできます。次の CSS は、左スクロール ボタンと右スクロール ボタンの 2 つを作成します。

.carousel {
  …

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  &::scroll-button(*):focus-visible {
    outline-offset: 5px;
  }
}

::scroll-marker() を使用してスクロール マーカーを追加する

スクロールバーのつまみ要素と同様に、CSS スクロール マーカーは、カルーセルのサイズをヒントとして示しつつ、先頭または末尾にすばやく移動するためのアフォーダンスを提供できます。CSS スクロール マーカーは、スクロールバーとは異なります。各マーカーは、スクローラー内の任意のアイテムを表すことができるリンクであるためです。

この区別の例として、テレビシリーズのシーズンを考えてみましょう。10 個のエピソードごとにマーカーを作成するのではなく、チャプターの先頭に移動するマーカーを 2 つ作成します。

これらのマーカーはドットではなく、疑似要素の content: "Season 1" プロパティを使用しています。マーカーはサムネイルにすることもできます。これは、e コマースや写真に特化したウェブサイトのギャラリー カルーセルでよく使用されます。

マーカーはページ内 <a> リンクに似ていますが、次のような特別な機能があります。

1. これらには、マーカーがビュー内にある場合やスナップされた場合の :target-current 状態が含まれます。
2. キーボード ナビゲーションが含まれており、focusgroup のように動作します。
3. スクリーン リーダーの操作性も含まれ、タブリストなどのレポートが作成されます。

次の手順で、スクロールの重要なポイントにマーカーを追加します。

1. scroll-marker-group の配置を before または after として定義します。
2. セレクタ .carousel .point-of-interest::scroll-marker を使用して、スポットを選択します。
3. content を指定します。ユーザー補助のフォールバック代替テキスト（省略可）、数値、テキスト、空、画像。

ブラウザはすべてのマーカーを作成し、マーカー グループ コンテナに配置します。この例では、各 <li> の空のマーカーを作成して、各アイテムのマーカー ドットを作成します。

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
  }

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

マーカーのコンテナ要素は ::scroll-marker-group と呼ばれ、スクロール ボタンと同様に、スクローラーの兄弟として作成されます。このコンテナは、スタイルを設定して必要な場所に配置できます。

マーカーとボタンを同時に表示する

この 2 つを組み合わせると、カルーセルに似たエクスペリエンスになりますが、次のようなメリットがあります。

• JavaScript が無効でも動作します。
• ハイドレーションや遅延サイジング（CLS の削減）はありません。
• あらゆる種類のスクロール アニメーションとトリガーに対応しています。
• ユーザー補助機能が含まれています。
• タッチ、マウス、キーボードに対応しています。

少ない労力で、より多くのユーザーに、より早くリーチできます。

リソース

この投稿では、これらの機能を「カルーセル」と呼ぶことがほとんどですが、その機能と有用性はカルーセルのユースケースをはるかに超えています。これらの新機能の可能性を十分に理解するには、カルーセル ギャラリーを試して、スクロールスパイ、タブ、スライドなどの他のコンポーネントをご覧ください。

• ウェブ標準
  • CSS Overflow 5
  • カルーセルの説明
  • WAI Aria カルーセル
• Chrome
  • 発送予定
  • カルーセル ギャラリー
  • カルーセル設定ツール

カルーセル設定ツール

視覚的かつインタラクティブな学習者向けには、カルーセル コンフィグレータをお試しください。

スクロール ボタンなどのスイッチが用意されており、有効にすると、表示されたカルーセルにボタンがすぐに表示され、関連する CSS が使用されます。

また、カルーセルの隣接するより高度なコンセプトの例も含まれています。

• インタラクティビティ
• scroll-state
• スクロール駆動アニメーション
• とスクロール スナップ列

カルーセル ギャラリー

これらの機能がどこまでできるのかを知りたいユーザー向けのショーケース スペースです。「X はできますか？」といった質問に答えます。各デモは、インターネットで見つかったユースケースに基づいています。各デモでは、スクロール駆動アニメーション、scroll-state() クエリなどを使用して、これらのボタンとマーカーをオーケストレートする方法を示しています。

このサイトは JavaScript を一切使用していません。

例は、シンプルで楽しいものから、非常に堅牢で機能豊富なものまで多岐にわたります。ギャラリーを閲覧することで、インスピレーションを得たり、安心したりできるだけでなく、コードをコピーして使用できるように検査可能である必要があります。カルーセルの作成に役立つユーティリティの @layer utilities を見つけて検査します。

追加の課題

これらの機能が HTML と CSS のすべてにうまく統合されていることを誇りに思っています。CSS カルーセルのアクセシビリティは優れています。CSS カルーセルのパフォーマンスは、JavaScript ソリューションよりも優れています。CSS カルーセルのユーザー エクスペリエンスは自然でスムーズでリッチです。ただし、改善する方法はあります。

独自の要素を導入する

スクロール ボタンとマーカー用の独自のコンポーネントを追加できるようにする作業はすでに進行中です。つまり、アイコンなどのリッチ コンテンツを含む独自の <a> タグを指定できます。Tailwind で作成した独自の多層ボタンを使用することもできます。

循環スクロール

多くのカルーセルは、遊園地のメリーゴーラウンドのように、終点に達するとループします。この問題は認識しており、プラットフォーム ソリューションを提供する予定です。

この機能をご活用いただければ幸いです。JavaScript を無効にしているウェブユーザーは、スクロール可能な優れたエクスペリエンスを利用できるようになり、組み込みカルーセルのライフサイクルが改善されることで CLS が削減されることが期待されます。

作業の軽減、優れたユーザー エクスペリエンス、パフォーマンスの向上。