list-style-image

リスト項目のマークに画像を指定します。ブラウザが対応していない場合も考慮して、list-style-typeプロパティを同時に指定しておくことをお勧めします。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ list-style-image : 値; }

▲PageTop

指定できる値

値 初期値 意味
none ○ リスト項目のマークにイメージを使用しません。
URL リスト項目のマークに使用する画像のURLを指定します。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      .sample1 {
        list-style-type : circle;
        list-style-image : none;
      }
      .sample2 {
        list-style-type : circle;
        list-style-image : url(../../../../images/development/htmlcss/list-icon.gif);
      }
    </style>
  </head>
  <body>
    <p>■画像なし(<ul>要素に適用)</p>
    <ul class="sample1">
      <li>list-style-imageサンプル1</li>
      <li>画像は指定していません</li>
    </ul>
    <p>■画像なし(<ol>要素に適用)</p>
    <ol class="sample1">
      <li>list-style-imageサンプル2</li>
      <li>画像は指定していません</li>
    </ol>
    <br>
    <p>■画像あり(<ul>要素に適用)</p>
    <ul class="sample2">
      <li>list-style-imageサンプル3</li>
      <li>指定した画像はこの下です。</li>
      <li style="vertical-align:middle">
        これ→<img src="../../../../images/development/htmlcss/list-icon.gif" alt="list-style-imageに使用した画像">
      </li>
    </ul>
    <br>
    <p>■画像あり(<ol>要素に適用)</p>
    <ol class="sample2">
      <li>list-style-imageサンプル4</li>
      <li>指定した画像はこの下です。</li>
      <li style="vertical-align:middle">
        これ→<img src="../../../../images/development/htmlcss/list-icon.gif" alt="list-style-imageに使用した画像">
      </li>
    </ol>
  </body>
</html>

表示結果

■画像なし(<ul>要素に適用)

■画像なし(<ol>要素に適用)

  1. list-style-imageサンプル2
  2. 画像は指定していません

■画像あり(<ul>要素に適用)


■画像あり(<ol>要素に適用)

  1. list-style-imageサンプル4
  2. マークに画像を使用しています。

▲PageTop

関連項目

HTML

<ul> / <ol>


CSS

list-style / list-style-position / list-style-type

▲PageTop

▲