はじめに

普通に<ol><li>を使用すると、リストの頭に「1」「2」「3」、、、と表示されますが、数字ではなく「①」「②」「③」・・・と表示させる方法が無いか色々調べました。

list-style-type:プロパティで指定できそうですが、調べた結果できなさそうなので別の方法で再現しました。その方法をご紹介します。

①②③・・・は機種依存文字のため、エスケープ処理を行っています。

仕上がりイメージ

目次

htmlで記述する場合

html内にエスケープ文字（①なら「①」）を記述する方法です。当然ですがエスケープ文字をhtml内に記述するので①、②、③、、、と表示されます。

CSSではlist-style:none;と記述しておかないと、本来のリストの数字も一緒に表示されてしまいます。

HTML

<ol class="test">
　<li>&#9312;いちばんめ</li>
　<li>&#9313;にばんめ</li>
　<li>&#9314;さんばんめ</li>
　<li>&#9315;よんばんめ</li>
　<li>&#9316;ごばんめ</li>
</ol>

CSS

.test {
　list-style:none;
}

できあがったもの

htmlのみでも〇付きの数字は書けます。
しかし、上記htmlの場合、途中の項目の削除をしたい場合（たとえば「③さんばんめ」だけ削除したい場合）、<li>内全てのエスケープ文字を修正しないと、①②④みたいな並びになってしまうので更新に気を使います。

それを回避するため、CSS側の記述で自動的に〇付き数字が順番に書けないか試してみました。

CSSの疑似要素でエスケープ文字を記述してみる

まずは、CSSの疑似要素（この場合だと.test::before）を使うことで、html内へ記述をせずに〇付き数字が表示できるか試してみました。

HTML

<ol class="test">
　<li>いちばんめ</li>
</ol>

CSS

.test {
　list-style:none;
}
.test li::before {
　content: "①";
}

できあがったもの

結果は、①がエスケープ処理されずそのまま表示されてしまいました。

調べてみたところ、上記は10進数でのエスケープ記述のようです。CSS内にエスケープ文字を記述するには10進数ではなく16進数に書き換えないといけないようです。

その他にも書き換えには決まりがありますが、ルールを覚えるより書き換えた文字を覚えた方が効率が良いと思いましたので、詳しくは説明するのは割愛します。

10進数と16進数の〇付きの数字のエスケープ表記

ちなみに、16進数のエスケープ文字をHTMLに直接記述しても、エスケープ変換されず文字列のまま表示されました。

疑似要素に16進数のエスケープ文字で記述する

10進数のエスケープ文字をCSSに記述しても、上記のようにHTMLには正しく反映されないため、今度は疑似要素に16進数のエスケープ文字を記述してみます。

HTMLは先ほどと同じため割愛します。

CSS

.test {
　list-style:none;
}
.test li::before {
　content: "\02460";
　//バックスラッシュが¥で表示される場合がありますが、内容は同じです
}

できあがったもの

今度はうまくできました。次のステップでは②以下の数字も表示できるよう、同様にCSSを調整していきます。

16進数のエスケープ文字をCSSに追加する

②以下の数字が表示できるよう、CSSの疑似要素を次のように記述します。

HTML

<ol class="test">
　<li>いちばんめ</li>
　<li>にばんめ</li>
　<li>さんばんめ</li>
　<li>よんばんめ</li>
　<li>ごばんめ</li>
</ol>

CSS

.test {
　list-style:none;
}
.test li:nth-of-type(1)::before {
　content: '\02460';
}
.test li:nth-of-type(2)::before {
　content: '\02461';
}
.test li:nth-of-type(3)::before {
　content: '\02462';
}
.test li:nth-of-type(4)::before {
　content: '\02463';
}
.test li:nth-of-type(5)::before {
　content: '\02464';
}

できあがったもの

このように、エスケープ文字をhtmlへ記載せずに〇付き数字を表示することができました。

CSS記述が長くはなりますが、この方法の良い点は下記のように<li>　</li>の一部を削除しても、数字が自動的に変更されることです。

試しに上記HTMLから<li>にばんめ</li>と<li>よんばんめ</li>を削除してみました。

HTML

<ol class="test">
　<li>いちばんめ</li>
　<li>さんばんめ</li>
　<li>ごばんめ</li>
</ol>

CSSは上記と同じです。

できあがったもの

ひょっとしたらもっと効率的な方法があるのかもしれませんが、私が現在使っている方法です。

エスケープ文字で〇付きの数字を表記したい時、10進数・16進数ともに①～⑳まで表記できます。

それ以上の数字が必要な場合は、通常のborderの円を作って数字の上に重ねるしか方法が無いかと思います。