list-style-imageプロパティの説明
CSSの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プロパティの構文は以下の通りです。
/* キーワード値 */
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プロパティの書き方を見ていきましょう。以下の例は、マーカーのスタイルを変更したリストを並べて比較したものです。
<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>
.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;
}