使える!WEB小技集〜スタイルシートでリストマークを画像にするTips
1upWEB!ホームページ制作の定番紹介!ノウハウ、小技Tips、検索エンジン、アクセスアップ方法、バナー広告など。1upWeb!,WEB,web,ウェブ,サイト,ホームページ,作成,TIPS,方法,アクセスアップ,JavaScript,CGI,スタイルシート,ダウンロード,フリー,自由,無料,画像  
Home使える!WEB小技集

Last Up 2003年11月21日 (金)

 

● リストマークの画像指定<スタイルシート>

リスト指示の行頭を「●」や「■」ではなく、任意の画像にしてしまうものです。


<style type="text/css">
<!--
UL { list-style-image: url(img/li_mark.gif)}
-->
</style>

<ul>
<li>あいうえおかきくけこ</li>
<li>ABCDEFGHIJKLMN</li>
<li>0123456789</li>
</ul>
img/li_mark.gifは任意の画像を相対指定してください。
※画像サイズが大きすぎると、画像の下が切れてしまうようです。
縦が18ピクセル以下が良い模様。

上記のようにすると、下ようになります。
  • あいうえおかきくけこ
  • ABCDEFGHIJKLMN
  • 0123456789

 

 

ADVERTISEMENT