Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

list-style-image

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

サンプルコード

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

指定可能な値一覧

値	概要
none	マーカーを画像で表示しません。この『none』が初期値です。
画像へのパス	マーカーを指定画像で表示します。

ブラウザでの表示結果

これらのサンプルは以下の画像(横幅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>

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

概要

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>

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPortalウェブプログラミングポータル