★このページでは、CSSの基本的な仕様について解説しています。

リストマークに関する設定は、IE6.0以前、Netscape6.2以前など主要なブラウザで対応が異なる場合があります。

各プロパティの対応状況については、それぞれの項目を参照して下さい。

　

初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL11. リストマークに関する設定　その2 ★ リストマークに画像を指定する

　

list-style-image: url("画像ファイル名");

（IE以外のブラウザでは対応していないものもあります。）

画像は、そのスタイルシートが記述されているファイルから画像までの相対URL（相対パス）によって指定します。スタイルシートと同じフォルダに画像がある時は画像ファイル名のみで構いません。（「相対パス」について詳しくは「Column 1.　「相対パス」と「絶対パス」を参照して下さい。） また、<値>を「none」に指定すれば、リストマークは表示されません（デフォルト）。

ex1. 全ての項目に同じ画像を指定

   

ul { list-style-image: url("icon1.gif); }

ol { list-style-image: url("icon1.gif); }

サンプル部分のHTML記述

<ul>
<li>イチゴのショートケーキ</li>
<li>イチゴのタルト</li>
<li>イチゴのヴァシュラン</li>
</ul>

<ol>
<li>イチゴのショートケーキ</li>
<li>イチゴのタルト</li>
<li>イチゴのヴァシュラン</li>
</ol>

　

　

ex2. 項目ごとに違う画像を指定

li.square1 { list-style-image: url("icon1.gif"); }

li.square2 { list-style-image: url("icon2.gif"); } 

li.square3 { list-style-image: url("icon3.gif"); } 

サンプル部分のHTML記述

<ol>
<li class="square1">イチゴのショートケーキ</li>
<li class="square2">イチゴのタルト</li>
<li class="square3">イチゴのヴァシュラン</li>
</ol>

　

※「list-style-type:」、「list-style-image:」が、両方指定されている場合は、「list-style-image:」が優先されます。

　

初級篇2.VOL11. リストマークに関する設定・その1 <<

>> 初級篇2.VOL11. リストマークに関する設定・その3

　

　

2007.2.15.+2.23.-2.24.