番号付きリストにローマ数字で番号を振りたい

ol要素とli要素とで作る番号付きリストには、標準では各項目の先頭に算用数字で番号が振られます。この1・2・3……という算用数字での番号は、スタイルシートを使うことでローマ数字などその他の番号表記に置き換えられます。

リストの先頭記号(数字表現)を変化させるには、list-style-typeプロパティを使います。これに値「lower-roman」を指定すると小文字のローマ数字で番号が振られ、「upper-roman」を指定すると大文字のローマ数字で番号が振られます。

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

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

ここで、以下のようなCSSソースを書いて適用すれば、先頭の算用数字が「小文字のローマ数字」に変わります。

ol.roman {
   list-style-type: lower-roman;
}

先ほどのHTMLソースにこのスタイルシートを加えて表示させると、次のように見えます。番号付きリストの番号が算用数字ではなくローマ数字になっているのが見えるはずです。

大文字のローマ数字にするには、list-style-typeプロパティの値を「upper-roman」にするだけです。CSSソースは以下のような感じです。

ol.roman {
   list-style-type: upper-roman;
}

これで、次のように大文字のローマ数字が振られます。

このように、ローマ数字でリスト番号を付けたい場合に使えます。

備考：算用数字の代わりに使える表記はローマ数字以外にもある

指定できる値はローマ数字だけではなく、下記のようにアルファベットなどを使って番号を振る指定もできます。

• 英字(小文字) lower-alpha ： a・b・c……
• 英字(大文字) upper-alpha ： A・B・C……
• ギリシャ文字 lower-greek ： α・β・γ……

一部のブラウザもっと広い指定が可能で、例えば「ひらがな」(あいう……)や「カタカナ」(アイウ……)などもあります。詳しくは、list-style-typeプロパティのリファレンスなどを参照してみて下さい。

対応していなくて算用数字で表示されてしまっても問題ないように

なお、ブラウザによって対応している文字種に限りがありますので、絶対に上記のように表示されるとは限りません。
ローマ数字くらいであれば、たいていのブラウザで意図通りに表示されるとは思いますが。対応していない値が指定された場合には、おそらくデフォルトの算用数字で表示されます。

念のために、(意図とは異なる)算用数字で番号が振られている場合でも問題ないように(読者が解釈できるように)しておく方が良いでしょう。

番号付きリストの連番表記を算用数字に戻したい場合のCSSソース

リストの連番表記をローマ数字などに変更されたCSSを読み込んでいる状態で、特定の場所だけは算用数字での表記に戻したい場合もあります。
その場合には、list-style-typeプロパティの値にdecimalを指定します。
例えば以下のように記述します。

ol {
   list-style-type: decimal;
}

これで、番号表記が 1・2・3…… という算用数字表記に戻ります。

ちなみに、値を decimal ではなく decimal-leading-zero にすると、番号が1桁だった場合にだけ先頭に「0」を付加した2桁で表示されるようになります。

ol要素を使った連番の場合は、桁数に関係なくドット記号「.」部分が揃うので、あまり表示桁数を気にしなくても綺麗に揃いますが。それでも、2桁で揃えたい場合にはこのように指定すると良いでしょう。なお、2桁固定なので100項目以上ある場合でも、1～9番目の頭に付加される「0」の個数は1個だけです。

(更新日：2017年07月09日)