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プロパティ一覧」に戻る