【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形式などの応用例も含め、初心者でもすぐに取り入れられるテクニックです。

関連記事

プロモーションビデオ制作の制作事例を公開いたしました!

店舗や会社、商品やサービスを動画で紹介してみませんか。 インターネット環境の高速化やスマートフォンの普及により多くの方が動画コンテンツを身近に楽しむようになりました。そして、動画コンテンツは、新しいマーケティングツールとして注目されています。 店舗のオープンやイベントのお知ら...続きを読む

2018.09.11

【WP】ソーシャルブックマークのボタンを追加するプラグイン

WordPressで構築したサイトやブログの記事にソーシャルブックマーク(またはソーシャルメディア)のボタンを追加することができるプラグインをまとめてみました。 ほとんどのプラグインが管理画面のプラグインの検索より探すことができます。 Sharebar 投稿した...続きを読む

2015.02.20WordPress

【WP】WordPressテーマファイルのページ階層早見表

WordPressでサイト構築するために必須となるテーマ。初めてWordPressのテーマのファイルをみるとそれぞれのファイルがどのように関連してサイトが構築されているのか難しく感じるかもしれません。 テーマをカスタマイズしたいとき、テーマを利用したいとき、テーマをより深く...続きを読む

2016.07.03WordPress

【JavaScript】横にスライドするレスポンシブメニューを実装するライブラリ『mmenu』

スマートフォンやタブレットのアプリなどでボタンを押すとメニューが横から展開するインターフェイスをみることがあります。今回はそのような横にスライドするメニューを実装することができるJavaScriptライブラリ『mmenu』を紹介します。 『mmenu』 ダウン...続きを読む

2015.03.04HTMLコーディング

【無料】商用利用OKシームレステクスチャ「花崗岩(グラナイト)02」素材

自然の岩肌を表現したシームレスの無料で使えるテクスチャです。白黒色の花崗岩(グラナイト)の質感を再現しています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材となっております。...続きを読む

2025.07.25シームレステクスチャ