丸で囲む利点

項目の連番号を丸で囲むと表現に柔らかみが生じます。順序付きリスト(ol)は番号付きリストとして表示され、その子要素(li)に数字や文字による連番のリストマーカーを伴って表示されます。

この使い方は微に入り細に入り多様な表現を可能にしますが、番号の色や背景色を希望通りに設定することが容易ではありません。設定法の一例を示します。

丸囲み文字の使用例

使用例のプログラミングコード

<style>
.order0{list-style:none;}			/* color, number */
.order0 .item0::before {
    font-size: 18px;
    margin-left: -10px;
    content:"㊟";					/* num指定で置き換わる */
}
.order1 {counter-reset:my-counter; list-style:none; padding:0;}
.order1 .item1{margin-bottom:10px; padding-left:30px; position:relative;}
.order1 .item1::before{				/* color, background */
  content:counter(my-counter);
  counter-increment:my-counter;
  color:black;
  background:khaki;
  display:block;
  float:left;
  line-height:1.5em;				/* heightが22pxのとき */
  margin-left:-20px;
  text-align:center;
  height:22px;
  width:22px;
  border-radius:50%;
}
.item0[clr='0']::before {color:gold;}
.item0[clr='1']::before {color:crimson;}
.item0[clr='2']::before {color:lightgreen;}
.item0[clr='3']::before {color:black;}

.item0[num='0']::before {content:"➊";}
.item0[num='1']::before {content:"❷";}
.item0[num='2']::before {content:"❸";}
.item0[num='3']::before {content:"❹";}

.item0[num='50']::before {content:"㋐";}
.item0[num='51']::before {content:"㋑";}
.item0[num='52']::before {content:"㋒";}
.item0[num='53']::before {content:"㋓";}
/**************************************************** copyright 2021, TacM ********/
.item1[clr='0']::before {color:navy;}
.item1[clr='1']::before {color:red;}
.item1[clr='2']::before {color:lightgreen;}
.item1[clr='3']::before {color:black;}

.item1[bak='0']::before {background:skyblue;}
.item1[bak='1']::before {background:crimson;}
.item1[bak='2']::before {background:lightgreen;}
.item1[bak='3']::before {background:pink;}
</style>
<ol class="order0">		<!-- numは省略不可 -->
    <li class='item0' clr='0' num='0'>ニンジン</li>
    <li class='item0' clr='0' num='1'>キャベツ</li>
    <li class='item0' clr='0' num='2'>レタス</li>
</ol>
<ol class="order0">		<!-- numは省略不可 -->
    <li class='item0' clr='1' num='50'>動物園</li>
    <li class='item0' clr='1' num='51'>水族館</li>
    <li class='item0' clr='1' num='52'>科学館</li>
</ol>
<ol class="order1">		<!-- numは標準の数字、clrとbakは適宜、色、背景色を設定可能 -->
    <li class='item1' clr='1' bak='0'>高橋さん</li>
    <li class='item1' clr='1' bak='0'>鈴木さん</li>
    <li class='item1' clr='1' bak='0'>田中さん</li>
</ol>
<ol class="order1" style="counter-reset:my-counter 20;">	<!-- numを指定する(値-1)に設定 -->
    <li class='item1' clr='2' bak='1'>箱根湯本温泉</li>
    <li class='item1' clr='2' bak='1'>草津温泉</li>
    <li class='item1' clr='2' bak='1'>由布院温泉</li>
</ol>

使用例コードの解説

Cssに相当するstyle要素の中にorder0とorder1によってol要素を定義します。item0にて囲み丸の背景色と開始番号を定義し ています。item1にて連番号の色と囲み丸の背景色を設定します。

一番目の例は番号スタイルを自ら示したデザインで表示しています。丸や四角に囲まれたり、かな、十二支、ギリシャ文字などの連番号を表示できます。

二番目は丸囲みカタカナをリストマーカーにしています。

三番目は丸の背景をスカイブルー、数字の色を赤色に指定しています。

四番目は番号を21から始め、丸の背景色をクリムソン、数字の色をライトグリーンで表示しています。

二番目の例は項目数の数だけ擬似要素タグbeforeに指定する必要があります。項目数が多い場合は一番目の例が適しているでしょう。

その際、桁数をそろえるために1～9のとき、先頭に０を付加することが可能です。「先頭に０を付ける」でググってみましょう。

おまけ

当初、新型コロナウイルスの変異ウイルスを、発見された地名を先頭に付けて「インド株」などと呼んでいましたが、発見された地名にすべての責任があるとは限らず差別に繋がることを避けるために、ギリシャ語のアルファベットで呼ぶように改められました。

24文字からなるギリシャ文字は1～24の連番号に利用されます。24を超えたらどうなるのでしょうか。

擬似要素タグの使い方は難しいです。動作を確認したサンプルコードが参考になればありがたいです。