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 | リスト項目の先頭に表示するマーカーの種類を指定する |