list-style-image

CSSプロパティ「list-style-image」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

list-style-image

リストマークに画像を指定するプロパティ。

通常、リストマークはlist-style-typeで指定されるようなテキストで表示されるが、list-style-imageを使用することで画像をマークに用いることができる。

URL 画像URLを次の形式で記載する。
list-style-image:url('画像のURL');

使用例

サンプル(A)

[CSSの記述]

.sample { list-style-image:url('hogehoge.gif'); }

[HTMLの記述]

<ul class="sample">
	<li>テキストテキストテキスト</li>
	<li>テキストテキストテキスト</li>
	<li>テキストテキストテキスト</li>
</ul>

[ブラウザ上の表示]

  • テキストテキストテキスト
  • テキストテキストテキスト
  • テキストテキストテキスト