CSS カウンター

1. CSS カウンターとは？

CSS カウンター（CSS Counters）は、CSS によって管理される「変数」のようなもので、CSS ルールに従って値を増加させ、要素が何回使用されたかを追跡することができます。

これにより、HTML の構造を手動で変更することなく、見出しやリスト、図表などに自動的に番号（連番）を振ることが可能になります。

2. 自動ナンバリングの使用方法

CSS カウンターを使用するには、以下のプロパティと関数を組み合わせて利用します：

• counter-reset: カウンターを初期化またはリセットします。通常、親要素に指定します。
• counter-increment: カウンターの値を増加させます。
• content: 擬似要素（::before や ::after）と組み合わせて、生成されたコンテンツを挿入します。
• counter() または counters() 関数: カウンターの値を content プロパティに出力します。

以下の例では、ページ内のすべての <h2> 要素の前に「Section [番号]:」というテキストを自動的に挿入します。

body {
  /* "section" という名前のカウンターを 0 にリセット */
  counter-reset: section;
}

h2::before {
  /* "section" カウンターの値を 1 ずつ増加 */
  counter-increment: section;
  /* カウンターの値を表示 */
  content: "Section " counter(section) ": ";
}

3. ネストされたカウンター (Nested Counters)

CSS カウンターの真価は、ドキュメントの階層構造（章、節、項など）に合わせて自動的に「1.1」や「1.2.1」といった形式の番号を振れる点にあります。

counters() 関数を使用すると、ネストされたカウンター（入れ子構造）の各階層の間に任意の文字列（ピリオドなど）を挿入できます。

ol {
  /* 各 ol 要素ごとに新しいカウンター（section）をリセット */
  counter-reset: section;
  list-style-type: none;
}

li::before {
  /* カウンターを増加 */
  counter-increment: section;
  /* ネストされた全階層のカウンターをピリオドで繋いで表示 */
  content: counters(section, ".") " ";
}

4. カウンターのスタイリング

カウンターによって出力されるコンテンツは、通常のテキストと同様にスタイリングが可能です。擬似要素に対して color、font-weight、background-color などを適用することで、番号部分を強調したデザインを実現できます。

body {
  counter-reset: main-counter;
}

h1::before {
  counter-increment: main-counter;
  content: "Step " counter(main-counter) " - ";
  /* 番号部分の色とフォントサイズをカスタマイズ */
  color: #04AA6D;
  font-size: 1.2em;
  font-weight: bold;
}

5. CSS カウンタープロパティの一覧

これらのプロパティをマスターすることで、静的な HTML ドキュメントに対して動的で整然としたナンバリングを付与し、保守性の高い Web ページを構築できるようになります。