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

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

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

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%;で角を丸めたら丸になります。

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

リストが増えても大丈夫！

今回紹介したやり方を使えば、もし修正でリストの個数が増えても移動で連番を振ってくれます！

<span>&#9312;</span>みたいに環境依存文字を入れて丸数字を表示させる方法もありますが、これだと毎回<span>を入れる必要があったり、リストの個数が変動する場合には使いにくかったりします。

丸数字を作りたいなら今回紹介した方法が一番いいかなと個人的に思います。

まとめ

CSSで丸数字を表示するプロパティはありませんが、ちょっと工夫すれば割と簡単に作れました。

頭のひねりようでもっと柔軟なデザインができるようになるはずなので、いろいろ試してみながらやると面白いです！

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。