リストマーカー画像プロパティ

最終更新：2026-09-13

list-style-image リストマーカー画像プロパティ

list-style-image はリスト項目のデフォルトのマーカー（点、数字など）をカスタム画像に置き換えます。デフォルト値 none は画像を使わないことを意味します。リストにブランド化された小さなアイコンや装飾的な矢印を付け、より豊かな見た目にするのによく使われます。

カテゴリ
初期値	none
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS1
状態	標準

📝 構文

list-style-image: none | <image>;

⚙️ 値

値	タイプ	説明
`none`	キーワード	画像なし
`<image>`	タイプ	カスタムマーカー画像

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
list-style-image	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： list-style-image は画像のサイズを制御できません。より柔軟にするには、代わりに ::before 疑似要素と background-image を使用してください。

注意： 画像の読み込みに失敗するとマーカーが消えるため、フォールバックとして list-style-type も設定するのが賢明です。

❓ よくある質問

Qlist-style-image と ::before 疑似要素はどちらが良いですか？

A::before の方が柔軟です。画像のサイズ、位置、間隔、配置を制御でき、アイコンフォントも使えます。list-style-image は使いやすいですが、画像の拡大縮小や配置の微調整はできません。正確な制御が必要な場合は ::before と background-image、background-size を使用し、手軽なマーカー置換には list-style-image を使います。

Qlist-style-image の画像を中央揃えにするには？

Alist-style-image 自体は配置を正確に制御できません（画像は本来のサイズで描画されます）。正確に中央揃えするには、li::before で content: "" を挿入し、background-image と background-position: center を使い、background-size でサイズを指定して必要に応じて中央揃え・拡縮します。

Qlist-style-image の読み込みに失敗するとどうなりますか？

A画像の読み込みに失敗した場合（パス間違い、非対応形式、ブロックなど）、マーカーが消えるか何も表示されず、リスト項目が「裸」のままになります。これを避けるには list-style-type をバックアップとして残してください（例：list-style: disc url(bullet.png);）。画像が利用できないときは disc が表示されます。

Qlist-style-image の画像をリサイズできないのはなぜですか？

Aこのプロパティはマーカー位置に画像を本来のサイズで描画し、CSS にはそれを拡大縮小したり色を変えたりするパラメータがないためです。过大または过小な画像はフォントサイズやレイアウトに適応できません。サイズを制御するには、li::before と background-image、background-size に切り替えるか、インライン SVG アイコンを使って幅と高さを設定してください。