【CSS】olのリストで①、②、③（丸数字）を表示させる

2019.7.19
更新 2026.10.30
デザインのメモ
CSS

olのリストで①、②、③（丸数字）ってできますかー

できますよー

サンプル①、簡単バージョン

丸数字は、環境依存文字で書く。そのまま使うのもありな気もします。①②③と。

『ol』の、『list-style』は『none』にする。数字の後は半角スペース、見た目が綺麗。折り返しは『padding-left』と『text-indent』で調整。ここは『em』を使うのがベスト。『1.3em』なら『-1.3em』、『1.5em』なら『-1.5em』、ここはデザインによって調整すればOK。

コードを見る（HTML・CSS）

HTML

<ol class="maru_a">
  <li>&#9312; リスト1のテキスト</li>
  <li>&#9313; リスト2のテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
  <li>&#9314; リスト3のテキスト</li>
  <li>&#9315; リスト4のテキスト</li>
  <li>&#9316; リスト5のテキスト</li>
</ol>

CSS

/* ---------- 01 簡単バージョン ---------- */
ol.maru_a {
  margin: 0;
  padding: 0;
}
ol.maru_a li {
  list-style: none;
  padding-left: 1.3em;
  text-indent: -1.3em;
}

見本ページをひらく（簡単バージョン）

サンプル②、spanで囲って丁寧バージョン

丸数字は、環境依存文字で書く。そのまま使うのもありな気もします。①②③と。

『ol』の、『list-style』は『none』にする。数字部分をspanで囲んで調整する。少し手間だが使いまわせるので便利ではある。

コードを見る（HTML・CSS）

HTML

<ol class="maru_b">
  <li><span>&#9312;</span>リスト1のテキスト</li>
  <li><span>&#9313;</span>リスト2のテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
  <li><span>&#9314;</span>リスト3のテキスト</li>
  <li><span>&#9315;</span>リスト4のテキスト</li>
  <li><span>&#9316;</span>リスト5のテキスト</li>
</ol>

CSS

/* ---------- 02 span で囲って丁寧バージョン ---------- */
ol.maru_b {
  position: relative;
  margin: 0;
  padding: 0;
}
ol.maru_b li {
  list-style: none;
  list-style-position: outside;
  margin: 0;
  padding-left: 1.25em;
}
ol.maru_b li span {
  position: absolute;
  left: 0;
  margin: 0;
}

見本ページをひらく（span で囲って丁寧バージョン）

サンプル③、spanや①（環境依存文字）は無しバージョン

①、②、③の環境依存文字は使わず、CSSだけで丸文字を作る。

『ol』の、『list-style』は『none』にする。『counter-reset』と『counter-increment』で数字をカウント化する。HTMLの記述はシンプルですがCSSでの調整が少々面倒なのであまりおすすめはできません。。

コードを見る（HTML・CSS）

HTML

<ol class="maru_c">
  <li>リスト1のテキスト</li>
  <li>リスト2のテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
  <li>リスト3のテキスト</li>
  <li>リスト4のテキスト</li>
  <li>リスト5のテキスト</li>
</ol>

CSS

/* ---------- 03 span や ① を使わないバージョン ---------- */
ol.maru_c {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
  margin: 0;
}
ol.maru_c li {
  font-size: 16px;
  line-height: 1.5;
  padding-left: 30px;
  position: relative;
}
ol.maru_c li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #2b2a27;
  border: 1px solid;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 22px;
  width: 22px;
  color: #fff;
  font-size: 85%;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 0;
}

見本ページをひらく（span や ① を使わないバージョン）

丸数字の環境依存文字

表示	数値参照	表示	数値参照
①	①	②	②
③	③	④	④
⑤	⑤	⑥	⑥
⑦	⑦	⑧	⑧
⑨	⑨	⑩	⑩
⑪	⑪	⑫	⑫
⑬	⑬	⑭	⑭
⑮	⑮	⑯	⑯
⑰	⑰	⑱	⑱
⑲	⑲	⑳	⑳

いまの書き方：@counter-style でもっとかんたんに

いまは CSS の『@counter-style』で、丸数字のリストをもっとかんたんに作れます。
HTML は ol と li だけ、span も ①（環境依存文字）も書かなくて大丈夫です。
数字のあとの文は、ふつうの ol と同じしくみなので、2 行目からも自然に揃います。

『symbols』に並べた文字が、順番に数字の代わりになります（ここでは ① から ⑳）。『suffix』は数字のあとに入る文字で、ここでは半角スペースです。21 番目からは、ふつうの数字（21.）になります。
Chrome・Edge・Firefox・Safari（17 以降）で使えます。

@counter-style maru {
  system: fixed;
  symbols: "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩" "⑪" "⑫" "⑬" "⑭" "⑮" "⑯" "⑰" "⑱" "⑲" "⑳";
  suffix: " ";
}
ol.maru_d {
  list-style: maru;
  margin: 0;
  padding-left: 1.3em;
}

コードを見る（HTML・CSS）

HTML

<ol class="maru_d">
  <li>リスト1のテキスト</li>
  <li>リスト2のテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
  <li>リスト3のテキスト</li>
  <li>リスト4のテキスト</li>
  <li>リスト5のテキスト</li>
</ol>

CSS

/* ---------- 04 いまの書き方（@counter-style） ---------- */
@counter-style maru {
  system: fixed;
  symbols: "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩" "⑪" "⑫" "⑬" "⑭" "⑮" "⑯" "⑰" "⑱" "⑲" "⑳";
  suffix: " ";
}
ol.maru_d {
  list-style: maru;
  margin: 0;
  padding-left: 1.3em;
}

見本ページをひらく（いまの書き方（@counter-style））