備忘録的プログラミングリファレンス

list-style-imageプロパティ

 list-style-imageプロパティは、<ul>エレメントといったリストのマーカーに画像を指定するプロパティです。画像ファイルをURLで読み込みます。

 list-style-imageプロパティは<ul>エレメントに指定します。

リストマーカーとして"example_image.gif"を読み込む(Exampleを参照
ul{
	list-style-image: url('../img/example_image.gif');
}

 list-style-typeプロパティを定義することで、画像が利用できない場合の代替ができます。

関連するプロパティ

 以下のような関連するプロパティがあります。

list-stylelist-style-type、list-style-position、list-style-imageプロパティを一括で指定
list-style-positionマーカーの位置
list-style-typeマーカーフォントの指定

構文(Syntax)

CSS

list-style-image: none | url | initial | inherit;

DOM(JavaScript)

値の取得
String = object.style.listStyleImage;
値の設定
object.style.listStyleImage="none | url | initial | inherit";

値(Values)

Value摘要
none初期値(default値)
url()画像のURLを指定
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)none
継承(Inherited)Yes
CSS AnimationNo

Example

 list-style-imageの例です。リストマーカーをイメージ(画像)で表示します。

アイコンはICOOON MONOから利用させていただきました。