BLOGブログ

CSSで連番を自動で付ける方法｜counterの使い方と、「01」「STEP1」「1-1」などコピーして使えるサンプル【2026年版】

竹節 大輝 /

Web制作・ホームページ制作

手順や「よくある質問」に「01」「STEP1」のような番号を付けたいとき、HTML に数字を直接書くと、項目を足したり並べ替えたりするたびに番号を書き直すことになります。CSS の counter（カウンター） を使えば、番号は自動で付き、項目を増やしても正しく振り直されます。

この記事では、コピーしてすぐ使える連番のサンプルを先に紹介し、そのあとで仕組み、番号の種類、うまく番号が付かないときの原因を説明します。

  • 「01」「STEP1」「1-1」「第一条」など、よく使う連番のサンプル6つ
  • counter-reset・counter-increment・counter() の役割
  • 全部「1」になる、入れ子で番号がつながらない、などの原因と直し方

結論：ふつうの番号なら ol、形を変えたいなら counter

連番を付ける方法は、作りたい形によって選びます。

作りたいもの使うもの
「1.」「a.」「i.」などの、ふつうの番号付きリスト<ol> だけ（CSS は不要か、list-style-type だけ）
番号の色や大きさだけを変えたい<ol> ＋ ::marker
「01」「STEP1」、丸の中に番号、番号の前後に文字を足したいcounter
「1-1」「1.2」のような入れ子の番号、見出しへの章番号counter と counters()

counter は、::before などの疑似要素に番号を出す仕組みなので、番号の位置・色・形を自由にデザインできるのが強みです。制作の現場では、「サービスの流れ」「ご依頼の手順」のように、番号を大きく見せたいところでよく使います。

コピーして使える連番のサンプル6つ

まず、よく使う6つの形です。どれも、HTML には番号を書いていません。

CSSのcounterで作った6種類の連番。2桁の番号、STEPの番号、丸の中の番号、入れ子の番号、見出しの章番号、漢数字の番号
この記事のサンプルを表示したところ（Google Chrome）

HTML は、どのサンプルもふつうの番号付きリストです。class 名だけ変えて使います。

<ol class="num2" role="list">
  <li>ヒアリング</li>
  <li>デザイン</li>
  <li>コーディング</li>
</ol>

role="list" を付けている理由は、後の「番号付きリストとしての意味を残す」で説明します。

「01」「02」の2桁の番号

番号の種類に decimal-leading-zero を指定すると、1桁の数字の前に「0」が付きます。

.num2 {
  list-style: none;
  counter-reset: item;
  padding: 0;
}
.num2 li {
  counter-increment: item;
}
.num2 li::before {
  content: counter(item, decimal-leading-zero) ". ";
  font-weight: 900;
  color: #00b2ff;
}

「STEP1」「STEP2」の番号

content では、番号の前後に文字を並べて書けます。ここでは「STEP」と番号をつなげ、丸みのあるラベルにしています。

