list-style-imageプロパティは、リストマーカーを任意の画像に変更する事ができます。

このプロパティは、マーカーを画像に変更できるので便利ですが、厄介な問題として画像の位置を指定できません。
これにより、うまくデザインが再現出来なかったりするので、あまり使うケースが無かったりします。代替手段として、backgroundプロパティにマーカー用の画像を背景として指定する方法が多く使われています。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

<URI>｜none｜inherit

初期値

none

適用される要素

li要素、display: list-item;の要素

継承

します

パーセント値

N/A

メディア

visual

値の解説

<URI>

リストマーカー用の画像をURLで指定します。

none

リストマーカー用の画像を使用しません。

マーカー用に指定した画像が何らかの理由で読み込まれなかったり利用出来なかった場合は、list-style-typeプロパティで指定したマーカーが表示されます。

list-style-imageのサンプル

ul.mark01 {
  list-style-image: url(../img/property/mark_01.gif);
}

ul.mark02 {
  list-style-image: url(../img/property/mark_02.gif);
}

ul.mark03 {
  list-style-image: url(../img/property/mark_03.gif);
}

<ul>
<li>マーカー画像を指定していないリストです。</li>
<li>マーカー画像を指定していないリストです。</li>
</ul>
<ul class="mark01">
<li>マーカー画像を指定したリストです。</li>
<li>マーカー画像を指定したリストです。</li>
</ul>
<ul class="mark02">
<li>マーカー画像を指定したリストです。</li>
<li>マーカー画像を指定したリストです。</li>
</ul>
<ul class="mark03">
<li>マーカー画像を指定したリストです。</li>
<li>マーカー画像を指定したリストです。</li>
</ul>

マーカー画像

• mark01.gif
• mark02.gif
• mark03.gif

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

• マーカー画像を指定していないリストです。
• マーカー画像を指定していないリストです。

• マーカー画像を指定したリストです。
• マーカー画像を指定したリストです。

• マーカー画像を指定したリストです。
• マーカー画像を指定したリストです。

• マーカー画像を指定したリストです。
• マーカー画像を指定したリストです。

最初の、mark01.gifはブラウザによってかなり位置が変わってきていますが、mark02.gifの8*8pxの画像は、おおよそどのブラウザでもイイ感じの位置に表示されてます。