ul{list-style-image:url(画像);}でリストマークを画像に指定することが出来ます。

{list-style-image:none;}と指定すると リストマークに画像は指定しないことになります。（デフォルト）

【ブラウザ表示】

• HTML
• CSS

<ul class="sample3">
<li>HTML</li>
<li>CSS</li>
</ul>

ul.sample3{list-style-image:url(../image/ball3.gif);}

<ul style="list-style-image:url(../image/ball3.gif);">
<li>HTML</li>
<li>CSS</li>
</ul>

■ 一つのリスト項目のマークのみ個別の画像を指定する

【ブラウザ表示】

1. ここはolタグの画像が適用
2. ここだけliタグの画像が適用
3. ここはolタグの画像が適用

<ol class="olyou">
<li>ここはolタグの画像が適用</li>
<li class="tandoku">ここだけliタグの画像が適用</li>
<li>ここはolタグの画像が適用</li>
</ol>

ol.olyou{list-style-image:url(../image/ufo.gif);}
li.tandoku{list-style-image:url(../image/ball3.gif);}

<ol style="list-style-image:url(../image/ufo.gif);">
<li>ここはolタグの画像が適用</li>
<li style="list-style-image:url(../image/ball3.gif);">
ここだけliタグの画像が適用
</li>
<li>ここはolタグの画像が適用</li>
</ol>

■ その他の項目

スタイルシート一覧のページに戻る