Documentation CSS

この記事で学べること

  • counter-incrementプロパティの概念と目的
  • カウンターの値を増加させる方法
  • 複数カウンターの同時操作
  • サブセクション番号付けの実装
  • ローマ数字やアルファベットでのカウンター表示

概要

CSSのcounter-incrementプロパティは、カウンターの値を変更・操作するために使用されます。このプロパティは、カスタムカウンターやリストの番号付けを制御するために便利で、自由なレイアウトを実現するために役立ちます。特に、順序付きリストやステップバイステップのコンテンツで効果的に使われます。

基本的な構文

selector {
    counter-increment: counter-name [increment-value];
}
  • counter-nameは操作するカウンターの名前です。
  • increment-valueはカウンターを増加させる量で、省略するとデフォルト値は1になります。

例 - シンプルなカウンター

以下は、カスタムカウンターを使って、段落に自動的に番号を付ける例です。

<!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; /* sectionという名前のカウンターをリセット */
        }
        p::before {
            counter-increment: section; /* sectionカウンターを1増加 */
            content: "セクション " counter(section) ". "; /* カウンターの値を表示 */
            font-weight: bold;
        }
    </style>
    <title>Counter Incrementの例</title>
</head>
<body>
    <p>最初の段落です。</p>
    <p>2番目の段落です。</p>
    <p>3番目の段落です。</p>
</body>
</html>

説明

このコードでは、bodyでcounter-resetを使い、カウンターをリセットし、名前をsectionとしています。その後、各段落の::before疑似要素でcounter-incrementを使い、カウンターを1ずつ増加させています。contentプロパティでカウンターの値を表示し、段落に番号を付けています。

複数カウンターの操作

複数のカウンターを同時に操作する場合、以下のように設定します。

selector {
    counter-increment: counter1 1, counter2 2;
}

例 - サブセクションを含むカウンター

サブセクションを含む複雑なカウンターの例を見てみましょう。

<!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 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とsub-sectionという2つのカウンターを作成しています。h1はメインの章番号をカウントし、h2はその中のセクション番号をカウントしています。結果として、h1は「章 1.」のように表示され、h2は「1-1」の形式でセクションを示します。

カスタムカウンターの応用

カウンターを使った複雑なデザインを実現するために、counter-incrementを利用するアイデアはいくつかあります。

ステップバイステップの手順表示

例えば、ウェブサイトで手順を説明する際、各ステップに自動的に番号を付ける場合です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        ol {
            counter-reset: step;
        }
        li::before {
            counter-increment: step;
            content: "ステップ " counter(step) ": ";
            font-weight: bold;
        }
    </style>
    <title>手順の表示</title>
</head>
<body>
    <ol>
        <li>最初の手順です。</li>
        <li>次の手順です。</li>
        <li>最後の手順です。</li>
    </ol>
</body>
</html>

このようにして、手順ごとに「ステップ 1:」「ステップ 2:」と自動的に番号を付けることができます。

異なるカウンターのスタイル

カウンターは数字だけでなく、ローマ数字やアルファベットにすることもできます。

p::before {
    counter-increment: section;
    content: counter(section, upper-roman) ". ";
}

counter(section, upper-roman)のように、第2引数でカウンターの形式を指定できます。lower-alpha、upper-alphaなども利用可能です。

まとめ

counter-incrementは、CSSでカウンターを操作する強力なツールです。リストやセクションに自動的に番号を付けたり、カスタムカウンターを作成して、動的で見栄えの良いコンテンツを作成するのに役立ちます。このプロパティを他のCSSプロパティと組み合わせることで、柔軟なデザインを実現できます。

ポイントの振り返り

値説明例
noneカウンターを変更しないデフォルト
<name>カウンターを1増加counter-increment: section
<name> <integer>指定値だけ増加counter-increment: section 2

関連プロパティ

プロパティ説明
counter-resetカウンターのリセット
counter-setカウンター値の直接設定
counter()カウンター値の表示

参考文献

円