スポンサード リンク
list-style-imageプロパティ
リストマークに使う画像を指定できます使い方(書式)
セレクタ { list-style-image: url(画像のurl); }
list-style-imageプロパティ
対応ブラウザ | |
適用できる要素 | リスト項目 ol要素 ul要素 li要素 displayの値がlist-itemになっている要素 |
子要素へのスタイルの継承 | する |
プロパティの値 | 説明 |
url(画像のurl) | リストマークに使う画像を指定します |
none | リストマークに画像を指定しない。初期値 |
実際の指定方法
.hoge { list-style-image: url(li.gif); } /* liとゆうファイル名のgif画像を指定 */
.hoge2 { list-style-image: none; } /* リストマークに画像を指定しない */
html部分
<ul class="hoge"> <li>リスト項目の画像</li> <li>list-style-image: url(li.gif);</li> <li>liとゆうファイル名のgif画像を指定</li> <li>2階層目のul要素 <ul class="hoge2"> <li>list-style-image: none;リスト画像が消えています</li> </ul> </li> </ul> <p>2階層目のul要素にlist-style-image: none;を指定しなかった場合</p> <ul class="hoge"> <li>リスト項目の画像</li> <li>list-style-image: url(li.gif);</li> <li>liとゆうファイル名のgif画像を指定</li> <li>2階層目のul要素 <ul> <li>list-style-image: none;を指定しなかった場合、継承されます</li> </ul> </li> </ul> <br>
実際の表示
2階層目のul要素にlist-style-image: none;を指定しなかった場合