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

list-style プロパティ

 list-style プロパティは、<ul> エレメントといったリストのマーカーに関するlist-style-typelist-style-positionlist-style-image プロパティを一括で指定するプロパティです。

リスト内にマーカーを画像もしくは漢数字で表示(Exampleを参照
ul{
	list-style: cjk-ideographic inside url('../img/example_image.gif');
}

 もしもリストのマーカーを表示したくなければ、line-style: none; と指定します。

マーカーの非表示
ul{
	list-style: none;
}

 list-style プロパティは以下のプロパティを一括指定できます。

 0付きの番号を表示するには、list-style-type: decimal-leading-zero; で指定します。

0付きの番号
ul{
	list-style: decimal-leading-zero;
}

ページ内 Index

構文(Syntax)

CSS

list-style: list-style-type list-style-position list-style-image | initial | inherit;

DOM ( JavaScript )

値の取得
String = object.style.listStyle;
値の設定
object.style.listStyle="list-style-type list-style-position list-style-image | initial | inherit";

値(Values)

Value摘要
list-style-typeマーカーのフォント
list-style-positionマーカーの位置
list-style-image画像を表示
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

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

Example

 list-styleの例です。上にデフォルトの状態(値はoutside)のリスト。下にlist-styleを指定した状態を表示しています。
 list-style-imageでのイメージが読み込めないときは、list-style-typeの指定で表示されます。

 下のリストは、マーカーをイメージで、リストを内側に表示しています。

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