1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. プロパティ
  5. scroll-target-group

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

scroll-target-group

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

scroll-target-group は CSS のプロパティで、要素がスクロールマーカーグループコンテナーであるかどうかを指定します。

構文

css
/* キーワード値 */
scroll-target-group: none;
scroll-target-group: auto;

/* グローバル値 */
scroll-target-group: inherit;
scroll-target-group: initial;
scroll-target-group: revert;
scroll-target-group: revert-layer;
scroll-target-group: unset;

scroll-target-group プロパティは、以下のキーワード値のいずれかで指定します。

値

none

この要素はスクロールマーカーグループコンテナーではありません。

auto

この要素はスクロールマーカーグループコンテナーです。

解説

要素に scroll-target-group: auto を設定すると、その要素はスクロールマーカーグループコンテナーとして指定されます。これにより、ページ上の要素間（カルーセルアイテムや記事セクションなど）を移動できる一連のナビゲーション項目がグループ化され、現在表示されている要素が強調表示されます。

コンテナー内のフラグメント識別子を持つ <a> 要素は、自動的にスクロールマーカーとして設定されます。現在表示されているスクロールターゲットを持つアンカー要素は、:target-current 擬似クラスを介してスタイル設定が可能です。

scroll-target-group と scroll-marker-group の違い

scroll-target-group を使用して作成されたスクロールマーカーグループコンテナーは、scroll-marker-group プロパティを使用して作成されたものとよく似ている動作をしますが、いくつかの違いがあります。

  • scroll-target-group では、独自のマークアップを作成してスクロールマーカーグループコンテナーとスクロールマーカーを表す必要があるのに対し、scroll-marker-group はコンテナー (::scroll-marker-group) とマーカー（::scroll-marker の 1 つ以上のインスタンス）を表現する一連の擬似要素を自動的に作成します。 これらは自動的に、期待されるナビゲーションを生成されたスクロールコンテナーに関連付けます。scroll-marker-group を使用すると、自分自身でマークアップを作成する必要がないため、より迅速に設定できます。ただし、独自のマークアップを作成し、scroll-target-group を介してスクロールマーカーグループのコンテナーとして設定することで、より高度な制御と柔軟性が得られます。
  • scroll-target-group で指定されたスクロールマーカーは特別なナビゲーション動作を持ちませんが、scroll-marker-group で生成されたマーカーには自動的に tablist/tab の意味づけが適用されます。これは、タブ順序において単一のアイテムと同様に振る舞い、ユーザーが矢印キーでスクロールマーカー間を移動することが可能であることを意味します。繰り返しになりますが、scroll-marker-group は有用なデフォルト動作を提供しますが、scroll-target-group で指定されたマーカーに対しては、代替の意味や動作を柔軟に提供することが可能です。

公式定義

初期値none
適用対象すべての要素
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

scroll-target-group = 
  none  |
  auto
この構文は CSS Overflow Module Level 5 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

基本的な scroll-target-group の使用

この例は、さまざまなセクションにリンクする目次を含むページを表示させています。

HTML

このマークアップは、コンテンツを含む一連の <section> 要素と、これを順序付きリスト (<ol>/<li>) および <a> 要素を用いて作成する目次を設定しています。

html
<nav id="toc">
  <ol>
    <li><a href="#intro">まえがき</a></li>
    <li><a href="#ch1">第 1 章</a></li>
    <li><a href="#ch2">第 2 章</a></li>
    <li><a href="#ch3">第 3 章</a></li>
    <li><a href="#ch4">第 4 章</a></li>
  </ol>
</nav>
<section id="intro" class="chapter">
  <h1>Prose of the century</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet.
  </p>
</section>
<section id="ch1" class="chapter">
  <h2>第 1 章</h2>

  <!-- ... -->
</section>
<section id="ch2" class="chapter">
  <h2>第 2 章</h2>

  <!-- ... -->
</section>

<!-- ... -->

CSS

簡潔さを重視し、スタイル設定の大部分は省略しています。この例で最も重要なのは、scroll-target-group: auto を <ol> に設定し、スクロールマーカーグループコンテナーとして機能させ、ブラウザーのアルゴリズムを起動している点です。これにより、どの <a> 要素が :target-current（つまり、指定されたリンクのターゲット）であるかを随時計算します。次に、:target-current 擬似クラスを red の color でスタイル設定して、明確に目立つようにしています。

css
ol {
  scroll-target-group: auto;
}

:target-current {
  color: red;
}

例

リンクをアクティブにしたりスクロールしたりして操作してみてください。それぞれの場合、赤いハイライトがリンク間を移動され、現在示されている節と一致する様子が確認できます。

scroll-target-group のスクロールマーカーのある CSS カルーセル

この例では、scroll-target-group を使用して CSS カルーセルのスクロールマーカーを作成する方法を示してします。この例のコードは、単一ページのカルーセルの例と似ています。下記では、その違いについて説明します。

HTML

このマークアップでは、それぞれのページを定義するリストアイテムにIDが設定されており、順序付きリストが追加されています。このリストを CSS を使用してスクロールマーカーグループコンテナーに変換します。

html
<h1>単一ページ表示のカルーセル</h1>
<ul>
  <li id="page1">
    <h2>ページ 1</h2>
  </li>
  <li id="page2">
    <h2>ページ 2</h2>
  </li>
  <li id="page3">
    <h2>ページ 3</h2>
  </li>
  <li id="page4">
    <h2>ページ 4</h2>
  </li>
</ul>
<ol>
  <li><a href="#page1">1</a></li>
  <li><a href="#page2">2</a></li>
  <li><a href="#page3">3</a></li>
  <li><a href="#page4">4</a></li>
</ol>

CSS

スクロールマーカーグループコンテナーとスクロールマーカーは、scroll-target-group を <ol> 要素に設定することで作成します。これらのスタイル設定に関する残りのコードは、::scroll-marker-group および ::scroll-marker 擬似要素ではなく、自身の選択要素（<ol> や <a>）を対象としている点を除き、よく似ている。

:target-current、a:hover、a:focus の各状態にスタイルを設定し、現在示されているページやホバー/フォーカスされているリンクを示すとコードは完成です。

css
ol {
  position: absolute;
  position-anchor: --my-carousel;
  top: calc(anchor(bottom) - 90px);
  justify-self: anchor-center;
  display: flex;
  justify-content: center;
  gap: 20px;

  list-style-type: none;
  padding: 0;
  scroll-target-group: auto;
}

ol a {
  width: 28px;
  height: 28px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding-top: 4px;
  color: black;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 50%;
}

ol a:hover,
ol a:focus,
:target-current {
  background-color: black;
  color: white;
}

結果

3 つの方法でナビゲーションを試してみてください。スクロールマーカーリンクの起動、水平スクロール、両側のスクロールボタンを押すことです。いずれの場合も、ハイライトがリンク間を移動し、現在示されているセクションと一致するかどうかを確認できるでしょう。

仕様書

Specification
CSS Overflow Module Level 5
# scroll-target-group

ブラウザーの互換性

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content