list-style-image

li.test { list-style-image: none;}
li.test1 { list-style-image: url(/sample.png);}

これらのサンプルは以下の画像(横幅30px、高さ30px)を使用しています。

<ul style="list-style-image: none;">
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
</ul>

<ul style="list-style-image: url(/dics/dictionary-css/img/list-style-image_1.png);">
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
</ul>

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

全バージョンで対応しています

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

7 以降 ○

6 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

li要素及び、『display』プロパティが『list-item』または『inline-list-item』と指定されている要素のマーカーを指定画像で表示します。

マーカー画像を使用した場合、以下のように文字との位置ズレが発生することが多々あります。

<ul style="list-style-image: url(/dics/dictionary-css/img/list-style-image_1.png);">
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
</ul>

マーカー画像と文字を同じ位置に揃えたい場合は『list-style-image』プロパティではなく、『background』プロパティ等を使用し背景画像としてマーカーを表示したあと、『padding』プロパティ、『height』プロパティ、『line-height』プロパティ等で位置調整をした方が設計が楽です。

<p>以下のli要素には『list-style-type: none』、『background: url(/dics/dictionary-css/img/list-style-image_1.png) no-repeat』、『padding-left: 30px』、『height: 30px』、『line-height: 30px』と指定しています。</p>
<ul>
	<li style="list-style-type: none; background: url(/dics/dictionary-css/img/list-style-image_1.png) no-repeat; padding-left: 30px; height: 30px; line-height: 30px;">ここはli要素です。</li>
	<li style="list-style-type: none; background: url(/dics/dictionary-css/img/list-style-image_1.png) no-repeat; padding-left: 30px; height: 30px; line-height: 30px;">ここはli要素です。</li>
	<li style="list-style-type: none; background: url(/dics/dictionary-css/img/list-style-image_1.png) no-repeat; padding-left: 30px; height: 30px; line-height: 30px;">ここはli要素です。</li>
	<li style="list-style-type: none; background: url(/dics/dictionary-css/img/list-style-image_1.png) no-repeat; padding-left: 30px; height: 30px; line-height: 30px;">ここはli要素です。</li>
	<li style="list-style-type: none; background: url(/dics/dictionary-css/img/list-style-image_1.png) no-repeat; padding-left: 30px; height: 30px; line-height: 30px;">ここはli要素です。</li>
</ul>