公開日: 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 つのみのカルーセルの場合、アイテムごとに金額が表示されます。一度に複数のアイテムが表示される長いリストの場合、ほぼページ全体がスクロールされます。
CSS を使用してスクロールボタンを追加するには:
- 他の疑似要素と同様に、セレクタを使用して追加します。右にスクロールするボタンの場合は
.carousel::scroll-button(right)です。 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> リンクに似ていますが、いくつかの特別な機能があります。
- マーカーがビュー内にある場合やスナップされた場合の
:target-current状態が含まれます。 - キーボード ナビゲーションが含まれており、フォーカスグループのように動作します。
- スクリーン リーダーのサポートが含まれており、タブリストなどのレポートが生成されます。
スクロール ビュー内の重要なスポットにマーカーを追加する手順は次のとおりです。
scroll-marker-groupのプレースメントをbeforeまたはafterとして定義します。- セレクタ
.carousel .point-of-interest::scroll-markerを使用してスポットを選択します。 contentを指定し、オプションでユーザー補助対応の代替テキスト（数字、テキスト、空白、画像）を指定します。
ブラウザはすべてのマーカーを作成し、マーカーグループ コンテナに配置します。この例では、<li> ごとに空のマーカーを作成し、アイテムごとにマーカー ドットを作成します。
.carousel {
…
scroll-marker-group: after;
> li::scroll-marker {
content: ' ';
&:target-current {
background: var(--accent);
}
}
}
マーカーを含む要素は ::scroll-marker-group と呼ばれ、スクロールボタンと同様にスクロールバーの兄弟として作成されます。このコンテナは、スタイルを設定したり、必要に応じて配置したりできます。
マーカーとボタンを同時に押す
これらを組み合わせると、カルーセルのようなエクスペリエンスになりますが、次のような利点があります。
- JavaScript が無効でも動作します。
- ハイドレーションや遅延サイズ設定なし（CLS を削減）。
- あらゆる種類のスクロール アニメーションとトリガーに対応しています。
- ユーザー補助機能が含まれています。
- タッチ、マウス、キーボードに対応している。
より少ない作業で、より多くのユーザーに、より速くリーチ。
リソース
この記事では、これらの機能を主に「カルーセル」と呼んでいますが、その機能と有用性はカルーセルのユースケースをはるかに超えています。これらの新機能の可能性をすべて把握するには、カルーセル ギャラリーをお試しください。また、スクロールスパイ、タブ、スライドなどの他のコンポーネントもご覧ください。
- ウェブ標準
- Chrome
カルーセル コンフィギュレータ
視覚的かつインタラクティブな学習を希望される場合は、カルーセル コンフィギュレータをお試しください。
スクロール ボタンなどのスイッチが用意されており、有効にすると、表示されるカルーセルにすぐにボタンと、関連する CSS が表示されます。
また、カルーセルに関連する高度なコンセプトの例も含まれています。
カルーセル ギャラリー
これらの機能をどこまで活用できるか気になるユーザー向けのショーケース スペース。たとえば「X はできますか？」などの質問に回答します。各デモは、インターネットで見つかったユースケースに基づいています。各デモでは、スクロール駆動アニメーション、scroll-state() クエリなどを使用して、これらのボタンとマーカーをオーケストレートする方法を示しています。
サイト全体が JavaScript フリーです。
例は、シンプルなものから、非常に堅牢で機能豊富なものまでさまざまです。ギャラリーを閲覧する際には、インスピレーションを得たり、安心感を得たりできるものでなければなりません。もちろん、コードを検査して使用することもできます。カルーセルの作成に役立つユーティリティがないか @layer utilities を探して調べます。
追加の課題
これらの機能は、HTML と CSS のすべてと適切に統合されています。CSS カルーセルのユーザー補助機能は最高レベルです。CSS カルーセルのパフォーマンスは、JavaScript ソリューションよりも優れています。CSS カルーセルのユーザー エクスペリエンスは、自然でスムーズ、かつリッチです。ただし、改善できる点もあります。
独自の要素を使用する
スクロール ボタンとマーカーに独自のコンポーネントを追加できるようにする作業はすでに進められています。つまり、アイコンなどのリッチなコンテンツを含む独自の <a> タグを指定できます。Tailwind で作成した独自のマルチレイヤ ボタンを使用することもできます。
循環スクロール
多くのカルーセルは、フェアで乗るカルーセルのように、最後まで回ると元の位置に戻ります。Google ではこの問題に注目しており、プラットフォーム ソリューションを提供していく予定です。
この機能は便利なものですが、今後は、JavaScript が無効になっているすべてのウェブユーザーが、優れたスクロール エクスペリエンスを利用できるようになります。また、組み込みカルーセルのライフサイクルのタイミングが改善されることで、CLS の低減も期待できます。
作業量の削減、優れたユーザー エクスペリエンス、パフォーマンスの向上。