順序リストのリスト番号の種類・位置・画像を一括指定

順序リスト（ol）のリスト番号の種類・位置・画像を、スタイルシート（CSS）で、まとめて指定する方法。

順序リストとは、下記のようなリストタグのこと。

リスト番号の種類・位置・画像を、まとめて指定するには、list-style プロパティを使う。

概要

list-style: 種類 位置 画像;
指定する順番に、決まりはない。種類と画像を同時に指定した場合、画像を優先する。
list-style は、CSS 1 で定義されたプロパティ。

種類

値は、list-style-type プロパティと同様、decimal、upper-roman、lower-roman、upper-alpha、lower-alpha、none、decimal-leading-zero、upper-latin、lower-latin、cjk-ideographic、hebrew、armenian、 georgian、lower-greek、hiragana、katakana、hiragana-iroha、katakana-iroha のいずれかを入れる。list-style-type は、CSS 1 で定義されたプロパティだが、値は、CSS 1 で定義された値と、CSS 2 で定義された値がある。CSS 1 で定義された値は、ほとんどのブラウザが対応しているが、CSS 2 で定義された値は、ブラウザによっては、対応していないこともある。

位置

値は、list-style-position プロパティと同様、inside、outside のいずれかを入れる。
初期設定値:outside
inside、outside ともに、CSS 1 で定義された値。

画像

値は、list-style-image プロパティと同様、url(画像のURL)、none のいずれかを入れる。
初期設定値:none

基本例

upper-roman inside

種類 : upper-roman
位置 : inside

decimal-leading-zero inside

種類 : decimal-leading-zero
位置 : inside