list-style-image 【リストマーカーに画像を指定】
[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op6] [Op7] [Ns6] [Ns7]
list-style-imageプロパティは、リストマーカーに画像を指定する際に使用します。
list-style-typeプロパティを、同時に指定した場合には、list-style-imageの値が優先されます。
none
リストマーカーに画像ファイルを使用しません。これが初期値です。
URLで画像ファイルを指定する
URLで画像ファイルを指定します。
list-style-imageの使用例
CSSファイル
.sample001 {
list-style: url(images/icon-moon.gif);
list-style-type: disc;
list-style-position: inside;
margin: 10px;
}
li {
padding : 10px;
}
HTMLソース
<ul class="sample001">
<li>リストスタイル1</li>
<li>リストスタイル2</li>
<li>リストスタイル3</li>
</ul>
表示すると
- リストスタイル1
- リストスタイル2
- リストスタイル3
リスト関連項目
list-style | マーカーに関する指定をまとめて行う |
list-style-type | マーカー文字の種類を指定する |
list-style-image | マーカー画像を指定する |
list-style-position | マーカーの表示位置を指定する |
marker-offset※ | マーカーとの間隔を指定する |