::scroll-marker-group

構文

::scroll-marker-group {
  /* ... */
}

解説

スクロールコンテナーの ::scroll-marker-group 擬似要素は、スクロールマーカーグループコンテナーを表します。これは、自身またはその子孫で生成された ::scroll-marker 擬似要素を自動的に含むコンテナーです。これにより、それらをグループとして位置指定およびスタイル設定することができます。この擬似要素は通常、CSSカルーセルを作成する際にスクロール位置インジケーターを提供するために使用されます。

スクロールコンテナーは、 scroll-marker-group プロパティを none 以外の値に設定して、 ::scroll-marker-group 擬似要素が生成されるようにする必要があります。 scroll-marker-group の値は、カルーセルのタブ順およびレイアウトボックスの順（DOM 構造ではない）で、スクロールマーカーグループコンテナーが表示される位置を決定します。before は先頭に配置し、after は末尾に配置します。

アクセシビリティのベストプラクティスとして、スクロールマーカーグループコンテナの視覚的表示位置をタブ順序と一致さ せましょう。グループをコンテンツの先頭に位置指定する場合は、before を使用してタブ順序の先頭に位置指定します。グループをコンテンツの末尾に位置指定する場合は、after を使用してタブ順序の末尾に位置指定します。

スクロールマーカーグループコンテナーが scroll-marker-group プロパティを使用してスクロールコンテナー上に作成されると、スクロールコンテナーは scroll-marker-group プロパティを付けて作成される tablist/tab の意味づけでレンダリングされます。キーボードの Tab キーで移動すると、関連付けられたスクロールマーカーとスクロールボタンの状態が、同時に期待通りに変更されます。スクロールマーカーは、タブで移動することも可能です。

例

CSS によるカルーセルの作成に、 ::scroll-marker 擬似要素のその他の使用例があります。

カルーセルのスクロールマーカーの作成

このデモは、各アイテムがページ全体を占める単一のページのカルーセルです。ユーザーがマーカーをクリックして任意のページに移動できるように、スクロールマーカーを記載しました。

HTML

HTML は、順序なしリストで構成されており、各リストアイテムにはサンプルコンテンツが含まれています。

<ul>
  <li>
    <h2>ページ 1</h2>
  </li>
  <li>
    <h2>ページ 2</h2>
  </li>
  <li>
    <h2>ページ 3</h2>
  </li>
  <li>
    <h2>ページ 4</h2>
  </li>
</ul>

CSS

まず、 <ul> をカルーセルに変換するために、 display を flex に設定して、単一で折り返さない <li> 要素の列を作成します。 overflow-x プロパティは auto に設定します。これは、アイテムがコンテナーから X 軸方向にオーバーフローした場合、コンテンツが水平方向にスクロールすることを意味します。次に、 <ul> をスクロールスナップコンテナーに変換し、コンテナーが scroll-snap-type 値が mandatory に設定されている場合に、アイテムが常に所定の場所にスナップするようにします。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Helvetica", "Arial", sans-serif;
}

ul {
  display: flex;
  gap: 4vw;
  padding-left: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

次に、 <li> 要素にスタイルを設定し、 flex プロパティを使用して、コンテナーの幅の 100% にします。 scroll-snap-align の値を start に設定することで、コンテンツがスクロールされると、左端に表示されているアイテムの左側がコンテナーの左端にスナップします。

li {
  list-style-type: none;
  background-color: #eeeeee;
  flex: 0 0 100%;
  height: 200px;
  padding-top: 20px;
  scroll-snap-align: start;
  text-align: center;
}

次に、リストの scroll-marker-group プロパティを after に設定します。これにより、 ::scroll-marker-group 擬似要素が、タブ順およびレイアウトボックスの順でリストの DOM コンテンツの後に配置されます。これは、スクロールボタンよりも後に表示されることを意味します。

ul {
  scroll-marker-group: after;
}

次に、リストの ::scroll-marker-group 擬似要素は、フレックスボックスを使用してレイアウトされ、 justify-content の値は center、 gap は 20px に設定されています。これにより、その子要素（::scroll-marker 擬似要素）は、 ::scroll-marker-group 内に中央に配置され、各要素間に間隔が確保されます。

ul::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 20px;
}

次に、スクロールマーカー自体のスタイルを設定します。それぞれの見た目は、width、height、background-color、border、border-radius を設定することで処理しますが、実際に生成されるように、 none 以外の値を content プロパティに設定する必要があります。

li::scroll-marker {
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 50%;
  content: "";
}

最後に、 :target-current 擬似クラスを使用して、現在表示されている「ページ」に対応するスクロールマーカーを選択し、ユーザーがコンテンツをスクロールした位置を強調表示します。この場合、 background-color を black に設定して、塗りつぶされた円としてスタイルを設定しています。

li::scroll-marker:target-current {
  background-color: black;
}

結果

スクロールマーカーグループコンテナーをアンカー位置指定

この例は、前回の例を拡張し、 CSS アンカー位置指定を使用して、カルーセルに対してスクロールマーカーグループを相対的に位置指定する方法を示しています。

CSS

リストの ::scroll-marker-group 擬似要素は、 <ul> の anchor-name と一致する position-anchor の値をグループに与えることで、CSS アンカー位置指定を使用してカルーセルに対して相対的に位置指定されます。 次に、 anchor() 関数を記載した top 値を設定して、グループをブロック方向でスクロールコンテナーに対して相対的に位置指定します。また、 justify-self 値を anchor-center に追加して、グループをインライン方向でスクロールコンテナーの中心に配置します。

ul {
  anchor-name: --my-carousel;
}

ul::scroll-marker-group {
  /* 前の例より */
  display: flex;
  gap: 20px;

  position: absolute;
  position-anchor: --my-carousel;
  top: calc(anchor(bottom) - 70px);
  justify-self: anchor-center;
}

結果

仕様書

ブラウザーの互換性

関連情報

• scroll-marker-group
• scroll-target-group
• ::scroll-button()
• ::scroll-marker
• ::column
• :target-current
• :target-before
• :target-after
• CSS によるカルーセルの作成
• CSS アンカー位置指定モジュール
• CSS オーバーフローモジュール
• CSS Carousel Gallery (chrome.dev, 2025)