CSSで大文字のローマ数字を使って順序付きリストをスタイリングする方法

CSSのlist-style-typeプロパティを使えば、順序付きリスト（番号付きリスト）の番号を大文字のローマ数字に変更できます。本記事ではその具体的な方法をわかりやすく解説します。

HTMLで順序付きリストを作成する基本

HTMLで順序付きリストを作成するには、以下の2つのタグを使用します。

• 順序付きリスト全体を定義する <ol> タグ
• 個々のリスト項目を定義する <li> タグ

基本的な記述例は以下のとおりです。

<ol>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
</ol>

デフォルトではアラビア数字が表示される

何も指定しない場合、順序付きリストの項目には通常のアラビア数字（1、2、3…）が表示されます。

1. リスト項目
2. リスト項目
3. リスト項目

このデフォルトのアラビア数字は、すべてのブラウザに組み込まれている「ユーザーエージェントスタイルシート（UAS）」によって適用されるもので、CSSでは list-style-type: decimal; として定義されています。

CSSで大文字のローマ数字を追加する方法

大文字のローマ数字（Ⅰ、Ⅱ、Ⅲ…）を使ったリストを作成するには、CSSプロパティの list-style-type でデフォルトのアラビア数字スタイルを上書きします。値には upper-roman を指定してください。

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

実際の表示例は以下のとおりです。

1. リスト項目
2. リスト項目
3. リスト項目

なお、小文字のローマ数字にしたい場合は lower-roman を指定するだけで簡単に切り替えられます。章立てや目次など、格式のあるデザインにローマ数字のリストを活用してみてください。