.step {
  list-style: none;
  counter-reset: step;
  padding: 0;
}
.step li {
  counter-increment: step;
  display: flex;
  align-items: center;
  gap: 10px;
}
.step li::before {
  content: "STEP" counter(step);
  padding: 3px 8px;
  border-radius: 999px;
  background: #00b2ff;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

「第1位」のような形も、content: "第" counter(rank) "位"; と書くだけです。

丸の中に番号

疑似要素に幅・高さと border-radius: 50% を指定して、真ん中に番号を置きます。

.badge {
  list-style: none;
  counter-reset: badge;
  padding: 0;
}
.badge li {
  counter-increment: badge;
  display: flex;
  align-items: center;
  gap: 10px;
}
.badge li::before {
  content: counter(badge);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #6a5acd;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

「1-1」「1-2」の入れ子の番号

リストの中にリストがあるときは、counters()（最後に s が付く）を使います。親の番号と子の番号を、指定した文字でつないで表示します。

.nest,
.nest ol {
  list-style: none;
  counter-reset: sec;
  padding: 0;
}
.nest ol {
  padding-left: 1.4em;
}
.nest li {
  counter-increment: sec;
}
.nest li::before {
  content: counters(sec, "-") " ";
  font-weight: 700;
}
<ol class="nest" role="list">
  <li>準備
    <ol role="list">
      <li>原稿</li>
      <li>写真</li>
    </ol>
  </li>
  <li>制作
    <ol role="list">
      <li>デザイン</li>
    </ol>
  </li>
</ol>

区切りを「.」にしたいときは、counters(sec, ".") にします。

見出しに「1.」「1.1」の章番号を付ける

マニュアルや規約のページで、h2 に「1.」、h3 に「1.1」と自動で付ける例です。h2 が出るたびに h3 の番号を0に戻すのがポイントです。

.doc {
  counter-reset: h2;
}
.doc h2 {
  counter-increment: h2;
  counter-reset: h3; /* 次の章で、h3 の番号を1から数え直す */
}
.doc h3 {
  counter-increment: h3;
}
.doc h2::before {
  content: counter(h2) ". ";
}
.doc h3::before {
  content: counter(h2) "." counter(h3) " ";
}

見出しは入れ子になっていない（h2 と h3 が兄弟の関係）ので、ここでは counters() ではなく、counter() を2つ並べています。

「第一条」「第二条」の漢数字

番号の種類に japanese-informal を指定すると、「一、二、三……十一」のような漢数字になります。

.jp {
  list-style: none;
  counter-reset: jp;
  padding: 0;
}
.jp li {
  counter-increment: jp;
}
.jp li::before {
  content: "第" counter(jp, japanese-informal) "条　";
  font-weight: 700;
}

counterの使い方：3つのプロパティで番号が付く仕組み

どのサンプルも、やっていることは同じ3つです。

書くもの書く場所役割
counter-reset: 名前;番号を付けたい項目を囲む要素（ol など）カウンターを用意して、0にする
counter-increment: 名前;番号を付けたい項目（li など）項目が出るたびに、1つ増やす
content: counter(名前);項目の ::before か ::after今の番号を表示する

名前（例では item や step）は自由に決められます。同じページで別々の連番を使うときは、名前を分けます。

数字を足すと、増やす数や、始まりの数を変えられます。

/* 10から始める（最初の項目で「10」になるよう、9にしておく） */
.list { counter-reset: item 9; }

/* 2ずつ増やす：2, 4, 6 */
.list li { counter-increment: item 2; }

途中で番号を決まった値に変えたいときは、counter-set を使います。たとえば counter-set: item 5; と書いた項目は、その時点の番号が「5」になり、そこから数え続けます。counter-set は、2023年12月から主要なブラウザで使えるようになったプロパティです（MDN による）。

counter() と counters() の違い

書き方表示使う場面
counter(sec)今いる階層の番号だけ（「2」）ふつうの連番
counters(sec, "-")親の番号から全部つないだもの（「1-2」）入れ子のリスト

番号の種類を変える（アルファベット・ローマ数字・漢数字・ひらがな）

counter(名前, 種類) の2つ目に、番号の種類を指定できます。よく使うものをまとめました（<ol> の list-style-type にも同じ値が使えます）。

種類表示の例
decimal（何も書かないときと同じ）1, 2, 3
decimal-leading-zero01, 02, 03
lower-alphaa, b, c
upper-alphaA, B, C
lower-romani, ii, iii
upper-romanI, II, III
japanese-informal一, 二, 三（十一, 十二 と続く）
japanese-formal壱, 弐, 参（契約書などで使う字）
cjk-decimal一, 二, 三（11は「一一」と、桁を並べる）
hiraganaあ, い, う
katakanaア, イ, ウ
hiragana-irohaい, ろ, は
lower-greekα, β, γ

番号の種類によっては、表示するフォントに文字が入っていないと、正しく見えないことがあります。

2021年に書いたこの記事の旧版では、cjk-ideographic を「漢数字」として紹介していました。今の仕様では、cjk-ideographic は昔からの互換のために残されている値（中国語の繁体字の数え方と同じ）とされています。日本語の漢数字には japanese-informal を使うのがおすすめです。

①②③のような番号は @counter-style で作る

用意されていない番号の形は、@counter-style で自分で作れます。丸数字の例です。

@counter-style circled {
  system: fixed;
  symbols: "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩";
}

.circled {
  list-style: none;
  counter-reset: num;
}
.circled li {
  counter-increment: num;
}
.circled li::before {
  content: counter(num, circled) " ";
}

system: fixed は、symbols に書いた記号を順番に使う指定です。記号を使い切った11番目からは、ふつうの数字（11, 12……）で表示されます。@counter-style は、2023年9月から主要なブラウザで使えるようになりました（MDN による）。

counterを使わなくていい場合：olと::marker

「番号の色だけ変えたい」「番号を『a.』にしたい」くらいなら、counter を使わず、<ol> だけで足ります。

/* 番号の種類を変える */
ol.alpha { list-style-type: upper-alpha; }

/* 番号の色と大きさだけ変える */
ol.blue li::marker {
  color: #00b2ff;
  font-size: 1.2em;
}

HTML の属性でも、番号を変えられます。

書き方できること
<ol start="5">5から始める
<ol reversed>3, 2, 1 と逆順にする
<li value="10">その項目から番号を10にする

ただし、::marker に使える CSS は色・フォントなどに限られていて、背景や余白は付けられません。さらに Safari では、効くのは color と font-size だけです（MDN のブラウザ対応表による）。太さ（font-weight）を変えても、Safari では変わりません。番号を丸で囲む、ラベルにするなど、形を作り込みたいときは counter を使う、と覚えておくとよいでしょう。

番号がうまく付かないときの原因と直し方

全部「1」になる

一番多い失敗です。counter-reset を、番号を付ける項目そのもの（li など）に書いていると、項目ごとに0に戻るので、すべて「1」になります。

/* ×：項目ごとにリセットされて、全部「1」になる */
.list li {
  counter-reset: item;
  counter-increment: item;
}

/* ○：リセットは、項目を囲む親の要素に書く */
.list {
  counter-reset: item;
}
.list li {
  counter-increment: item;
}

カードを並べるデザインで、カード1枚ずつの <div> に counter-reset を書いているときも、同じことが起きます。リセットは、全部のカードを囲む一番外側の要素に書きます。

番号が飛ぶ・ずれる

  • display: none で隠した項目は、数えられません。番号を詰めたいときはこれで問題ありません
  • visibility: hidden や opacity: 0 で隠した項目は、見えなくても数えられます。番号が飛ぶときは、隠し方を確認します
  • counter-increment を、番号を出さない要素（見出しの中の span など）にも書いていると、その分だけ多く数えます

入れ子の番号が「1-1」にならない

counter() を使っていると、今の階層の番号しか出ません。入れ子の番号は counters() にします。また、子の <ol> にも counter-reset が必要です（サンプルの .nest ol の部分）。

逆順（3, 2, 1）にしたい

counter で逆順にするには、counter-increment: item -1; と、項目の数＋1 の値で counter-reset をする必要があり、項目を増やすたびに CSS を直すことになります。

番号の形をデザインしない、ふつうの番号付きリストなら、HTML の <ol reversed> を使うほうが簡単です。ただし reversed が逆にするのは ol のもとの番号だけで、counter で作った番号には効きません。

番号付きリストとしての意味を残す

counter で番号を作るときは、list-style: none でもとの番号を消します。このとき注意したいことが2つあります。

  1. Safari では、list-style: none にした ol・ul が「リスト」として認識されないことがあります。画面の読み上げ（VoiceOver など）を使う人に、項目の数や順番が伝わりにくくなります。MDN では、role="list" を付ける方法が紹介されています。この記事のサンプルの HTML に role="list" を付けているのはこのためです
  2. 順番に意味があるものは、<div> ではなく <ol> で書きます。counter の番号は見た目の飾りなので、HTML の構造が「番号付きリスト」になっていることが大切です

なお、::before で出した番号は、ページの文字を選んでコピーしても、基本的にはコピーされません。番号もコピーして使ってほしい文書（規約の条文番号など）では、HTML に番号を書いておくほうが安心です。

Cruwのサイトでの使用例

Cruw のサイトでも、counter を使っています。

  • サイト改善おまかせパックの「初期設定」：5つの作業に「01」〜「05」の番号を付けています。counter(setup, decimal-leading-zero) で2桁にし、番号の文字にグラデーションをかけて、大きく見せています
  • システム開発のブログ記事の「ご提案の流れ」：手順のボックスの左側に「step1」「step2」……と表示しています
/* おまかせパックのページの「初期設定」（一部） */
.kz-setup {
  counter-reset: setup;
}
.kz-setup li {
  counter-increment: setup;
}
.kz-setup li::before {
  content: counter(setup, decimal-leading-zero);
  font-weight: 900;
  background: var(--kz-grad); /* 水色から紺のグラデーション */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

流れや手順の内容は、あとから項目を足すことがよくあります。番号を HTML に書いていないので、項目を足すだけで番号も正しく振り直されます。

よくある質問

Q. CSSのcounterは、どのブラウザで使えますか？

counter-reset・counter-increment・counter()・counters() は、Chrome・Edge・Safari・Firefox のすべてで、長く使われている機能です。2026年の時点で、ブラウザの違いを気にせず使えます。新しめの counter-set と @counter-style も、2023年から主要なブラウザで使えます。

Q. HTMLに番号を直接書くのと、counterとでは、SEOに違いはありますか？

番号の付け方の違いで、検索順位が大きく変わることはありません。大切なのは、手順や順位のように順番に意味のある内容を <ol> で書くことです。そのうえで、項目を増やしても番号がずれない counter を使うと、更新の手間とまちがいが減ります。

Q. WordPressのブロックエディターでも使えますか？

使えます。リストのブロックの「高度な設定」→「追加 CSS クラス」に、num2 などの class 名を入れ、テーマの CSS（または「外観」→「カスタマイズ」→「追加 CSS」）に、この記事の CSS を書きます。ブロックテーマの場合は、「外観」→「エディター」の「スタイル」の画面から、追加 CSS を書けます。

まとめ

  • 番号を HTML に書かず、counter-reset（親）・counter-increment（項目）・counter()（表示） の3つで自動で付ける
  • 「01」は decimal-leading-zero、入れ子は counters()、漢数字は japanese-informal、丸数字は @counter-style
  • 全部「1」になるときは、counter-reset を書く場所を確認する。番号を消したリストには role="list" を付ける

Cruw では、長野県上田市を拠点に、ホームページの制作や、今あるサイトの改善をしています。「手順やサービスの流れのページを見やすく作り直したい」「CSS の直しを頼める先がない」といったご相談も承っています。ホームページ制作のページから、お気軽にご相談ください。

旧版の記事：CSSでcounterを利用したナンバーを自動出力する方法（2021年）

参照元：

GoogleのAI検索で「Cruwのブログ」を優先表示しませんか？

Googleの最新機能では、お気に入りのサイトを「優先するソース」として登録できるようになりました。登録していただくと、GoogleのAIモードやAI Overviewsが回答をつくる際、当サイトの情報を優先的に参照・表示してくれるようになります。

これからも地域ビジネスに役立つ最新のWebマーケティング情報を発信していきますので、ぜひ優先ソースへのご登録をお願いいたします！

この記事をシェアする

ブログ一覧に戻る

関連記事

mask-image 表示されない問題の解決法 Default Thumbnail[HTML] tableタグを使うメリット・デメリットとdlタグを使った表の作り方 CSSでcounterを利用したナンバーを自動出力する方法 cssとscss(sass)の違いについて 【UIkit】アンカーリンクのジャンプ位置を調整する方法 【UIkit】高さ可変のスライドショーを実装する方法