CSSリスト - リストマーカーの種類設定 | list-style-image

list-style-imageはCSSリストの表示のスタイルに関連する属性で、リスト要素の先頭のマーカーに画像を指定します。 本文はlist-style-imageについて学びたいと思います。

CSSリスト関連記事：
◇　リスト要素概要
◇　list-style-type　
◇　list-style-image
◇　list-style-position

list-style-image属性

CSSのlist-style-image属性は、上のリスト要素の先頭のマーカーに表示する画像を指定します。

◇　値：
list-style-image: url(画像のURL);

◇　指定例：

ul {
    list-style-image: url(mypic.gif);
}

ol.listitem {
    list-style-image: url(mypic.gif);
}

list-style-image属性の使用例

◇　CSS記述：

ul.group {
    list-style-image: url(edit_list6.gif);
}

画像：edit_list6.gif：【】

◇　HTML記述

<ul class="group">
<li>リストてすと</li>
<li>リストてすと</li>
</ul>

◇　表示
以上の記述ででブラウザーでの表示は

• リストてすと
• リストてすと

有关作者

Syboos.jp編集長AJavaやオープンソース情報の執筆、Webサイトの開発や運営全般の業務に携わる。