関西大学大学院 総合情報学研究科 博士課程にて情報学を学ぶ傍ら、ホームページに関する書籍の執筆や企業…
北欧好きが、愛用の北欧モノを見せ合うコミュニティ
リストの表示・装飾 (HTML,CSS)
更新日:2003年03月19日
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: 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> と普通に記述するだけで、リスト項目の先頭記号を画像に変えることができます。
このように、スタイルシートを使うと、手軽に好みのデザインのリスト(箇条書き)を作ることができます。 ぜひ、みなさんもお試し下さい。
関連キーワード[PR]
人気ホームページ作成ランキング
Powered by 価格.com
北欧好きが、愛用の北欧モノを見せ合うコミュニティ
関連キーワード[PR]