リストタグに画像を表示させる方法

リストタグ(ul,li）を使うと以下のように表示されますが、

実際の表示はこちら。

  • リスト１
  • リスト２
  • リスト３

HTMLタグはこちら。

<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>

スタイルシートを組み合わせる事で、以下のように表示できます。
※これは、当所のトップページでの例で、「miniicon-!2.gif」という名前のマーカー画像を表示させた場合です。スタイルシート内の数字は、実際に表示させながら調整しました。

実際の表示はこちら。

リストマーカー画像

 HTMLタグはこちら。 

<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>
スタイルシートはこちら。 

li {
padding-left: 17px;
background: url(img/miniicon-!2.gif)
no-repeat 0px 0.2em;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
list-style: none;
}

 

これを応用して、背景画像のように表示させる事もできます。

※１つだけ注意点があります。上記の設定の場合、全てのliタグに適用されてしまいますので、そうしたくない場合はスタイルシートの指定を細かくする必要があります。

余談ですが、当所トップページでは項目ごとに画像を表示させるようにしていましたので、それを上記の方法に変更したところ、トップページのファイルサイズが25.5KB　→　20.0KBに若干ダイエットしました！何度も出てくるものや無駄なタグは極力省略した方がいいですね。

検索エンジン対策【SEO】li, ul, リスト, 画像