【list-style-image】リストのマークを画像にする

list-style-imageプロパティでは、リスト項目のマーク(マーカー)として表示する画像を設定することができます。 list-style-imageプロパティで設定した画像が表示できない場合や、値に「none」を指定した場合にはlist-style-typeで指定した種類のマークが表示されます。

またlist-style-typeの値も同時に設定している場合は、list-style-imageで設定した画像が優先して表示されます。

書式

  • list-style-image : ……… リストのマークに画像を使用する

★:url(画像ファイル名)、none、inherit

URL
リスト項目のマークとして使用する画像のurl(ファイル名)を指定します。
urlの指定方法は左リンクを参照
none
マークに画像を使用しません(初期値)

使用した時の例

.sample1 {list-style-image:url("image.png");}

.sample2 {list-style-type:square; list-style-image:none;}
<ul class="sample1">
  <li>画像を表示(sample1)</li>
  <li>画像を表示(sample1)</li>
  <li class="sample2">画像を非表示(sample2)</li>
</ul>

ブラウザ上の表示例

  • 画像を表示(sample1)
  • 画像を表示(sample1)
  • 画像を非表示(sample2)

対応ブラウザなどのデータ

初期値 none 値の継承 継承する
適用可能な要素 li,「display:list-item」が指定されてる要素(ul,olに対し指定した場合は、内容のliに継承)
メディア visual / list
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報