入門編では、リスト番号を自動で付ける方法を紹介しました。
今回はさらに一歩進んで、段落番号や図表番号を自動付与する実用テクニックを解説します。
マニュアル記事やレポート風コンテンツだけでなく、Webサイト制作でも大いに役立つ仕組みです。
段落に番号を付ける方法
複数の段落やセクションに「1.」「2.」「3.」と自動で番号を付与する例です。
.section {
counter-reset: para;
}
.section p {
counter-increment: para;
}
.section p::before {
content: counter(para) ". ";
font-weight: bold;
margin-right: 0.5em;
color: #333;
}
各段落の冒頭に通し番号が自動表示されます。
長文記事やマニュアルの章節番号管理に便利で、要素を増減しても番号が正しく更新されます。
図表番号を付ける方法
図や表のキャプションに「図1」「図2」と番号を振る場合の例です。
figure {
counter-reset: fig;
}
figure figcaption {
counter-increment: fig;
}
figure figcaption::before {
content: "図" counter(fig) " ";
font-weight: bold;
margin-right: 0.5em;
}
この方法でキャプションに「図1」「図2」と自動付与できます。
英語サイトなら「Figure 1」とするなどラベルを変更できます。
章と節番号を連動させる（応用例）
「1.1」「1.2」のように章と節を組み合わせた番号を表示する方法です。
h2を章、h3を節として連動させます。
body {
counter-reset: chapter;
}
h2 {
counter-increment: chapter;
counter-reset: section;
}
h2::before {
content: "第" counter(chapter) "章 ";
font-weight: bold;
}
h3 {
counter-increment: section;
}
h3::before {
content: counter(chapter) "." counter(section) " ";
font-weight: bold;
}
「第1章」「第2章」と章番号が付き、その中の節には「1.1」「1.2」「2.1」などの形式で番号が自動付与されます。
技術書や仕様書、学習コンテンツに最適です。
CSSカウンターが活きるWebページの実例
CSSカウンターは文書スタイルだけでなく、Webサイト制作で頻出するページでも役立ちます。
特に同じような要素を繰り返し並べるページでは、コピペ後に番号を修正し忘れるミスを防ぎ、制作の効率を高められます。
1. プライバシーポリシーや利用規約ページ
法務系のページでは「第1条」「第2条」と条番号を振るのが一般的です。
CSSカウンターを使えば、項目を追加・削除しても自動で正しい番号が振られるため、修正忘れの心配がありません。
.policy {
counter-reset: article;
}
.policy h3 {
counter-increment: article;
}
.policy h3::before {
content: "第" counter(article) "条 ";
font-weight: bold;
}
2. FAQ（よくある質問）ページ
質問に「Q1」「Q2」と番号を付ける例です。質問の順番を入れ替えても番号が自動更新されます。
.faq {
counter-reset: q;
}
.faq dt {
counter-increment: q;
}
.faq dt::before {
content: "Q" counter(q) ": ";
font-weight: bold;
color: #007acc;
}
3. 操作マニュアルページ
「手順1」「手順2」といったガイド番号もCSSカウンターで自動付与可能です。
.manual {
counter-reset: step;
}
.manual li {
counter-increment: step;
}
.manual li::before {
content: "手順" counter(step) ": ";
font-weight: bold;
color: #e74c3c;
margin-right: 0.5em;
}
手順説明やチュートリアル記事に便利で、番号降り間違いのミスも防げます。
CSSカウンターのメリットと注意点
- HTMLをシンプルに保てる（手入力不要）
- 要素追加・削除に強く、番号が自動更新される
- デザイン自由度が高い（色や装飾も変更可能）
- 番号形式が豊富（数字・ローマ数字・英字・STEPなど）
- 主要ブラウザで安心して利用できる
特に実務上大きいのは、コピペ後に番号を修正し忘れる／降り間違えるといった小さなミスを防げることです。
プライバシーポリシーやFAQのように繰り返し要素が多いページで大きな力を発揮します。
注意点：
- IE7以前は非対応
- 印刷・PDF変換時に崩れる可能性あり
- スクリーンリーダー環境では番号の意味付けを考慮する必要がある
まとめ：CSSカウンターで文章構造とWebページを整理する
CSSカウンターを使えば、リスト番号だけでなく段落・図表・章節・条文・FAQ・手順ガイドなど、Webページの多様な場面で自動的に番号を付けられます。
コピペ修正忘れによるミスも減り、効率的で正確なページ制作につながります。
HTML構造をすっきり保ちながら、番号管理をスマートにできるのが最大の魅力です。
