番号付きリストの飾りをCSSで｜丸数字・ステップ・POINT 01のコピペ4種類と、番号を消すときの注意

手順やご利用の流れの番号は、画像や手打ちの文字で作らなくても、<ol>（番号付きリスト）とCSSだけで作れます。項目を足しても消しても、番号は自動で振り直されます。

使いどころは、順番に意味があるものです。色を変えるだけなら ::marker で足ります。番号に丸を付けたいときだけ list-style: none とカウンターを使い、role="list" を一緒に付けます。順番に意味がない項目に番号の飾りは付けません。

この記事の要点

番号付きリストは ::marker で色を変えられ、CSSカウンターを使うと丸数字・線でつなぐ手順・POINT 01 の形も作れる
使いどころは順番に意味がある手順や流れ。色だけなら ::marker で足り、順番に意味がない項目には番号を付けない
list-style: none にすると Safari ではリストとして扱われなくなるので role="list" を付ける。番号で参照する文章は本文にも番号を書く

連載「WEBの技術」の46回目です。
今回は番号付きリストの飾り。見た目より先に「番号を消して大丈夫か」の話が大事な回です。

完成見本：番号の飾り4種類

中身はどれもふつうの <ol> です。1はブラウザの番号、2〜4はCSSのカウンターの番号です。

::MARKER1. 番号の色だけ変えるふつうの手順。まずはこれで足りないか考える

COUNTER2. 丸数字「ご利用の流れ」など、番号を目立たせたいとき

COUNTER + LINE3. 線でつなぐステップ説明つきの手順。先へ進む流れを見せたいとき

LEADING ZERO4. POINT 01サービスの特長や、記事の要点を数えて見せるとき

※ 見本は読み上げソフトでは読まれないようにしています。実際に使うときは、下のコードのまま使えば読み上げの対象になります。

コピペ用のコード

CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-li は、サイトのほかのデザインと名前がぶつからないようにするための目印です。

1. 番号の色だけ変える

::marker は、リストの番号や点だけを選ぶ指定です。list-style を消さないので、ふつうのリストのまま番号の色と大きさを変えられます。いちばん短く、読み上げへの影響もありません。

HTML

<ol class="kd-li-marker">
  <li>申し込みフォームに入力する</li>
  <li>確認メールのリンクを開く</li>
  <li>パスワードを決める</li>
</ol>

CSS

.kd-li-marker {
  padding-left: 1.8em;
}
.kd-li-marker li {
  margin-bottom: .5em;
}
/* 番号だけを選ぶ。Safariで効くのは色と大きさだけで、太さは効かない */
.kd-li-marker li::marker {
  color: #0369A1;
  font-size: 1.2em;
  font-weight: 700;
}

2. 丸数字

番号に背景の丸を付けるには、::marker では足りません。ブラウザの番号を list-style: none で消し、CSSの数え係（カウンター）で作った番号を ::before（要素の前に足す飾り）に出します。番号を消すと一部の環境でリストとして伝わらなくなるので、role="list" を付けます。理由はあとで説明します。

HTML

<ol class="kd-li-circle" role="list">
  <li>お問い合わせ</li>
  <li>お打ち合わせ</li>
  <li>お見積もり</li>
</ol>

CSS

.kd-li-circle {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 「kd-circle」という名前の数え係を、ここで0に戻す */
  counter-reset: kd-circle;
}
.kd-li-circle li {
  position: relative;
  min-height: 2em;
  margin: 0 0 .7em;
  padding: .3em 0 0 2.7em;
  /* 項目が1つ出るたびに1増やす */
  counter-increment: kd-circle;
}
.kd-li-circle li::before {
  /* 今の数を文字として出す */
  content: counter(kd-circle);
  position: absolute;
  left: 0;
  top: 0;
  width: 2em;
  height: 2em;
  box-sizing: border-box;
  /* 透明な枠線は、強制カラーモードで丸を残すため */
  border: 2px solid transparent;
  border-radius: 50%;
  background: #0369A1;
  color: #FFFFFF;
  font-weight: 700;
  line-height: calc(2em - 4px);
  text-align: center;
}

3. 線でつなぐステップ

