2024-09-05

CSS: リストのマークに画像を指定する list-style-image

CSS でリストのマークとして画像を指定したい場合は、 list-style-image プロパティを使用します。

list-style-image プロパティと同時に list-style-type プロパティが指定されている場合は、 list-style-image プロパティが優先されます。

指定する値は、表示する画像の「URL」を指定します。 画像を表示しない場合は「none」を指定します。

使用例

list-style-image: url("sample.png");

リストのマークに画像を表示するサンプル

下のリストは、マークとして赤丸と青丸の画像を表示させています。 クラスを使って赤丸か青丸を指定し、 li 要素ごとに画像が指定できるようにしています。 画像を指定していない li 要素は、デフォルト指定の黒丸が表示されます。

• リストA
• リストB
• リストC
• リストD
• リストE

<ul>
<li class="red_ball">リストA</li>
<li class="blue_ball">リストB</li>
<li class="red_ball">リストC</li>
<li class="blue_ball">リストD</li>
<li>リストE</li>
</ul>


<style>
    /* 赤丸 */
    li.red_ball {
        list-style-image: url("/img/img04/red.png");
    }
    /* 青丸 */
    li.blue_ball {
        list-style-image: url("/img/img04/blue.png");
    }
</style>