【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 要素は、デフォルト指定の黒丸が表示されます。


<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/red.png");
    }
    /* 青丸 */
    li.blue_ball {
        list-style-image: url("../img/blue.png");
    }
</style>

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト