CSSカウンターとは

CSS カウンターは、Webページ内の要素に自動で連番を付けたり、階層的な番号付け（例: 1.、1.1.、1.1.1.）を行ったりするために使われる、CSS の機能です。プログラミングでいう変数に似たもので、特定の要素が出現するたびにその値を増やしたり（インクリメント）、リセット（初期化）したりすることができます。 CSS カウンターは、HTMLに直接番号を書き込む手間を省き、文書構造と見た目の番号付けを分離できるため、特に長文のドキュメントやレポートなどで非常に便利です。

CSS カウンターを使うには、主に 3 つのステップと、それに対応するプロパティが必要です。

CSS カウンターの主要な構成要素

リセット（初期化）
CSS プロパティ：counter-reset
カウンターをゼロに設定し、番号付けの開始点を定義します。通常、親要素やセクションの開始点に適用します。
インクリメント（加算）
CSS プロパティ：counter-increment
特定の要素が出現するたびにカウンターの値を増やします。通常、番号を付けたい要素自体に適用します。
表示
CSS プロパティ：content と counter()/counters()
擬似要素 (::before または ::after) の中で counter() 関数や counters() 関数を使い、現在のカウンターの値を画面に表示します。

具体的な動作の例

例えば、「セクション内の見出しに自動で番号を付ける」場合、ロジックは以下のようになります。

1. リセット（初期化）：: 親要素（例: <div class="section">）に counter-reset: my-item; を設定し、カウンターを 0 にリセット。
2. インクリメント（加算）：: 各見出し（例: <h2>）に counter-increment: my-item; を設定。
3. 表示：: 見出しの擬似要素（例: h2::before）に content: counter(my-item) ". "; を設定し、「1. 」「2. 」「3. 」のように表示させる。

階層的なカウンター (counters() 関数)：
章・節のような入れ子の番号付け（例: 1.2.3）をしたい場合は、counter() ではなく counters() 関数を使います。これは、複数のカウンターの値を自動的に連結して表示してくれます。

CSSカウンターで番号付き3種

普通に番号を振るだけなら「ol」で十分ですが、デザイン上自由に番号を制御したい場合や、見出し・段落に番号を付けたい場合に「カウンター + 擬似要素」を使います。以下のセクションでは、この手法を使った「ぶら下げインデント」の番号付きや、階層番号など、3 つの具体的な例を紹介していきます。

ぶら下げインデント
階層番号付き見出し
画像連番表示

ぶら下げインデント

「ぶら下げインデント：番号付き」は、シンプルな番号付き見出し、手順解説（手順 1、手順 2 …）、ブログや記事の小見出し番号などに向いています。

デモ

はじめに

準備

手順

まとめ

CSS


.section {
  counter-reset: chapter; /* "chapter" カウンターを 0 に */
}
h2.hanging-indent {
  counter-increment: chapter;  /* カウンターを 1 増やす */
  position: relative;          /* 擬似要素の基準 */
  padding-left: 3em;           /* 本文の開始位置を右にずらす */
  text-indent: 0;              /* 1 行目のインデントなし */
  line-height: 1.4;            /* 読みやすく */
}
h2.hanging-indent::before {
  content: counter(chapter) "."; /* カウンター番号＋ピリオド */
  position: absolute;
  left: 0;                       /* 左端に固定 */
  top: 5px;
  width: 2.5em;                  /* 番号スペース */
  text-align: right;             /* 数字の右端を本文の開始位置に揃える */
}

HTML


<div class="section">
  <h2 class="hanging-indent">はじめに</h2>
  <h2 class="hanging-indent">準備</h2>
  <h2 class="hanging-indent">手順</h2>
  <h2 class="hanging-indent">まとめ</h2>
</div>

解説

仕組み

.section のたびに counter-reset: chapter; でカウンターをリセット
h2.hanging-indent が呼ばれるたびに counter-increment: chapter
::before で「1.」「2.」のように単一番号を表示

特徴

単純な連番をつけるための最小構成
段落・見出しに番号を振る用途に適している
ぶら下げインデント（ハンギングインデント）により、番号と本文の開始位置をきれいに揃えられる

短所

章番号・階層構造には対応できない
見出しが複数種類（h2, h3 など）に増えると、拡張しづらい
同じページ内で複数の異なるカウンター管理をしたい場合には不向き

階層番号付き見出し

「ぶら下げインデント：章番号付き」は、書籍風のドキュメント（1-1、1-2、1-3…）、マニュアル、長文の学習資料など、章と節の階層を明確に示したい場合や、「第 1 章」「第 2 章」などの章タイトルとセットで使う UI に向いています。

