【備忘録】〇で囲った数字の作り方

こんにちは、カリンです。

①、②、③…など〇で数字を囲った文字を入力するときってありますよね。
数字を変換すると入力できるこれらの文字ですが、環境依存文字といってOSによっては文字化けしてしまう可能性のある文字です。
文字化けを回避するため、文字コードを入力して表示する方法がありますが、コードを調べるのが面倒です。
しかも❶など丸の中が塗りつぶしになっているものは20までしかなく、足りないこともあります。
そこで、今回はCSSで作成する丸数字の入力方法を紹介します。

出来上がりサンプル

See the Pen CSSで作る丸文字 by Karin (@Karin-Mie) on CodePen.

ポイント

・『ol』の、『list-style』は『none』にする
・『counter-reset』と『counter-increment』で数字をカウント化する
・丸の中を塗りつぶすならbackgroundで色を指定
・数字の色と丸の色はcolorで指定
・あとはcssでheightやwidth等を調整していく