<ol><li>で〇付きの数字(テキスト)が表示できないか試してみた話

2021年1月25日

はじめに

<ol><li>を使用した時に①②③・・・と表示させたいが為に試してみた顛末です。

list-style-type:プロパティで指定できないか調べてみましたが、できなさそうなので色々考えてみました。

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

仕上がりイメージ

  1. いちばんめ
  2. にばんめ
  3. さんばんめ
  4. よんばんめ
  5. ごばんめ

制作の手順

  • htmlで表記する場合
  • CSSの疑似要素でエスケープ文字を記述してみる
  • CSSの疑似要素に16進数のエスケープ文字で記述する
  • CSSを16進数のエスケープ文字で調整する

htmlで表記する場合

  1. ①いちばんめ
  2. ②にばんめ
  3. ③さんばんめ
  4. ④よんばんめ
  5. ⑤ごばんめ

html

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

CSS

.ol_test {
	list-style:none;
}

htmlのみでも〇付きの数字は書けます。
しかし、上記htmlの場合、内容の修正や特に途中の項目の削除をしたい場合<li>内全てのエスケープ文字を修正しないと、①②④みたいな並びになってしまいます。

そのため、CSS側の記述で自動的に〇付き数字が書けないか試してみました。

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

CSSの疑似要素(この場合だと.ol_test::before)を使うことで、html内への記述なしで〇付き数字が表示できるか試してみました。

html

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

CSS

.ol_test {
	list-style:none;
}
.ol_test li::before {
	content: "&#9312;";
}

できあがったもの

  1. いちばんめ

&#9312;がエスケープ処理されず、そのまま表示されました。

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

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

(決して理解できなかったという訳ではない、たぶん)

10進数と16進数に変換した〇付きの数字の一覧

10進数 16進数 10進数 16進数
&#9312; \02460 &#9322; \0246a
&#9313; \02461 &#9323; \0246b
&#9314; \02462 &#9324; \0246c
&#9315; \02463 &#9325; \0246d
&#9316; \02464 &#9326; \0246e
&#9317; \02465 &#9327; \0246f
&#9318; \02466 &#9328; \02470
&#9319; \02467 &#9329; \02471
&#9320; \02468 &#9330; \02472
&#9321; \02469 &#9331; \02473

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

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

CSS

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

できあがったもの

  1. いちばんめ

うまくできました。同じように、②以下の数字も表示できるようCSSを調整します。

CSSを16進数のエスケープ文字で調整する

html

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

CSS

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

できあがったもの

  1. いちばんめ
  2. にばんめ
  3. さんばんめ
  4. よんばんめ
  5. ごばんめ

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

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

  1. いちばんめ
  2. さんばんめ
  3. ごばんめ

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

なお、10進数、16進数ともに⑳まで表記できるようです(10進数:&#9331;)(16進数:\02473)。

それ以上の数字が必要な場合は、〇付き数字は諦めるか、どうしても必要な場合はborderで円を作って数字を囲むかになりそうです。