リストタグに画像を表示させる方法
リストタグ(ul,li)を使うと以下のように表示されますが、
実際の表示はこちら。
|
HTMLタグはこちら。 <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> |
スタイルシートを組み合わせる事で、以下のように表示できます。
※これは、当所のトップページでの例で、「miniicon-!2.gif」という名前のマーカー画像を表示させた場合です。スタイルシート内の数字は、実際に表示させながら調整しました。
実際の表示はこちら。
|
HTMLタグはこちら。
<ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</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; } |
これを応用して、背景画像のように表示させる事もできます。
※1つだけ注意点があります。上記の設定の場合、全てのliタグに適用されてしまいますので、そうしたくない場合はスタイルシートの指定を細かくする必要があります。
余談ですが、当所トップページでは項目ごとに画像を表示させるようにしていましたので、それを上記の方法に変更したところ、トップページのファイルサイズが25.5KB → 20.0KBに若干ダイエットしました!何度も出てくるものや無駄なタグは極力省略した方がいいですね。
ディスカッション
コメント一覧
新年あけまして、おめでとうございます。
本年もよろしくお願い申し上げます。(・∀・)/
KumaCrowさん
あけましておめでとうございます!
こちらこそよろしくお願い致します。
あいかわらず、良い情報発信してますね!