list-style-image

この記事では「list-style-image」について、基本の意味と使い方を初心者向けにやさしく説明します。

リストのマーク画像を指定する

　リストのマークとして使用する画像を設定します。画像が表示されない場合は、list-style-typeプロパティで設定されている種類のマークが表示されます。

書式

list-style-image: 値

適用対象

li 要素

初期値

none

値の継承

する

指定できる値

URL: マークとして表示させる画像の URL を指定します。CSS で URL を指定する場合は、そのまま URL を書かずに url() という書式を使って、() の中に URL を記述します。URL は二重引用符 ( " ) または一重引用符 ( ' ) で囲うこともできます。; Mac 版の IE では、URL を一重引用符 ( ' ) で囲うと画像が表示されなくなります。
none: マークとして画像を表示しません。

リストに同じ画像を指定する

　マークとして画像を使用した例です。

CSS source


body {
	color: #000000;
	background: #ffffff;
}
.c1 { list-style-image: url(imgs/list_style_image01.gif) }
.c2 { list-style-image: url(imgs/list_style_image02.gif) }

HTML source


<ul class="c1">
	<li>リスト項目１</li>
	<li>リスト項目２</li>
	<li>リスト項目３</li>
</ul>

<ul class="c2">
	<li>リスト項目１</li>
	<li>リスト項目２</li>
	<li>リスト項目３</li>
</ul>

リストに同じ画像を指定するのサンプル

リスト項目１
リスト項目２
リスト項目３

リスト項目１
リスト項目２
リスト項目３

リストの項目ごとに画像を変える

　この例では、各項目の番号に合わせた画像を指定しています。

CSS source


.c1 { list-style-image: url(imgs/ico_num7a_1.gif) }
.c2 { list-style-image: url(imgs/ico_num7a_2.gif) }
.c3 { list-style-image: url(imgs/ico_num7a_3.gif) }
.c4 { list-style-image: url(imgs/ico_num7a_4.gif) }
.c5 { list-style-image: url(imgs/ico_num7a_5.gif) }

HTML source


<ol>
	<li class="c1">リスト項目１</li>
	<li class="c2">リスト項目２</li>
	<li class="c3">リスト項目３</li>
	<li class="c4">リスト項目４</li>
	<li class="c5">リスト項目５</li>
	</ol>

リストに同じ画像を指定するのサンプル

リスト項目１
リスト項目２
リスト項目３
リスト項目４
リスト項目５