項 目 | 説 明 |
---|---|
記述形式 | セレクタ {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>項目1(通常の <li> 要素)</li> <li>項目2(通常の <li> 要素)</li> <li class="pic1">項目3(pic1クラスの <li> 要素)</li> <li class="pic2">項目4(pic2クラスの <li> 要素)</li> </ul> </div> <div class="sample"> <ul class="ul2"> <li>項目1(通常の <li> 要素)</li> <li>項目2(通常の <li> 要素)</li> <li class="pic1">項目3(pic1クラスの <li> 要素)</li> <li class="pic2">項目4(pic2クラスの <li> 要素)</li> </ul> </div> <div class="sample"> <ul class="ul3"> <li>項目1(通常の <li> 要素)</li> <li>項目2(通常の <li> 要素)</li> <li class="pic1">項目3(pic1クラスの <li> 要素)</li> <li class="pic2">項目4(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); } の表示 |