2の丸数字に、丸と丸をつなぐ縦線を足した形です。線は ::after（要素のあとに足す飾り）で描き、li:not(:last-child) で最後の項目だけ外しています。線を top と bottom で決めているので、説明文が長くなっても線が一緒に伸びます。

HTML

<ol class="kd-li-step" role="list">
  <li><strong>お問い合わせ</strong><p>フォームから内容を送ります</p></li>
  <li><strong>お打ち合わせ</strong><p>目的と予算をうかがいます</p></li>
  <li><strong>お見積もり</strong><p>内容と金額をお伝えします</p></li>
</ol>

CSS

.kd-li-step {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: kd-step;
}
.kd-li-step li {
  position: relative;
  margin: 0;
  padding: 0 0 1.2em 3em;
  counter-increment: kd-step;
}
.kd-li-step li:last-child {
  padding-bottom: 0;
}
.kd-li-step li::before {
  content: counter(kd-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2em;
  height: 2em;
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 50%;
  background: #0369A1;
  color: #FFFFFF;
  font-weight: 700;
  line-height: calc(2em - 4px);
  text-align: center;
}
/* 丸と丸をつなぐ縦線。最後の項目には付けない */
.kd-li-step li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1em - 1px);
  top: 2em;
  bottom: 0;
  border-left: 2px solid #7B8A97;
}
.kd-li-step strong {
  display: block;
  line-height: 2;
}
.kd-li-step p {
  margin: 0;
  font-size: .88em;
  line-height: 1.6;
}

4. POINT 01

content には、文字と番号を並べて書けます。counter() の2つ目に decimal-leading-zero（頭に0を付ける形）を指定すると、1が「01」になります。番号が項目の上に来るので、横に長い項目でも形がくずれません。

HTML

<ol class="kd-li-point" role="list">
  <li>スマホでも読みやすい</li>
  <li>あとから自分で更新できる</li>
  <li>公開したあとも相談できる</li>
</ol>

CSS

.kd-li-point {
  list-style: none;
  display: grid;
  gap: .6em;
  margin: 0;
  padding: 0;
  counter-reset: kd-point;
}
.kd-li-point li {
  margin: 0;
  padding: .7em 1em;
  background: #FFFFFF;
  border: 1px solid #D8E6F0;
  border-radius: 10px;
  counter-increment: kd-point;
}
.kd-li-point li::before {
  /* 文字と数を並べて書ける。2つ目の指定で「01」の形にする */
  content: "POINT " counter(kd-point, decimal-leading-zero);
  display: block;
  color: #0369A1;
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.6;
}

仕組み：CSSの中に「数え係」を置く

用意する・増やす・出す、の3つ

カウンターは、CSSの中で数を数える係です。2の丸数字で使っている指定は、次の3つだけです。

指定	書く場所	していること
`counter-reset: kd-circle`	ol	「kd-circle」という数え係を用意して0にする
`counter-increment: kd-circle`	li	項目が1つ出るたびに1増やす
`content: counter(kd-circle)`	li::before	今の数を文字として出す

名前の「kd-circle」は自分で決められます。つまずきやすいのは書く場所です。counter-reset を li に書くと、項目ごとに0へ戻るので、全部「1」になります。

counter-reset を li に書いた：全部1

counter-reset を ol に書く（見本）

2行になっても文字がそろう理由

::before はそのままだと文字と同じ行に並ぶので、文章が2行になると、2行目が番号の下にもぐります。見本では li の左に余白をとり、番号を position: absolute（親の箱を基準に位置を決める指定）でその余白に置いています。こうすると、何行になっても文字の左端がそろいます。

::before をそのまま並べる：2行目が番号の下へ

position: absolute で左に置く（見本）

入れ子の番号は counters()

規約や目次のような「1-1」「1-2」の番号は、複数形の counters() で作れます。ol ごとに数え係を作り、外側から順に、指定した文字でつないで出します。

HTML

<ol class="kd-li-nest" role="list">
  <li>お申し込み
    <ol>
      <li>フォームに入力する</li>
      <li>確認メールを開く</li>
    </ol>
  </li>
  <li>お支払い
    <ol>
      <li>方法を選ぶ</li>
      <li>内容を確かめる</li>
    </ol>
  </li>
</ol>

CSS

