説明
list-style-imageはリストマーカーの記号や番号を画像にする設定が出来ます。

list-style-imageプロパティを使うとリストマーカーを画像に変更出来ます。
list-style-imageはリストマーカーの記号や番号を画像にする設定が出来ます。
list-style-imageプロパティの構文は以下の通りです。
list-style-image: url(ファイル名、又はURL);
ファイル名はtest.png等です。異なるディレクトリの場合はimage/test.png、親ディレクトリの場合は../test.png等になります。
URLで指定する場合はhttp://example.com/test.png等となります。http://を付ける事でURLと認識されます。
list-style-imageの記号利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。
ul {
list-style-image: url(test.png);
}
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
上記を表示すると以下になります。
マーカーが画像になります。
入れ子にする場合は親と子で画像を変えると分かり易くなります。
.t1 {
list-style-image: url(test1.png);
}
.t2 {
list-style-image: url(test2.png);
}
<ol class="t1">
<li>親リスト</li>
<ol class="t2">
<li>子リスト</li>
<li>子リスト</li>
<li>子リスト</li>
</ol>
<li>親リスト</li>
<li>親リスト</li>
</ol>
・ホームページ作成「HTMLへのリスト項目挿入と装飾」
リスト項目の設定方法や装飾の方法等を説明しています。
・ホームページ作成「スタイルシートの定義方法」
外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。
検索付「CSSプロパティ早見表」に戻る
スマホ向け「CSSプロパティ一覧」に戻る
★上ページに含まれるプロパティ