【CSS】CSSカウンター入門｜番号を自動で付与する基本と活用例 - 静岡県藤枝市のデザインスタジオ・エフ

CSSカウンターとは？初心者でもできる番号自動付与の基本

Webサイトを作っていると、リストや段落に番号を振りたい場面が多々あります。
HTMLの<ol>タグを使えば自動的に番号が付与されますが、「思った通りにデザインできない」「見出しや段落に番号を振りたい」といったケースも多いのではないでしょうか。
そこで役立つのが「CSSカウンター」です。
CSSカウンターを使うと、番号付けをCSSで管理できるため、HTMLをシンプルに保ちながら自由に番号を制御できます。

CSSカウンターの歴史とブラウザ対応

CSSカウンターはCSS2（1998年策定）で初めて登場しました。
その後、CSS3では「Lists and Counters Module」として拡張され、番号形式の指定や柔軟なコントロールが可能になっています。

主な対応ブラウザは以下の通りです：

Google Chrome：完全対応
Firefox：完全対応
Safari / iOS Safari：対応済み
Microsoft Edge：対応済み（Chromium版以降）
Internet Explorer：IE8以降で対応

現在主流のブラウザであれば安心して使える機能と考えてよいでしょう。

CSSカウンターの基本仕組み

CSSカウンターは以下の3つのプロパティを組み合わせて使います。

counter-reset：カウンターを初期化
counter-increment：要素ごとにカウンターを増やす
content: counter()：番号を表示する

基本コード例：リストに番号を付ける

通常の<ul>タグを番号付きリストに変換する例です。

  ul.counter-list {
    counter-reset: item; /* カウンターを初期化 */
  }
  ul.counter-list li {
    counter-increment: item; /* 各liごとに+1 */
  }
  ul.counter-list li::before {
    content: counter(item) ". "; /* 番号を表示 */
    font-weight: bold;
    margin-right: 0.5em;
  }

このコードで、<ul>が「1.」「2.」「3.」と番号付きになります。
<ol>より柔軟にデザインできるのが大きなメリットです。

応用例1：ローマ数字で表示する

番号をローマ数字に変換することも可能です。

  ul.roman-list {
    counter-reset: section;
  }
  ul.roman-list li {
    counter-increment: section;
  }
  ul.roman-list li::before {
    content: counter(section, upper-roman) ". ";
    font-weight: bold;
    margin-right: 0.5em;
  }

counter(section, upper-roman) と指定することで、「I」「II」「III」のようにローマ数字で表示されます。
lower-romanを使えば小文字のローマ数字にも対応できます。

応用例2：「STEP1」形式の手順ガイド

手順解説記事でよくある「STEP1」「STEP2」といった形式も簡単に作れます。

  .steps {
    counter-reset: step;
  }
  .steps li {
    counter-increment: step;
    list-style: none;
    margin-bottom: 1em;
  }
  .steps li::before {
    content: "STEP" counter(step);
    display: inline-block;
    background: #007acc;
    color: #fff;
    padding: 0.2em 0.6em;
    border-radius: 4px;
    margin-right: 0.5em;
    font-weight: bold;
  }

上記のコードを使えば、手順リストが自動的に「STEP1」「STEP2」とラベル付きで表示されます。
ガイドやマニュアル、LPの手順説明などにとても有効です。

よく使われるシーン

記事やマニュアルの段落番号
図表キャプション（図1・図2）
ステップ形式の操作説明
ページ内目次の自動生成

特に長文記事やチュートリアルでは、番号があるだけで理解がスムーズになります。
CSSカウンターを使うことで、デザインと可読性を同時に高められます。

CSSカウンターのメリットと注意点

HTMLをシンプルに保てる（手入力不要）
デザイン自由度が高い（色・装飾変更可能）
要素の追加・削除に強い（自動更新）
番号形式が豊富（数字・ローマ数字・英字・STEPなど）
主要ブラウザで安心して使える

注意点：

IE7以前は非対応
印刷・PDF変換では崩れる可能性あり
スクリーンリーダー環境では意味付けを考慮する必要がある

CSSカウンターで番号管理をスマートに

CSSカウンターは、CSS2で導入され、現在の主要ブラウザで安定して利用できる便利な機能です。
リストや段落に自動で番号を付与でき、HTML構造をすっきりさせながら自由なデザインが可能です。
ローマ数字やSTEP形式などの応用例も含め、初心者でもすぐに取り入れられるテクニックです。