CSS

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>

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

  1. リスト項目１
  2. リスト項目２
  3. リスト項目３
  4. リスト項目４
  5. リスト項目５

　このページで使った画像は、「 DOTS・DESIGN 」様よりお借りしました。