トップページの中の プロパティの中の Lのプロパティ一覧の中の list-style-image

list-style-image

  • 最終更新:2009年11月16日 13:18

list-style-imageプロパティは、リストマーカーを任意の画像に変更する事ができます。

このプロパティは、マーカーを画像に変更できるので便利ですが、厄介な問題として画像の位置を指定できません。
これにより、うまくデザインが再現出来なかったりするので、あまり使うケースが無かったりします。代替手段として、backgroundプロパティにマーカー用の画像を背景として指定する方法が多く使われています。

対応ブラウザ
  • IE6対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

プロパティの解説

<URI>|none|inherit
初期値
none
適用される要素
li要素、display: list-item;の要素
継承
します
パーセント値
N/A
メディア
visual

値の解説

<URI>
リストマーカー用の画像をURLで指定します。
none
リストマーカー用の画像を使用しません。

マーカー用に指定した画像が何らかの理由で読み込まれなかったり利用出来なかった場合は、list-style-typeプロパティで指定したマーカーが表示されます。

list-style-imageのサンプル

ul.mark01 {
  list-style-image: url(../img/property/mark_01.gif);
}

ul.mark02 {
  list-style-image: url(../img/property/mark_02.gif);
}

ul.mark03 {
  list-style-image: url(../img/property/mark_03.gif);
}
<ul>
<li>マーカー画像を指定していないリストです。</li>
<li>マーカー画像を指定していないリストです。</li>
</ul>
<ul class="mark01">
<li>マーカー画像を指定したリストです。</li>
<li>マーカー画像を指定したリストです。</li>
</ul>
<ul class="mark02">
<li>マーカー画像を指定したリストです。</li>
<li>マーカー画像を指定したリストです。</li>
</ul>
<ul class="mark03">
<li>マーカー画像を指定したリストです。</li>
<li>マーカー画像を指定したリストです。</li>
</ul>

マーカー画像

  • mark01.gif 16x16pxのマーカー画像
  • mark02.gif 8x8pxのマーカー画像
  • mark03.gif 4x4pxのマーカー画像

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示
  • マーカー画像を指定していないリストです。
  • マーカー画像を指定していないリストです。
  • マーカー画像を指定したリストです。
  • マーカー画像を指定したリストです。
  • マーカー画像を指定したリストです。
  • マーカー画像を指定したリストです。
  • マーカー画像を指定したリストです。
  • マーカー画像を指定したリストです。

最初の、mark01.gifはブラウザによってかなり位置が変わってきていますが、mark02.gifの8*8pxの画像は、おおよそどのブラウザでもイイ感じの位置に表示されてます。

このページの上部へ