list-style-typeを使うことで数字やアルファベットだけでなく、漢字やひらがなでも付けることが出来ます。
HTML
<ol id="decimal">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol id="decimal0">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol id="lower-roman">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol id="upper-roman">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol id="cjk-decimal">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol id="hiragana">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol id="katakana">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol id="hiragana-iroha">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol id="katakana-iroha">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol id="lower-alpha">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol id="upper-alpha">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol id="lower-greek">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol id="hebrew">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol id="armenian">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol id="georgian">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
CSS
#decimal{ list-style-type:decimal;}
#decimal0{ list-style-type:decimal-leading-zero;}
#lower-roman{ list-style-type:lower-roman;}
#upper-roman{ list-style-type:upper-roman;}
#cjk-decimal{ list-style-type:cjk-decimal;}
#hiragana{ list-style-type:hiragana;}
#katakana{ list-style-type:katakana;}
#hiragana-iroha{ list-style-type:hiragana-iroha;}
#katakana-iroha{ list-style-type:katakana-iroha;}
#lower-alpha{ list-style-type:lower-alpha;}
#upper-alpha{ list-style-type:upper-alpha;}
#lower-greek{ list-style-type:lower-greek;}
#hebrew{ list-style-type:hebrew;}
#armenian{ list-style-type:armenian;}
#georgian{ list-style-type:georgian;}
list-style-positionを使うことで、リストマーカの位置を外側または内側で指定できます。
HTML
<ol id="outside">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol id="inside">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
CSS
#outside{ list-style-position:outside;
background-color:aqua;}
#inside{ list-style-position:inside;
background-color:lime;}
list-style-imageを使うことで任意の画像で修飾することができます。
HTML
<ol id="mark">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
CSS
#mark{ list-style-image:url(https://source.unsplash.com/20x20/?city,sk)}
修飾(list-style-type)、位置(list-style-position)、画像(list-style-image)の実装サンプルは以下のとおりです。
See the Pen
list by shiakisudev (@shiakisu)
on CodePen.
以上で記事の解説はお終い！
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！