ウェブランサー

list-style-image - マーカーの画像を指定する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 li要素 (display: list-item; が指定された要素)
継承 する

list-style-imageプロパティは、リストマーカーに画像を指定する際に使用します。list-style-typeプロパティを同時に指定した場合には、list-style-imageの値が優先されます。

list-style-imageに与えられる値

list-style-image: none;
リストマーカーに画像ファイルを使用しません。これが初期値です。
list-style-image: url(ファイルパス);
URLで画像ファイルを指定します。

list-style-imageの使用サンプル

CSS
.sample01 {
 list-style-type: disc;
 list-style-position: outside;
 list-style-image: url(images/sample_list_marker.png);
 margin: 0px 0px 0px 30px;
}
XHTML
<ul class="sample01">
<li>リストサンプル01</li>
<li>リストサンプル02</li>
<li>リストサンプル03</li>
</ul>
表示確認
  • リストサンプル01
  • リストサンプル02
  • リストサンプル03

list-style-imageに関連するCSSプロパティ

リスト(list)関連
list-style リストマーカーに関する指定をまとめて行う
list-style-image リストマーカーに画像を指定する
list-style-position リストマーカーの表示位置を指定する
list-style-type リストマーカーの種類を指定する
marker-offset リストマーカーとの間隔を指定する