リスト
list-style-image
list-style-image は、リストの各行の頭に付く印を、黒丸や数字の代わりに画像にします。画像が読み込めないときは list-style-type の印に戻ります。
構文
<image> | noneプレビュー
りんご
Banana
みかん
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
list-style-image: url(/marker-star.svg);
}コントロール
list-style-imageurl(/marker-star.svg)
りんご
Banana
みかん
解説
値の意味
none：初期値です。画像を使わず、list-style-typeの印を出します。url(/marker-star.svg)：その画像を印にします。
プレビューでは、箱に書いた値を中の 3 行（display: list-item）が受け継いでいます。このサイトでは、サイトに置いた星・チェック・矢印の画像だけを選べるようにしています。
よく使う場面
チェックリストや手順の一覧で、黒丸の代わりにアイコンを並べたいときに使います。
気をつけること
- 幅と高さを持つ画像はその大きさのまま描かれ、文字の大きさに合わせて伸び縮みしません。プレビューの画像は 12px 四方です。大きさや位置を細かく決めたいときは、
::beforeにbackground-imageで描く方法がよく使われます。 - 画像が読み込めないときのために、
list-style-typeも一緒に書いておくと安心です。 - 継承するので、
ulに書けば中のliすべてに効きます。印が付くのはdisplay: list-itemの要素だけです。