::scroll-marker

::scroll-marker は、 ::scroll-marker の content プロパティが none 以外の値に設定され、その要素の祖先要素の scroll-marker-group プロパティの値が none 以外のスクロールコンテナーがある場合（つまり、 ::scroll-marker-group 擬似要素が生成される場合）に、要素上に生成されます。

スクロールコンテナーの ::scroll-marker-group 擬似要素は、スクロールコンテナーまたはその子孫で生成された ::scroll-marker 擬似要素を自動的にすべて含みます。これにより、それらをグループとして位置指定およびレイアウトすることができ、通常、CSS カルーセルを作成してスクロール位置インジケータを作成する場合に使用されます。個々のスクロールマーカーを使用して、関連付けられたコンテンツアイテムに移動することができます。

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

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

この例では、 CSS カルーセルにスクロールマーカーを作成する方法を示します。

HTML

基本的な HTML の <ul> リストに、いくつかの <li> リストアイテムがあります。

<ul>
  <li>アイテム 1</li>
  <li>アイテム 2</li>
  <li>アイテム 3</li>
  <li>アイテム 4</li>
  <li>アイテム 5</li>
  <li>アイテム 6</li>
  <li>アイテム 7</li>
  <li>アイテム 8</li>
</ul>

CSS

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

scroll-marker-group プロパティを使用してスクロールマーカーグループを作成し、そのグループをすべてのコンテンツの後に配置します。

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

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

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

次に、 ::scroll-marker 擬似要素を使用して、赤い境界線のある正方形のマーカーを各リストアイテムに作成します。

li::scroll-marker {
  content: "";
  border: 1px solid red;
  height: 1em;
  width: 1em;
}

また、 ::scroll-marker-group 擬似要素にスタイルを適用して、スクロールマーカーを各マーカー間の間隔を 0.4em にして行の中央にレイアウトします。

::scroll-marker-group {
  display: flex;
  gap: 0.4em;
  place-content: center;
}

最後に、現在スクロールされている要素のマーカーのスタイルを、そのマーカーを :target-current 擬似クラスで対象とし、他の要素とは異なる形に設定します。

::scroll-marker:target-current {
  background: red;
}

結果

この例は、スクロールマーカーに別のスタイル設定を適用し、CSS カウンターを使用して各マーカーに表示される数値を増加させる点を除いて、前回の例と同じです。CSS の違いについては、次の節で説明します。

この例では、 counter-increment を使用して、それぞれの <li> （マーカー） で増加させたいカウンターの名前を設定します。

li {
  counter-increment: markers;
}

次に、擬似要素 ::scroll-marker の content プロパティを counter() 関数に設定し、 markers のカウンター名を引数として渡します。これにより、各マーカーに数値が挿入され、自動的に増加する効果があります。残りのスタイルはごく基本的なものですが、マーカーのスタイルを完全に設定する方法を示しています。

li::scroll-marker {
  content: counter(markers);
  font-family: sans-serif;
  width: fit-content;
  height: 1em;
  padding: 5px;
  color: black;
  text-decoration: none;
  border: 2px solid rgb(0 0 0 / 0.15);
  border-radius: 0.5em;
  background-color: #eee;
}

もう 1 つの興味深いカスタマイズとして、セレクターチェーンにそれぞれ :first-child および :last-child を挿入して、最初のリストアイテムと最後のリストアイテムのマーカーを選択するための 2 つのルールを含めています。最初のマーカーのテキストコンテンツには「最初」、最後のマーカーのテキストコンテンツには「最後」を指定しました。

li:first-child::scroll-marker {
  content: "最初";
}

li:last-child::scroll-marker {
  content: "最後";
}

より使いやすくするために、 :hover のマーカーに別の色を設定し、 :target-current 擬似クラスを使用して、現在スクロールされている要素のマーカーに別の color と background-color を設定し、ユーザーが現在表示されているアイテムを把握できるようにします。

::scroll-marker:hover {
  background-color: #dcc;
}

::scroll-marker:target-current {
  background-color: purple;
  color: white;
}

結果

• scroll-marker-group
• ::scroll-button()
• ::scroll-marker-group
• :target-current
• CSS によるカルーセルの作成
• CSS リストとカウンターモジュール
• CSS オーバーフローモジュール
• CSS Carousel Gallery (chrome.dev, 2025)