デモ

第1章

はじめに

準備

手順

第2章

まとめ

次のステップ

CSS


.section {
  counter-reset: section;       /* この章内の h2 番号をリセット */
  counter-increment: chapter;   /* 章番号を 1 増やす */
  margin-bottom: 2em;
}
h2.hanging-indent {
  counter-increment: section;   /* h2 番号を 1 増やす */
  position: relative;
  padding-left: 3em;            /* 本文開始位置 */
  text-indent: 0;
  line-height: 1.4;
}
h2.hanging-indent::before {
  content: counter(chapter) "-" counter(section) ". ";
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5em;
  text-align: right;
}

HTML


<div class="section">
  <h1>第1章</h1>
  <h2 class="hanging-indent">はじめに</h2>
  <h2 class="hanging-indent">準備</h2>
  <h2 class="hanging-indent">手順</h2>
</div>

<div class="section">
  <h1>第2章</h1>
  <h2 class="hanging-indent">まとめ</h2>
  <h2 class="hanging-indent">次のステップ</h2>
</div>

解説

仕組み

.section が呼ばれるたびに

counter-reset: section; で小番号（節番号）をリセット
counter-increment: chapter; で大番号（章番号）を増加
h2.hanging-indent で小番号を増やす

::before で

chapter-section → 1-1, 1-2, 1-3 …

特徴

階層構造（章 → 節）に強い
書籍のような番号付け
セクションごとに小番号がリセットされる構造が自然
h1（章）と h2（節）を組み合わせた階層的な情報設計に適している

短所

カウンターが 2 段階になるため、単一の連番に比べ仕組みがやや複雑になる
h3 を追加したい、もっと階層を深くしたいなどの場合コード量が増える
セクションの構造が崩れると番号も狂いやすい

画像連番表示

「画像連番表示」は、画像ギャラリー（PNG 一覧、写真一覧）、おすすめ商品リスト、カードUI（漫画のリスト、動画サムネイルなど）、Flexbox や Grid と組み合わせた番号付きレイアウトに向いています。

デモ

CSS


/* 1. Flexboxコンテナの設定 */
.png-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center; /* メイン軸（横方向）でアイテムを中央に集める */
  align-items: flex-end;   /* クロス軸（縦方向）。アイテムを下端に揃える */
}

/* 2. 各アイテム（PNG）のサイズ設定を修正 */
.png-item {
  width: 250px; 
  text-align: center;
  counter-increment: png-num; 
  position: relative; 
  margin-bottom: 2em; 
}

/* 3. カウンターの表示 */
.png-item::after {
  content: "動物 " counter(png-num); 
  display: block;
  text-align: center;
  margin-top: 0.5em;
  color: #555;
}

HTML


<div class="png-container">
  <div class="png-item">
    <img src="animal-png-01.png" alt="1番目の動物のPNGアニメ">
  </div>
  <div class="png-item">
    <img src="animal-png-02.png" alt="2番目の動物のPNGアニメ">
  </div>
  <div class="png-item">
    <img src="animal-png-03.png" alt="3番目の動物のPNGアニメ">
  </div>
    <div class="png-item">
    <img src="animal-png-04.png" alt="4番目の動物のPNGアニメ">
  </div>
  <div class="png-item">
    <img src="animal-png-05.png" alt="5番目の動物のPNGアニメ">
  </div>
</div>

解説

仕組み

.png-container は flexbox レイアウト
.png-item に counter-increment: png-num;
各画像の下に「動物 1」「動物 2」「動物 3」のように並ぶ
Flexbox とカウンターを組み合わせて、カード状のリストに番号を付けるイメージ

特徴

表・ギャラリー・カードレイアウトなどの並列レイアウトとの相性がよい
折り返しても番号は自然に進む
見出しではなく「要素そのもの（カード）」に番号を付けられる
カウンターが要素に紐づくため、画像・商品カードなどでも利用可能

短所

要素が「途中で表示順が変わる CSS（Order など）」を使うと番号がズレたり混乱する
途中で要素構造を変更すると番号の連続性が乱れる
画面幅により折り返しが変わるため、「番号の見た目上の上下左右関係」が変わることもある

★ このページは、Gemini、ChatGPT の協力のもと、主に私自身の学習・備忘録（メモ）用として作成しています。複雑な機能や処理を含む部分については、公開前に私自身が入念な動作確認をしていますが、ご利用の際は、必ずご自身で動作確認と必要に応じた修正をお願いいたします。