list-style-image

list-style-imageは、リストマーカーの画像を指定するスタイルです。

解説

リストマーカーに用意した画像を指定できます。
指定方法はファイルパス形式とURL型式の２通りの指定が可能です。

構文は以下になります。

list-style-image: 値;

list-style-imageには以下の値が指定できます。

値	説明
URL	マーカーに画像を指定する（例）list-style-image:url('image/arrow.png');
none	マーカーに画像を指定しない（初期値）（例）list-style-image:none;

太字の値は初期値です。


.sample01 {
  list-style-image:url('image/arrow01.gif');
}


<ul class="sample01">
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>


.sample01 {
  list-style-image:url('http://xxx.xxx.xxx/image/arrow01.gif');
}


<ul class="sample01">
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>