CSS3スタイル虎の巻

list-style-image

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

解説

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

構文

構文は以下になります。

list-style-image: 値;

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

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

太字の値は初期値です。

サンプル

マーカーに画像「矢印アイコン」(arrow01.gif)を指定する


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

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

マーカーに画像「http://xxx.xxx.xxx/image/arrow01.gif」を指定する


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

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

備考

  • 画像のパスが間違っていると、黒丸(disc)が表示されます

関連項目