XHTML/CSS・トップ | CSSプロパティ・目次

●リストマークに画像を指定する

 list-style-image はリストマークに画像を指定するプロパティです。指定できる値は url( 〜 )ですが、noneを指定し、画像を表示させないようにすることもできます。url( 〜 )の 〜 には画像ファイルのURLを入れます。

【CSS】↓

ul {
  color: #fec1ff;
  list-style-image: url("b02.gif");
  list-style-position: outside;
}

■解説↑↓

 直接関係のあるプロパティ、書式は list-style-image: url("b02.gif")です。文書(HTMLファイル)と画像ファイルの位置関係によってはパスが生じます。例えば、文書と同じディレクトリ階層に designのディレクトリがあり、その中に b02.gifのリストマーク用の画像ファイルが収まっていたとします。その場合のURL指定は url("./design/b02.gif")となります。

※ドットがひとつの場合は ./ を省略して、url("design/b02.gif")とすることができます。そのほかの位置関係の指定方法は別項の「リンク要素」を参照にしてください。

【HTML】↓

<ul>
 <li>←リストマーク画像サンプル
</ul>
<ul>
 <li>←リストマーク画像サンプル
</ul>
<ul>
 <li>←リストマーク画像サンプル
</ul>

 または、

<ul>
 <li>←リストマーク画像サンプル
 <li>←リストマーク画像サンプル
 <li>←リストマーク画像サンプル
</ul>

【サンプル】↓

■応用↓

 リスト項目ごとに違う画像を適用させたい場合は class名を使うと良いでしょう。

【CSS】↓

.sample1 { list-style-image: url("b01.gif"); }
.sample2 { list-style-image: url("b02.gif"); }
.sample3 { list-style-image: url("b03.gif"); }

【HTML】↓

<ul>
 <li class="sample1">リストマーク画像サンプル
</ul>
<ul>
 <li class="sample2">リストマーク画像サンプル
</ul>
<ul>
 <li class="sample3">リストマーク画像サンプル
</ul>

 または、

<ul>
 <li class="sample1">リストマーク画像サンプル
 <li class="sample2">リストマーク画像サンプル
 <li class="sample3">リストマーク画像サンプル
</ul>

※クラス名の使い方は別項を参照にしてください。

XHTML/CSS・目次 | リスト・目次

Copyright (C) 2005-2007 http://www.xml.vc/