.kd-li-nest,
.kd-li-nest ol {
  list-style: none;
  margin: 0;
  padding: 0;
  /* ol ごとに新しい数え係を作る */
  counter-reset: kd-nest;
}
.kd-li-nest li {
  position: relative;
  margin: .4em 0 0;
  padding-left: 2.6em;
  counter-increment: kd-nest;
}
.kd-li-nest li::before {
  /* counters（複数形）は、外側の数からつなげて出す */
  content: counters(kd-nest, "-");
  position: absolute;
  left: 0;
  top: 0;
  color: #0369A1;
  font-weight: 700;
}

::marker で足りるなら、それが一番短い

1の ::marker は、ブラウザが出している番号をそのまま選ぶ指定です。MDNの対応表では、Safariで効くのは color と font-size だけと注記されています。背景や丸は付けられません。また、::marker は display: list-item の要素で働く指定です。li に display: flex を付けると、Chromeで確かめたところ番号そのものが消えました。

ふつうのリスト

li に display: flex：番号が消える

数値を変えるとどうなるか

丸の大きさ（2）

1.5em：文字と同じくらい

2em（見本）

3em：番号が主役

1.5emは本文になじみ、3emは番号が主役になります。大きさを変えるときは、width height line-height と、li の左の余白をそろえて変えます。

番号の形（2・4）

decimal-leading-zero

upper-roman

lower-alpha

counter() の2つ目で番号の形を変えられます。ローマ数字は桁が増えると幅が広がるので、丸の中に入れるなら少ない項目までにします。

途中の番号から始める（2〜4）

ふつうの番号＋start="4"

丸数字＋start="4"：1のまま

counter-reset: kd-circle 3 も足す

<ol start="4"> は「4から数える」というHTMLの指定です。ふつうの番号は従いますが、自分で作った数え係には伝わりません。Chromeで確かめると、丸数字は1のままでした。CSSでも counter-reset: kd-circle 3（3から始めて、最初の項目で4になる）と書くと、そろいます。

スマホと、見る人への配慮

番号を消すと、リストとして伝わらないことがある

この回でいちばん大事なところです。MDNによると、Safariは list-style: none のリストを、<nav> の中にある場合を除いて、リストとして扱いません。不具合ではなく意図した動きと説明されています。<ol role="list"> と書くと、見た目を変えずに元へ戻せます。2〜4のコードに付いているのはこのためです。1は番号を消していないので要りません。

CSSで出した番号は、読まれない組み合わせがある

MDNは、CSSで足した内容はDOM（ページの本体）に入らないので、読み上げられないソフトとブラウザの組み合わせがあると説明しています。Chromeのアクセシビリティ情報には見本の番号が入っていましたが、ほかの環境まで同じとは言えません。

本文で「手順3に戻ってください」のように番号を指すなら、番号に頼らず、「確認メールのリンクを開く手順に戻ってください」と言葉でも書きます。読み上げの内容を指定したいときは、content: counter(kd-circle) / "手順" counter(kd-circle) のようにスラッシュのあとへ読み上げ用の文字を書けます。古いブラウザは行ごと無視するので、上にスラッシュなしの content も書いておきます。

番号はコピーされない

Chromeでページを全選択して文字を取り出すと、カウンターの番号も、ふつうのリストの番号も入りませんでした。規約の「第3条」のように、番号を引用したりメールに貼ったりするものは、CSSではなくHTMLに文字で書きます。

強制カラーモードでは、丸の背景が消える

Windowsの設定などで画面の色を決まった配色に変える「強制カラーモード」では、背景色が消え、白い文字が決まった文字色に変わります。見本は丸に border: 2px solid transparent（透明な枠線）を付けているので、このモードでは枠線に色が付き、丸が残ります。線も背景でなく border-left で描きました。Chromeの強制カラーの再現で確かめました。

スマホでは、項目を短く

2と3は左に約3文字分の余白を使うので、スマホでは項目を短く切ります。長い文章には、番号が上に乗る4が向いています。

やりすぎ注意

1ページで全部の形を使うと、どれが手順か分からなくなります。「手順は丸数字、特長はPOINT」のように形と意味を対応させます。

