Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

list-style

li要素及び、『display』プロパティが『list-item』または『inline-list-item』と指定されている要素のマーカーに関する項目をまとめて指定します。まとめて指定できるプロパティは『list-style-type』プロパティ、『list-style-image』プロパティ、『list-style-position』プロパティの3つです。指定する値は順不同で問題ありません。

サンプルコード

li.test { list-style: decimal inside;}
li.test1 { list-style: url(/sample.png) inside;}

指定可能な値一覧

値	概要
list-style-type	初期値は『disc』となります。詳細につきましては『list-style-type』プロパティの項目をご確認ください。
list-style-image	初期値は『none』となります。詳細につきましては『list-style-image』プロパティの項目をご確認ください。
list-style-position	初期値は『outside』となります。詳細につきましては『list-style-position』プロパティの項目をご確認ください。

ブラウザでの表示結果

<ul style="list-style: decimal inside;">
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
</ul>

<ul style="list-style: url(/dics/dictionary-css/img/list-style-image_1.png) inside;">
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
</ul>

※このサンプルは以下の画像(横幅30px、高さ30px)を使用しています。

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

全バージョンで対応しています

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

7 以降 ○

6 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

概要

『list-style』プロパティを記述した場合、指定していない値は初期値に戻されます。手前に書いてある『list-style-type』プロパティ、『list-style-image』プロパティ、『list-style-position』プロパティは上書きされてしまいますのでご注意ください。

<ul style="list-style-image: url(/dics/dictionary-css/img/list-style-image_1.png); list-style: inside;">	
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
</ul>

尚、『list-style-type』プロパティと『list-style-image』プロパティを同時に指定した場合は『list-style-image』プロパティの値が優先されます。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPlaceウェブプログラミングプレイス

Caution

CSSプロパティ辞典

list-style

サンプルコード

指定可能な値一覧

ブラウザでの表示結果

対応ブラウザ

概要