にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

番号付きリストを算用数字ではなくローマ数字に変更するCSS [リスト]

ol要素とli要素とで作る番号付きリストは、標準では1・2・3……という算用数字で番号が振られます。この連番をローマ数字での番号表記に置き換えるスタイルシート(CSS)の書き方を紹介。list-style-typeプロパティに値「lower-roman」や「decimal」を指定するだけなので簡単です。

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

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

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

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

HTMLソース

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

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

CSSソース

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

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

  1. 最初の箇条書き項目
  2. 2番目の箇条書き項目
  3. 3番目の箇条書き項目
  4. 4番目の箇条書き項目
  5. 5番目の箇条書き項目

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

CSSソース

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

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

  1. 最初の箇条書き項目
  2. 2番目の箇条書き項目
  3. 3番目の箇条書き項目
  4. 4番目の箇条書き項目
  5. 5番目の箇条書き項目

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

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

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

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

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

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

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

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

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

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

CSSソース

ol {
   list-style-type: decimal;
}

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

  1. 最初の箇条書き項目
  2. 2番目の箇条書き項目
  3. 3番目の箇条書き項目
  4. 4番目の箇条書き項目
  5. 5番目の箇条書き項目

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

  1. 最初の箇条書き項目
  2. 2番目の箇条書き項目
  3. 3番目の箇条書き項目
  4. 4番目の箇条書き項目
  5. 5番目の箇条書き項目

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

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---