ホームページ作成

【ホームページ作成】CSSでリストの先頭記号に画像を指定する

リストの表示・装飾 (HTML,CSS)

更新日：2003年03月19日

CSSでリストの先頭記号に画像を指定する

西村文宏

HTMLで作るリストの先頭記号は、黒丸や白丸など味気ないものですね。この先頭記号を好きな画像に変更できたら良いなと思ったことはありませんか？スタイルシート(CSS)で装飾すれば、簡単に実現できます。

リストの先頭記号を画像にしてみよう！

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> と普通に記述するだけで、リスト項目の先頭記号を画像に変えることができます。

おわりに

このように、スタイルシートを使うと、手軽に好みのデザインのリスト（箇条書き）を作ることができます。ぜひ、みなさんもお試し下さい。

【関連記事】

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！