list-style-image/マーカー画像

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>

  1. 親リスト
    1. 子リスト
    2. 子リスト
    3. 子リスト
  2. 親リスト
  3. 親リスト

関連ページ

・ホームページ作成「リスト項目の挿入

 リスト項目の設定方法や装飾の方法等を説明しています。

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)