CSS カウンター

CSSカウンターとは

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

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

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

  1. リセット（初期化）
    CSSプロパティ：counter-reset
    カウンターをゼロに設定し、番号付けの開始点を定義します。通常、親要素やセクションの開始点に適用します。
  2. インクリメント（加算）
    CSSプロパティ：counter-increment
    特定の要素が出現するたびにカウンターの値を増やします。通常、番号を付けたい要素自体に適用します。
  3. 表示
    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

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

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

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

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 と組み合わせた番号付きレイアウトに向いています。

デモ

1番目の動物のPNGアニメ
2番目の動物のPNGアニメ
3番目の動物のPNGアニメ
4番目の動物のPNGアニメ
5番目の動物のPNGアニメ

CSS

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

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の協力のもと、主に私自身の学習・備忘録（メモ）用として作成しています。 複雑な機能や処理を含む部分については、公開前に私自身が入念な動作確認をしていますが、 ご利用の際は、必ずご自身で動作確認と必要に応じた修正をお願いいたします。
上に戻る