list-style-image

list-style-imageプロパティはリスト項目の行頭に表示するマーカーに用いる画像(イメージ)を指定します。

初期値
none
適用対象
リスト項目要素li要素
継承
する
メディア
visual

list-style-imageプロパティの値

値は "url()" の形式で括弧内に画像の所在となる URI を指定します。また、画像を指定しないことを示す "none" のキーワードを指定することもできます

リスト項目のマーカーの形状を指定する list-style-typeプロパティの値に "none" 以外のキーワードが指定されている場合、行頭のマーカー部分には、list-style-typeプロパティで指定された形状よりも list-style-imageプロパティによる画像が優先されて表示されます。ただし、何らかのトラブルで画像が表示できない場合や画像の表示に対応していない・あるいは表示しない設定にしている環境においては、list-style-typeプロパティで指定された形状が代替で表示されます。

list-style-imageプロパティの実装状況

IE
Firefox
Opera
Chrome
Safari
iOS
Android

サンプル

ul        { list-style-image : url(image1.gif) ; }
ul ul    { list-style-image : url(image2.gif) ; }
ul ul ul { list-style-image : url(image3.gif) ; }

list-style-imageプロパティは子要素に継承されるので、適用対象の li要素以外の親要素に list-style-imageプロパティが指定されている場合でも、その指定は、子要素の li要素へと継承されることになります。なお、CSS2 仕様では、直接適用対象となる li要素をセレクタとするのではなく、親要素の ul要素や ol要素をセレクタとして、継承させる形で指定することが推奨されています。

Updated / Published