list-style-imageプロパティ

TOPページに戻る > CSS

スポンサード リンク

list-style-imageプロパティ

リストマークに使う画像を指定できます
値に記述する画像のurlには、相対パス、絶対パスでurlを指定し、拡張子はgif、jpg、pngなどが指定できます
list-style-imageは継承するので、リスト項目が階層になっている場合は親のリスト要素のスタイルを受け継ぎます。値にnoneを指定すると画像が表示されなくなります

使い方(書式)

セレクタ { list-style-image: url(画像のurl); }                                    

list-style-imageプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 リスト項目 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;を指定しなかった場合





(C)2012 ホームページ作成無料