Web制作

【CSS】リストで①や②などの丸数字を使う方法

CSSで<ol>に丸数字（①や②みたいなやつ）を使いたいことがありました。

「これってCSSだけでできるんだっけ？」と思ったのでやり方をまとめてみます。

1 CSSに丸数字を表示するプロパティはない
2 CSSで丸数字を作る方法
3 リストが増えても大丈夫！
4 まとめ

CSSに丸数字を表示するプロパティはない

残念ながら①や②といった丸数字をそのまま表示できるプロパティはないみたいです。list-style-typeとかいじってもできないらしい。

ただ、自分で作ろうと思えば案外簡単に作れてしまいます。

CSSで丸数字を作る方法

丸数字を作るといっても結構簡単です。

擬似要素で円を作って、その中に数字を入れれば「①」みたいな感じにできますね。

というわけで早速作ります。コードはこんな感じです。

<ol>
<li>リストです</li>
<li>リストです</li>
<li>リストです</li>
<li>リストです</li>
<li>リストです</li>
</ol>

HTMLはリストを作っただけです。

ol {
list-style-type: none;
counter-reset: number;/* カウンターを初期化 */
}
li {
position: relative;
}
/* beforeでカウンターを作成 */
li::before {
content: counter(number);
counter-increment: number;
padding: 0 0.2em;
}
/* afterで○を作る */
li::after {
content: '';
/* 配置を調整 */
position: absolute;
display: block;
top: 50%;
left: 0;
transform: translateY(-50%);
/* ○を作る */
width: 1em;
height: 1em;
border: 1px solid #000;
border-radius: 50%;
}

やることとしてはbeforeではCSSのカウンターを使って数字の連番を作り、afterで○を作ります。この○の中に配置を調整して数字が入るようにします。

最初にolでカウンターを初期化します。counter-reset: カウンター名;と指定すればok。カウンター名は自分の好きな名前をつけて大丈夫です。

次にbeforeにcontent: counter(カウンター名);とcounter-increment: カウンター名;を指定するともうカウンターが作れちゃいます！contentに”はいらないことに注意。

ちなみにpadding: 0 0.2em;を指定するとどのフォントサイズでも数字が丸の中心あたりに入ってくれて綺麗です。

次にafterで丸を作ります。position: absolute;でtop: 50%とtransform: translateY(-50%);は縦方向に中央揃えする定番のやり方です。覚えておくと便利。

あとはフォントと同じ大きさ（＝1em）の正方形をwidthとheightとborderを使って作り、border-radius: 50%;で角を丸めたら丸になります。

この丸を数字が中に入るようにうまく配置したら①や②といった丸数字ができちゃいます！