マーカーに画像を使う 【list-style-image】
ブラウザで表示した時の見え方
ソースサンプル
【CSS】
.list {
list-style-image: url("./img/diams.gif")
}
【HTML】
<ul class="list">
<li>HTMLを勉強する</li>
<li>CSSを利用する</li>
</ul>
[
黒※説明中のタグ
紫※省略可能なタグ
赤※変更可能
緑※文章など
]
解説
- list-style-type属性と同時に設定した場合、list-style-image属性が優先されます。
- list-style-image属性で指定した画像が見つからなかった場合はlist-style-typeの初期値（disc）が適用されます。
| オプション |
| none | リストマークに画像を表示しない | list-style-image: none |
| url("画像名") | リストマークに画像を指定する | list-style-image: url("./img/diams.gif") |
| 値 | 機能 | 例 |
AICHAN WEB(Z)
>
HTML＆CSSサンプル集(S)
>
CSS
-
マーカーに画像を使う