| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {list-style-image: 値 } |
| 値 の形式 | none | url( 画像ファイル ) |
| 初 期 値 | none |
| 対応ブラウザー | C1+ / e4+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
| 適用可能な要素 | <ul>, <ol>, <li> などのリストアイテム要素 （display プロパティの値が list-item である要素） |
| 継 承 | する |
list-style-imageプロパティ は，リスト・マーカーの画像 を指定します。
リスト・マーカーとして使用可能な適切な画像ファイルを指定した場合には，list-style-type プロパティ によるリスト・マーカーの指定に優先して，ここで指定した画像ファイルがリスト・マーカーとして使用されます。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| none | リスト・マーカーとして使用する画像ファイルを指定しません。 （初期値） |
| url( 画像ファイル ) | リスト・マーカーとして使用する画像ファイルの URL を指定します。 |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
div.sample {
width: 20em;
margin: 10px;
padding: 5px;
border: 2px solid #8c8c8c ;
}
.ul1 { list-style-type: circle; }
.ul2 { list-style-image: url(star.png); }
.ul3 {
list-style-type: circle;
list-style-image: url(star.png);
}
li.pic1 { list-style-image: url(star.png); }
li.pic2 { list-style-image: url(bubble_s.png); }
-->
</style> |
| HTML <body> ～ </body> |
<div class="sample">
<ul class="ul1">
<li>項目１（通常の <li> 要素）</li>
<li>項目２（通常の <li> 要素）</li>
<li class="pic1">項目３（pic1クラスの <li> 要素）</li>
<li class="pic2">項目４（pic2クラスの <li> 要素）</li>
</ul>
</div>
<div class="sample">
<ul class="ul2">
<li>項目１（通常の <li> 要素）</li>
<li>項目２（通常の <li> 要素）</li>
<li class="pic1">項目３（pic1クラスの <li> 要素）</li>
<li class="pic2">項目４（pic2クラスの <li> 要素）</li>
</ul>
</div>
<div class="sample">
<ul class="ul3">
<li>項目１（通常の <li> 要素）</li>
<li>項目２（通常の <li> 要素）</li>
<li class="pic1">項目３（pic1クラスの <li> 要素）</li>
<li class="pic2">項目４（pic2クラスの <li> 要素）</li>
</ul>
</div> |
| ブラウザー 表示例 |
|---|
↑ { list-style-type: circle; } の表示
↑ { list-style-image: url(star.png); } の表示
↑ { list-style-type: circle; list-style-image: url(star.png); } の表示 |