::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 を使用してタブの順序の最後に配置してください。

アクセシビリティに関しては、スクロールマーカーグループおよびそれに含まれるスクロールマーカーは、 tablist/tab の意味づけでレンダリングされます。このグループに Tab キーを押すと、1 つのアイテムのように動作し （つまり、 Tab キーをもう一度押すと、グループを過ぎて次のアイテムに移動します）、左右 （または上下） のカーソルキーを使用して、異なるスクロールマーカー間を移動することができます。

例

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

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

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

HTML

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

<ul>
  <li>
    <h2>Page 1</h2>
  </li>
  <li>
    <h2>Page 2</h2>
  </li>
  <li>
    <h2>Page 3</h2>
  </li>
  <li>
    <h2>Page 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: Arial, Helvetica, 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: #eee;
  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;
}

結果

スクロールマーカーグループを anchor-positioning で位置指定

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

CSS

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

ul {
  anchor-name: --myCarousel;
}

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

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

結果

仕様書

ブラウザーの互換性

関連情報

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