【CSS】見出しやカテゴリをまたいで連番を振るナンバリングリストの作り方

複数のリストを作るとき、普通のHTMLではリストごとに番号がリセットされてしまいます。
でも、CSSのカウンター機能を使うと、カテゴリをまたいでも連番を維持したまま表示させることができます。

今回は、ブログ記事の中で「やりたいことリスト」などを作るときに便利な通し番号リストのCSSサンプルを紹介します。

実際の動作デモ

このデモはテーマ側でSWELLの丸数字のスタイルをあてています。
CSSでお好みの番号のデザインにしてみてください。

上のように、<ul>を複数書いても、番号はリセットされずに通し番号で表示されます。
（例：1, 2, 3 … → 4, 5）

フォントサイズや色を変えるだけでも、雰囲気がガラッと変わります。
リストを使った記事や、目標リスト・やりたいことリストなどにぴったりです。

通し番号リストのCSS

デモのデザインのリストを連番にするCSSコードです。

/* ====== 通し番号リスト（list-sample内限定）====== */
.list-sample {
    counter-reset: bucket-number;
}

/* リスト項目ごとに番号を進める */
.list-sample ul li {
    counter-increment: bucket-number;
    list-style: none;
    position: relative;
    padding-left: 2em;
}

/* 番号のデザイン */
.list-sample ul li::before {
    content: counter(bucket-number);
    position: absolute;
    left: 0;
}

コードの解説

1. カウンターの初期化：counter-reset

.list-sample {
    counter-reset: bucket-number;
}

counter-resetプロパティは、CSSカウンターを初期化（ゼロにリセット）します。

• 適用場所：連番を管理したい範囲全体の親要素（今回は.list-sample）
• カウンター名：bucket-numberは任意の名前です。my-counterやitem-numberなど、好きな名前をつけられます
• 初期値：デフォルトでは0から始まります（最初の要素で1になる）

ポイント： .list-sample内のすべてのリストが、この1つのカウンターを共有することで、連番が実現されます。

2. カウンターの増加：counter-increment

.list-sample ul li {
    counter-increment: bucket-number;
    list-style: none;
    position: relative;
    padding-left: 2em;
}

プロパティ	役割
counter-increment	リスト項目が表示されるたびにbucket-numberを1増やす
list-style: none	デフォルトの黒い点（●）を消す
position: relative	疑似要素::beforeの配置基準を作る
padding-left: 2em	番号表示スペースを確保

3. 番号の表示：::before疑似要素

.list-sample ul li::before {
    content: counter(bucket-number);
    position: absolute;
    left: 0;
}

ここが最も重要な部分です。

• content: counter(bucket-number)：カウンターの現在値を取得して表示
• position: absolute：番号を自由な位置に配置
• left: 0：左端に配置

デザインのカスタマイズ例

円形の番号のカスタマイズ

デモではSWELLの丸文字スタイルをあてていますが、こちらはCSSで調整したパターンです。

/* 円形の番号バッジ */
.list-sample-circle {
    counter-reset: bucket-number;
}

.list-sample-circle ul li {
    counter-increment: bucket-number;
    list-style: none;
    position: relative;
    padding-left: 2em;
}

.list-sample-circle ul li::before {
    content: counter(bucket-number);
    position: absolute;
    left: 0;
    background: #ff9a03;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

四角い番号にする

/* 四角い番号 */
.list-sample-square {
    counter-reset: bucket-number;
}

.list-sample-square ul li {
    counter-increment: bucket-number;
    list-style: none;
    position: relative;
    padding-left: 2em;
}

.list-sample-square ul li::before {
    content: counter(bucket-number);
    position: absolute;
    left: 0;
    background: #e74c3c;
    color: white;
    padding: 1px 10px;
    border-radius: 3px;
}

その他のカスタマイズ例

番号を途中から開始したい場合は？

counter-resetに初期値を指定できます。

/* 10から開始する場合 */
.list-sample {
    counter-reset: bucket-number 9;
}

複数のカウンターを同時に使いたいときは？

異なる名前をつければ複数のカウンターを管理できます。

.list-sample {
    counter-reset: main-counter sub-counter;
}

ブラウザ対応は？

CSSカウンターは古くからある機能で、すべてのモダンブラウザで動作します（IE8以降も対応）。

まとめ

CSSカウンターの3つのステップ：

1. counter-resetでカウンターを初期化
2. counter-incrementで各要素ごとにカウントアップ
3. counter()関数で値を表示

この仕組みを使えば、JavaScriptを使わずに、CSSだけで複雑な採番システムを実装できます。ブログ記事、技術ドキュメント、チュートリアルなど、様々な場面で活用してください！

WordPressを使用している場合は、ブロックエディタの機能でリストの開始番号を任意の数字に設定することができます。

あわせて読みたい

【WordPress】リストの連番を任意の数字から開始する WordPressで記事を書いていると、番号付きリスト(ol要素)の連番を途中の数字から始めたい場面があります。例えば、手順の途中で画像や説明文を挟んだ後、番号を続けて表...