番号付きリストの番号をひらがなやカタカナに

ol要素とli要素とで作る番号付きリストには、各項目の先頭に数字で番号が振られます。この1・2・3……という算用数字での番号は、アルファベットで「A・B・C……」と順に振ることも可能ですが、なんと「あ・い・う……」や「ア・イ・ウ……」のようにひらがなやカタカナに置き換えることもできます。驚きです。

リストの先頭数字を変化させるには、list-style-typeプロパティを使います。これに値「hiragana」を指定すると、「あ・い・う・え・お……」という50音順で「ひらがな」が割り振られます。「katakana」を指定すると、「ア・イ・ウ・エ・オ……」という50音順で「カタカナ」が割り振られます。

※ただし、サポートしてないブラウザもあるので、使い方には注意が必要です。（後述）

list-style-typeプロパティを使って「番号付きリスト」の番号をひらがなやカタカナにする方法

以下のようなHTMLソースで番号付きリストを作っている場合を例にします。

<ol class="japanese">
   <li>最初の箇条書き項目</li>
   <li>2番目の箇条書き項目</li>
   <li>3番目の箇条書き項目</li>
</ol>

以下のようなCSSソースを書けば、先頭の数字が50音順の「ひらがな」になります。

ol.japanese {
   list-style-type: hiragana;
}

先ほどのHTMLソースにこのCSSソースを加えて表示させると、次のように見えます。

さて、「ひらがな」になってるでしょうか？(^_^;;;
いやいや、1・2・3……という算用数字にしか見えませんよ、という方々も多数おられると思います。

ひらがなやカタカナでの番号割り振りをサポートしていないブラウザもある

残念ながら、IEやEdgeでは値「hiragana」や「katakana」をサポートしていないようで、「ひらがな」や「カタカナ」にはならず、ただ普通に(何も指定しない場合と同様に)算用数字で振られます。

FirefoxやChromeなどで閲覧すると、ちゃんとひらがなで表示されるのが分かるはずです。Firefoxの場合は「あ、い、う、……」のように読点「、」記号を使って番号と内容が区切られていました。Chromeの場合は「あ．い．う．……」のように区切り記号自体は他の場合と同様にピリオドになっていましたが。

ひらがなやカタカナで割り振られることを前提にするのは避ける方が良い

まあ、ただ「箇条書きを書きたい」というだけなら、ブラウザによって表記の種類が異なってもあんまり困ることはないと思います。

しかし。

何かの手順を示す場合とか、選択肢を示す場合とか、「割り振られている番号が重要」な場面ではちょっと困ります。
例えば、回答の選択肢を列挙しておいて、最後に「正解は、『う』です！」などと書いても、「あ・い・う……」ではなくて「1・2・3……」としか見えていない環境では意味不明になってしまいます。

というわけで、「割り振られている番号(文字)が重要」になる書き方をする場合は、番号そのものに凝ったりせず、普通に「1・2・3……」という(デフォルトの)算用数字を使っておく方が良さそうな気がします。(^_^;)

(更新日：2016年02月09日)