Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- CSSプロパティ辞典
- list-style
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)を使用しています。
対応ブラウザ
IE6 | IE7 | IE8 | IE9 | IE10 | IE11 | Safari | Chrome | Firefox | Opera |
---|---|---|---|---|---|---|---|---|---|
iPhone Safari | Android2系 標準ブラウザ | Android4系 標準ブラウザ |
---|---|---|
概要
li要素及び、『display』プロパティが『list-item』または『inline-list-item』と指定されている要素のマーカーに関する項目をまとめて指定します。まとめて指定できるプロパティは『list-style-type』プロパティ、『list-style-image』プロパティ、『list-style-position』プロパティの3つです。指定する値は順不同で問題ありません。
『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』プロパティの値が優先されます。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。