番号は「順番がある」という約束です。
順番のないものに飾りとして付けると、読む人は「1からやらないといけないのか」と迷います。

WordPressで使うとき

テーマの中には、ol に最初から番号の飾りを付けているものがあります。このサイトのテーマにも .entry-content ol > li:before で番号の丸を描く指定があり、テーマの指定のほうが強いので、今回のコードをそのまま入れると、丸の大きさや色がテーマのものになります。この記事の見本では、テーマの影や文字の大きさまで打ち消しています。

思った形にならないときは、開発者ツールで li::before に当たっている指定を確かめ、セレクタの頭に .entry-content を足して強くします。role="list" まで書くなら、リストブロックよりカスタムHTMLブロックのほうが確実です。

AIに頼むなら

Claudeなどの生成AIに頼むときは、見た目だけでなく、HTMLの形と配慮まで伝えると、そのまま使いやすいコードになります。

ご利用の流れを、番号付きリストのHTML（ol と li）とCSSカウンターで作って。
番号は直径2emの濃い青の丸に白い文字。丸と丸を縦線でつないで、2行になっても文字の左端をそろえて。
list-style: none にするなら ol に role="list" を付けて、強制カラーモードでも丸と線が見えるようにして。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

番号が <div> や手打ちの文字になっていないか。順番があるものは ol と li で書かれているかを見ます
list-style: none に role="list" が付いているか。見た目では分からないので、コードで確かめます
項目を足したときと、2行になったときの形。番号が振り直されるか、線が途切れないか、文字がそろうかを、スマホ幅で見ます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

「ご利用の流れ」「申し込みの手順」。順番が伝わることに価値があるので、3のステップが合います
記事の中の短い手順。テーマの飾りで足りなければ、まず1の色だけで考えます
サービスの特長を数えて見せるところ。ただし順番に意味がないときは、番号の形は控えめな4にとどめます

使わない場面

順番に意味がない箇条書き。並びかえても意味が同じものは ul（点のリスト）で書きます
規約や契約の条番号。引用やコピーで番号が必要になるので、HTMLに文字で書きます
手順が2つだけのところ。ふつうの文章のほうが短く伝わります

KAKERUなら、まず「この番号は必要か」から考えます。
必要なら色だけで足りないかを見て、それでも弱いときに丸やステップへ進みます。

まとめ

色と大きさだけなら ::marker。ブラウザの番号をそのまま使うので、いちばん短くて安全
丸やステップは、list-style: none ＋ counter-reset・counter-increment・counter() で作る
list-style: none にしたら ol に role="list" を付ける。Safariでリストとして扱われなくなるため
番号はコピーされず、読まれない環境もある。番号を参照する文章や条番号は、本文に文字で書く
順番に意味があるものだけに使い、1ページの中で形と意味を対応させる

まずは2のコードをコピーして、項目を1つ足してみてください。番号が自動で増えるのを確かめると、カウンターの便利さがすぐ分かります。

参考にした資料

いずれも2026年11月7日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

MDN「list-style」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/list-style
※Accessibility の節。Safari は list-style が none のリストを、nav の中を除いてリストとして扱わないこと。意図した動きであること。role=”list” で戻せること
MDN「::marker」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::marker
※使えるプロパティ、display: list-item の要素で働くこと、Baseline では Limited availability。対応表の注記で、Safari は color と font-size だけ
MDN「Using CSS counters」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Counter_styles/Using_counters
※counter-reset で用意し、counter-increment で増やし、counter() や counters() で出す流れ
MDN「counter()」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/counter
※2つ目に番号の形を指定できること。Baseline は Widely available（2015年7月から主なブラウザで使える）
MDN「counters()」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/counters
※入れ子の番号をつなげて出す指定。Baseline は Widely available
MDN「content」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content
※Accessibility の節。CSSで足した内容はDOMに入らず、読み上げられない組み合わせがあること。大事な情報は本文に書くこと。スラッシュのあとに読み上げ用の文字を書く形
MDN「ol」（英語）
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ol
※start 属性の意味
MDN「list-style-type」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/list-style-type
※decimal-leading-zero・upper-roman・lower-alpha などの番号の形
MDN「forced-colors」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/forced-colors
※強制カラーモードで background-color や color が決まった色に置きかわること