list-style-image:リスト項目のマーカーに画像を指定する

初期値 none
適用対象 リスト項目
継承 する
アニメーション 離散値
対応ブラウザ caniuseで確認

list-style-imageプロパティの説明

list-style-imageは、リスト項目のマーカーに画像を指定します。マーカーはリスト項目の内側に生成される::markerという疑似要素によって配置されます。画像を指定する場合は、何らかの理由で表示されない事態を想定して、list-style-typeで代替マーカーを指定しておきましょう。

マーカーを表示する位置はlist-style-positionで指定します。これらをまとめて指定する場合には、ショートハンド・プロパティのlist-styleを使用して下さい。

その他、CSSでリストをデザインするテクニックは、CSSリファレンスで詳しく解説しています。入れ子構造、開閉できる多段式のリスト、横並びのレイアウトの具体的なサンプルも参照できます。

list-style-imageに指定できる値

none
リストマーカーに画像を使用しません。これが初期値です。
<image>
使用する画像のURLを指定します。

list-style-imageの使い方とサンプル

list-styleプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
list-style-image: none;

/* <image>値 */
list-style-image: url('marker.png');
list-style-image: url(../images/marker.png);

/* 画像として有効な値 */
list-style-image: linear-gradient(#f60, #06f);
list-style-image: linear-gradient(45deg, cyan, magenta);

/* グローバル値 */
list-style-image: inherit;
list-style-image: initial;
list-style-image: revert;
list-style-image: unset;

list-style-imageの実例

それでは実際にlist-style-imageプロパティの書き方を見ていきましょう。以下の例は、マーカーのスタイルを変更したリストを並べて比較したものです。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 1rem;
	background: #eee;
	display: grid;
 	grid: repeat(2, auto) / repeat(3, 1fr);
	gap: 1rem;
}
.samp_box > div {
	padding: .3rem;
	background: #fff;
}
.samp_box h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
#ls_1 ul {
	list-style-type: circle;
	list-style-position: inside;
}
#ls_2 ul {
	list-style-type: "★ ";
	list-style-position: inside;
}
#ls_3 ul {
	list-style-type: circle;
	list-style-image: url(../images/sample_list_marker.png);
	list-style-position: inside;
}
#ls_4 ul {
	list-style-type: circle;
	list-style-position: outside;
}
#ls_5 ul {
	list-style-type: "★ ";
	list-style-position: outside;
}
#ls_6 ul {
	list-style-type: circle;
	list-style-image: url(../images/sample_list_marker.png);
	list-style-position: outside;
}
HTML
<section class="samp_box">
	<div id="ls_1">
		<h2>circle inside</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</div>
	<div id="ls_2">
		<h2>★ inside</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</div>
	<div id="ls_3">
		<h2>image inside</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</div>
	<div id="ls_4">
		<h2>circle outside</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</div>
	<div id="ls_5">
		<h2>★ outside</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</div>
	<div id="ls_6">
		<h2>image outside</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</div>
</section>

list-style-imageに関連するCSSプロパティ

リスト(list)関連
list-style リストマーカーに関するスタイルを一括で指定する
list-style-image リスト項目のマーカーに画像を指定する
list-style-position リスト項目の先頭に表示するマーカーの位置を指定する
list-style-type リスト項目の先頭に表示するマーカーの種類を指定する