箇条書きのアイコンはCSSを使って指定するのが便利
箇条書きをする時に文字の左にアイコンを置きたい時に最も楽な書き方は、
<img src="hogehoge.gif" height=11 width=11> テキスト
みたいにIMGタグを使って書く方法です。（height、width属性は省略可能だが付けないと表示が遅くなるので付けたほうがいい。）
１個だけならこれで十分ですが、これを何個も書きたい時はすべての要素にいちいちIMGタグを付けていると面倒だし、ソースの可読性も良くありません。
そこでリスト形式(UL)にして、リストの各要素の先頭の画像を指定する方法があります。
<ul style="list-style-image: url('hogehoge.gif')">
<li>要素１</li>
<li>要素２</li>
<li>要素３</li>>
</ul>
これで画像ファイルを指定するのは１箇所ですがリストの全ての要素の左側にアイコンを表示することができます。
しかし、これでは画像は１種類しか使えません。「要素のタイプごとに違うアイコンを使いたい。」こんな場合にはこの方法では実現できません。
たとえば、次の様に要素のタイプごとにアイコンを変えたい時はどうすればいいのでしょうか？
要素赤１
要素青１
要素赤２
要素赤３
要素青２
上の例みたいに要素のタイプごとにアイコンを変えたい場合はスタイルシートを使うのが便利です。以下にその方法を記述します。
<head> <style type="text/css"> <!-- /* この例では画像ファイル以外の属性は全てまとめて指定 */ .red,.blue {background-repeat: no-repeat;background-position:2px center;padding-left:24px;} /* 画像ファイルはクラス毎に指定 */ .red{background-image: url('red.gif');} .blue{background-image: url('blue.gif');} --> </style> </head> <body> ： <div class="red">要素赤１</div> <div class="blue">要素青１</div> <div class="red">要素赤２</div> <div class="red">要素赤３</div> <div class="blue">要素青２</div> ： </body>
つまりスタイルシートで背景画像としてアイコンを使用するのです。CSSの"background-repeat"属性を"no-repeat"に設定してアイコンが１つの要素につき１つしか表示されない様にしています。"background-position"では画像の表示位置を指定しています。上の例ではブロックの左から2pxのところ、縦位置は中央になるように指定しています（左側をインデントする必要がなかったら１つ目の値は"left"で構いません）。それだけだと画像とテキストが重なってしまうため"padding-left"を使用してテキスト要素の開始位置をずらしています。この値はアイコンの大きさによって適宜変えて下さい。
上記のサンプルではHEADタグの中にCSSを記述しましたが、もちろん外部スタイルシートファイルを使用してもOKです。
この方法を使うと要素ごとにIMGタグを使用する必要がなく、またある要素のタイプが変更になった場合もクラス名を変えるだけで済むのでメンテナンス性という意味でも便利です。
私の運営している一口馬主のページ我が一口馬主人生でもこの方法でテーブル内の左側の項目に付けているアイコンを指定して見ました。そのページでは上記の例のようにDIVタグではなくTABLEタグの子要素のTDタグでその方法を使用しています。今まではIMGタグを使って一つ一つアイコンを設定していたのですが、数が増えてくるとソースが長くなり、また、見づらくなってきたのでこの方法を試して見ました。
