リストの先頭記号を画像にしてみよう！
HTMLには、箇条書きなどに使えるリストを表現する ul という要素があります。 リスト全体を <ul>～</ul> タグで囲み、その中に複数のリスト項目（ <li>～</li> で囲む）を入れて使用します。
例えば、次のように記述します。
<ul> <li>パソコン</li> <li>テレビ</li> <li>冷蔵庫</li> </ul>
上記のHTMLソースを表示させると、次のように見えます。
※ここでの表示は「All About側のスタイルシート」にも影響されるため、標準の見え方とは異なる場合があります。
- パソコン
- テレビ
- 冷蔵庫
閲覧に使用するブラウザによって見え方が異なる可能性がありますが、代表的なブラウザでは、各項目の先頭に黒丸が付いて表示されます。
このようにして、手軽に「リスト」が表現できます。しかし、少々味気ないですね。
この先頭の記号を画像で表現できれば、いろいろ見栄え良くできそうです。
list-style-image プロパティ
そこで、スタイルシートの出番です。list-style-imageプロパティを使うと、リストの先頭記号を画像に変えることができます。
※指定した画像が読み込めなかった場合は、従来通りの表示になります。
指定方法は簡単で、次のように画像ファイル名を指定します。
list-style-image: url("head.gif");
この指定によって、「head.gif」というファイル名の画像が、リストの先頭に表示されるようになります。
実際に、<ul>タグに指定を加える場合は、次のように記述します。
<ul style="list-style-image: url('head.gif');">
※ダブルクオーテーションの中にさらにダブルクオーテーションを書くことはできないので、画像ファイルの指定部分はシングルクオーテーションで囲んでいます。
試してみましょう
それでは、サンプルをご紹介致しましょう。
ここでは、先頭に付ける画像として次のような画像を用意しました。
HTMLとスタイルシートを次のように記述してみます。
<ul style="list-style-image: url('head.gif');">
<li>パソコン</li>
<li>テレビ</li>
<li>冷蔵庫</li>
</ul>
上記のソースを実際に表示させると、次のように見えます。
- パソコン
- テレビ
- 冷蔵庫
もちろん、画像は何でも構いません。下記は、他の画像（
）を使った例です。
- パソコン
- テレビ
- 冷蔵庫
このように、簡単にリストの先頭記号を画像に置き換えられます。
リストが複数ある場合
同一ページ内の複数のリスト（複数の <ul>タグ）に対して、同じ先頭画像を付加したい場合は、HTMLのhead要素内（ <head>～</head> 内）に、次のように記述しておきましょう。
<style type="text/css"><!--
ul { list-style-image: url("head.gif"); }
--></style>
こうしておけば、いちいち 全ての <ul> タグにstyle属性（ style="list-style-image: url('head.gif');" ）を記述しなくても、ただ <ul> と普通に記述するだけで、リスト項目の先頭記号を画像に変えることができます。
おわりに
このように、スタイルシートを使うと、手軽に好みのデザインのリスト（箇条書き）を作ることができます。 ぜひ、みなさんもお試し下さい。
