順不同リストのリストマーカーを画像で表示させるスタイルシート（CSS）

順不同リスト（ul）のリストマーカーを、スタイルシート（CSS）で指定し、画像で表示させる方法。

順不同リストとは、下記のようなリストタグのこと。

ソース

表示

1
2
3
4

リストマーカーを画像で表示させるには、list-style-image プロパティを使う。

概要

list-style-image: ***;
***には、url(画像のURL)、none のいずれかを入れる。画像のURLには、画像の場所を示すアドレスを入れる。
初期設定値:none
list-style-image は、CSS 1 で定義されたプロパティ。

リストマーカーを画像で表示する。

ソース

1
2
3
4
5

<p>url(画像のURL) を指定すると</p>
<ul style="list-style-image: url(./star.gif);">
<li>項目</li>
<li>項目</li>
</ul>

表示

url(画像のURL) を指定すると

none を指定すると、画像で表示させない。
list-style-type プロパティで指定したリストマーカーを表示することになる。

ソース

表示

1
2
3
4
5

<p>none を指定すると</p>
<ul style="list-style-image: none;">
<li>項目</li>
<li>項目</li>
</ul>

none を指定すると