カルーセルはもうCSSだけで実装できる！疑似要素::scroll-button()と::scroll-marker()の使い方を解説

Post on:2025年5月8日

はじめに

先日リリースされたChrome 135（紹介記事）から、カルーセルやスクロールを実装するために設計されたCSS Overflow Module Level 5の機能を使用できるようになりました。

この記事では、これらの新機能を使用したスクロールとカルーセルのエクスペリエンスの概要を紹介します。今までは実装にJavaScriptが必要でしたが、JavaScriptは必要ありません。

CSSで実装したさまざまなカルーセル

上記のカルーセルはすべてCSSで実装されており、スクロールボタン、スクロールマーカー、スクロール駆動アニメーション、scroll-state()クエリ、:has()、グリッド、アンカーなどが使用されています。

そして共通する大きな特徴は、アクセシビリティです。
カルーセルのベストプラクティスはデベロッパーのチームとアクセシビリティのチームが協力することで、ブラウザによって処理されます。これよりもアクセシビリティに優れたカルーセルを作成するのは非常に難しいでしょう。

::scroll-button()と::scroll-marker()の新しい疑似要素

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

この記事で実装するカルーセルのボタンとマーカーはCSSで実装します。ブラウザはこれらの要素を兄弟として、適切な役割で、適切なタブ順序で配置し、状態を維持します。これにより、アクセシブルなカルーセルの実装が容易になります。

スクロールボタン
ブラウザが提供するインタラクティブなスクロールアフォーダンス<button>要素で、コンテンツへのアクセスを補助し、押すとスクロール領域の85％をスクロールします。
スクロールマーカー
ブラウザが提供するステートフルなナビゲーション<a>要素で、スクロール領域内の要求されたコンテンツへのアクセスを支援します。

スクロールボタン::scroll-button()とスクロールマーカー::scroll-maker()の新しい疑似要素を使用して、CSSだけでカルーセルを実装する方法を解説します。

CSSでスクローラーを実装

Webページい上の任意のスクロール領域にボタンとマーカーを追加できます。

後のステップでボタンやマーカーを追加するために使用する基本的なスクロール領域を作成します。まずは基本となるHTMLから。

<div class="scroll-layout">
  <div class="carousel">
    <ul class="content">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>
</div>

</ul>

</div>

ここでは水平方向のスクロールを設定します、もちろん垂直方向でも機能します。また、スクロールスナップは必須ではありませんが、ここでは使用しています。

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

.carousel {

overflow-x: auto;

scroll-snap-type: x mandatory;

> li {

scroll-snap-align: center;

}

これで、水平方向の左右にスクロールするコンテンツができました。
実際の動作は、下記をご覧ください。

See the Pen
CSS Carousel -1. scrollbar by coliss (@coliss)
on CodePen.

CSSでスクロールボタンを実装

次に、::scorll-button()疑似要素でスクロールボタンを実装します。OSによってはこの時点ですでにスクロールボタンが配置されている場合があります。組み込みのスクロールバーボタンはスクロール領域を移動できますが、CSSで実装するスクロールボタンはスクロール領域の85％をページ分割します。

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

CSSでスクロールボタンを追加するには

他の疑似要素と同様に、セレクタを使用して追加します。右にスクロールするボタンの場合は.carousel::scroll-button(right)です。
contentを使用して、オプションでアクセシブルなフォールバック用のaltテキストを設定します。

ブラウザはスクローラーの兄弟として、コンテンツを含む実際のボタンを作成します。あとは必要に応じて配置を設定したり、スタイルを設定したり、anchor()を設定することができます。下記のCSSでは、左と右にスクロールボタンを作成しています。

.carousel {
  …

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

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

.carousel {

…

&::scroll-button(left) {

content: "⬅" / "Scroll Left";

}

&::scroll-button(right) {

content: "⮕" / "Scroll Right";

}

&::scroll-button(*)::focus-visible {

outline-offset: 5px;

}

これで、スクロール領域の下部にスクロールボタンを実装しました。
実際の動作は、下記をご覧ください。

See the Pen
CSS Carousel -2. scroll button by coliss (@coliss)
on CodePen.

CSSでスクロールマーカーを実装

スクロールバーのサム要素と同様に、CSSによるスクロールマーカーはカルーセルの全体サイズを示唆することができ、最後または最初に素早く移動するためのアフォーダンスも提供します。スクロールバーと異なる点は、各マーカーはリンクとしても機能するため、スクロール領域内の任意のアイテムを表示することができます。

マーカーはページ内リンクの<a>要素に似ていますが、特別な機能がいくつかあります。

マーカーが表示またはスナップされているときのために:target-current状態が含まれます。
キーボードナビゲーションが含まれ、フォーカスグループのように動作します。
スクリーンリーダーのエクスペリエンスも含まれており、タブリストのようにレポートされます。

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

scroll-marker-groupの配置をbeforeまたはafterに設定します。
.carousel .point-of-interest::scroll-markerセククタを使用して、注目ポイントを選択します。
contentを使用して、オプションでアクセシブルなフォールバック用のaltテキストを設定します。

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

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
    
    &:target-current {
      background: var(--accent);
    }
  }
}