構文

list-style-image : 画像;

説明文

 「list-style-image」は,リストの各項目の先頭に付く記号や数字を指定した画像に置き換えて表示する。

 画像の指定には「url("画像ファイル名")」として指定する。例えば,imagesディレクトリに保存されているmark.gifを背景として利用する場合は,以下のように指定する。

list-style-image : url("images/mark.gif");

 「none」を指定すると画像の表示は行わない。この際,list-style-typeで指定した記号が表示される。

使用例

● CSSの定義

li { list-style-image : url('mark.gif'); }

● HTMLの例

<h2>アジアの国</h2>
<ul>
	<li>日本</li>
	<li>中国</li>
	<li>韓国</li>
	<li>タイ</li>
	<li>インド</li>
	<li>マレーシア</li>
</ul>

● 表示結果

Internet Explorerの表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]

関連項目