プロパティ名値適用対象継承
list-style-image:画像li要素有り
　　
値説明
画像url( )表示する画像ファイルのURLを「( )」内に指定します
none画像なしで表示（デフォルト）
list-style-imageプロパティは、リストの行頭に表示する画像を指定します。
値には、画像ファイルのURLまたは、noneを指定します。画像ファイルのURLは、「U R L」に続けて「( )」内にダブルクォーティション「"」で囲んで「 url (" image.gif ") 」のように指定します。
このプロパティは、ul, li, ol 要素に指定して使用します。li 要素にlist-style-imageプロパティを指定すると、リスト項目ごとに行頭の画像を変更できます。
また、ul要素又はol要素とli要素の両方に指定すると、li要素に指定した値が優先されます。

注意画像 ●list-style-typeプロパティと同時に指定した場合は、list-style-imageプロパティの方が優先されます。又指定した画像が見つからない場合は、list-style-typeプロパティで指定した値が適用されます。

list_sampl02.gif

サンプルソース
【CSS】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <style type="text/css"> <!-- ul {list-style-image:url("../img/rist01.gif");} .sampl01{list-style-image:url("../img/rist02.gif");} .sampl02{list-style-image:url("../img/rist03.gif");} .sampl03{list-style-image:url("../img/rist04.gif");} .sampl04{list-style-image:url("../img/rist05.gif");} .sampl05{list-style-image:url("../img/rist06.gif");} ul {color:blue; font-size:1.5em } --> </style> </head> 【HTML】 <body> <ul> <li>リストの画像を表示する1</li><li>リストの画像を表示する1</li><li>リストの画像を表示する1</li> </ul> <ul> <li class="sampl01">リストの画像を表示する2</li> <li class="sampl02">リストの画像を表示する3</li> <li class="sampl03">リストの画像を表示する4</li> <li class="sampl04">リストの画像を表示する5</li> <li class="sampl05">リストの画像を表示する6</li> </ul> </body> </html>