Documentation CSS

この記事で学べること

  • counter-resetプロパティの概念と目的
  • カウンターの初期化と開始値の設定
  • 複数カウンターの同時リセット
  • ネストされたセクション番号付け
  • FAQ形式でのカウンター活用

概要

CSSのcounter-resetプロパティは、カウンターの値をリセットし、指定したカウンターを新たに初期化するために使用されます。カウンターは、リストや段落、セクションごとに自動的に番号を付けたり、ページ内でカスタム番号を生成する際に役立つ機能です。このプロパティを使うことで、ページ内のカウンターを任意のタイミングでリセットして、柔軟に番号を振り直すことができます。

基本的な構文

selector {
    counter-reset: counter-name [initial-value];
}
  • counter-nameはリセットしたいカウンターの名前です。
  • initial-valueはリセット後にカウンターが開始する数値で、省略するとデフォルトで0になります。

例 - シンプルなカウンターのリセット

以下は、カスタムカウンターを作成し、段落に自動で番号を付ける例です。段落ごとに番号が振られ、counter-resetを使ってカウンターをリセットしています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            counter-reset: section; /* カウンターをリセット */
        }
        p::before {
            counter-increment: section; /* カウンターを1増加 */
            content: "セクション " counter(section) ". "; /* カウンターの値を表示 */
        }
    </style>
    <title>Counter Resetの例</title>
</head>
<body>
    <p>最初の段落です。</p>
    <p>2番目の段落です。</p>
</body>
</html>

説明

counter-resetプロパティをbodyに適用し、sectionというカウンターを初期化しています。各段落ではcounter-incrementを使ってカウンターを1ずつ増加させ、::before疑似要素でカウンターの値を表示しています。このコードによって、各段落の前に「セクション 1.」「セクション 2.」と番号が付けられます。

複数のカウンターをリセットする

counter-resetでは複数のカウンターを同時にリセットすることができます。例えば、メインセクションとサブセクションのカウンターをリセットする場合の例を見てみましょう。

selector {
    counter-reset: main-section 1 sub-section 0;
}

例 - メインとサブのカウンターのリセット

次に、メインの章とサブセクションごとに番号を付ける例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            counter-reset: main-section; /* メインセクションのカウンターをリセット */
        }
        h1 {
            counter-reset: sub-section; /* 各章ごとにサブセクションのカウンターをリセット */
        }
        h1::before {
            counter-increment: main-section; /* メインセクションのカウンターを増加 */
            content: "章 " counter(main-section) ". ";
        }
        h2::before {
            counter-increment: sub-section; /* サブセクションのカウンターを増加 */
            content: counter(main-section) "-" counter(sub-section) ". ";
        }
    </style>
    <title>メインとサブのカウンターリセットの例</title>
</head>
<body>
    <h1>第1章</h1>
    <h2>セクション1-1</h2>
    <h2>セクション1-2</h2>
    <h1>第2章</h1>
    <h2>セクション2-1</h2>
</body>
</html>

説明

この例では、main-sectionというカウンターがbodyでリセットされ、各h1タグでsub-sectionがリセットされています。これにより、メインの章ごとにサブセクションのカウントがリセットされ、番号が「1-1」「1-2」「2-1」という形式で表示されます。

カウンターを特定の値から開始する

カウンターは、単にリセットするだけでなく、特定の数値から開始することも可能です。たとえば、以下のようにcounter-resetでカウンターを3から開始できます。

selector {
    counter-reset: section 3;
}

例 - 特定の値からカウンターを開始

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            counter-reset: section 3; /* カウンターを3から開始 */
        }
        p::before {
            counter-increment: section;
            content: "セクション " counter(section) ". ";
        }
    </style>
    <title>カウンターの値を変更する例</title>
</head>
<body>
    <p>この段落は4番目になります。</p>
    <p>この段落は5番目です。</p>
</body>
</html>

説明

この例では、counter-resetを使ってカウンターを3からスタートさせています。そのため、最初の段落は「セクション 4.」として表示されます。カウンターをリセットする際に、任意の数値を指定できるため、特定の順序で番号を付けたい場合に便利です。

応用例 - 複雑なカウンター管理

counter-resetは、複雑なカウンター管理にも活用できます。たとえば、FAQ形式で質問ごとに番号を自動的に付ける場合の例を紹介します。

FAQ形式でのカウンターの利用例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .faq {
            counter-reset: question; /* FAQの質問ごとにカウンターをリセット */
        }
        .faq-item::before {
            counter-increment: question; /* カウンターを増加 */
            content: "質問 " counter(question) ": "; /* カウンターの値を表示 */
            font-weight: bold;
        }
    </style>
    <title>FAQカウンターの例</title>
</head>
<body>
    <div class="faq">
        <div class="faq-item">このプロパティの使い方は？</div>
        <div class="faq-item">カウンターをリセットする方法は？</div>
        <div class="faq-item">他のプロパティと組み合わせて使えますか？</div>
    </div>
</body>
</html>

説明

この例では、counter-resetでquestion というカウンターを作り、各faq-itemに対して自動的に質問番号が付けられています。これにより、FAQリスト内で「質問 1:」「質問 2:」のように番号を自動生成することができます。

まとめ

counter-resetプロパティは、カウンターの値を初期化し、特定の要素内で新たなカウントを開始するために非常に便利です。カウンターは順序付きリストやカスタムナンバリングなど、さまざまな用途に活用でき、counter-incrementと組み合わせることで、さらに高度なカスタムカウンターを実現できます。

ポイントの振り返り

値説明例
noneカウンターをリセットしないデフォルト
<name>カウンターを0にリセットcounter-reset: section
<name> <integer>指定値にリセットcounter-reset: section 3

関連プロパティ

プロパティ説明
counter-incrementカウンターの増加
counter-setカウンター値の直接設定
counter()カウンター値の表示

参考文献

円