CSS / list-style-image：画像マーカーのサイズと代替表示

CSS

作成日 2026-11-03 最終更新日 2026-11-03

CSS list-style-image はリストアイテムのマーカーに画像を指定します。通常、ul または ol に設定され、それらの li アイテムに継承されます。使用可能な画像がない場合は list-style-type マーカーが代わりに使用されるため、適切なフォールバックも定義してください。

list-style-imageの役割と値

初期値はnoneであり、このプロパティは継承されます。マーカーは、通常のli要素のようなdisplay: list-itemを持つ要素に属します。ulに設定するとうまく機能することが多いのは、リスト項目が値を継承するためです。このプロパティはul自体に背景画像を追加するものではありません。

値	意味
`none`	画像マーカーを使用しません。これによりマーカー自体が必ずしも削除されるわけではありません。
`url("marker.svg")`	指定された画像リソースをマーカーとして使用します。
`initial`	このプロパティを初期値であるnoneに戻します。
`inherit`	親の計算済み値を使用します。
`unset`	このプロパティは継承されるため、inheritと同様に動作します。

構文では、url()はURLを含む関数であり、生の単語urlではありません。アニメーションタイプは離散的であり、2つの画像が滑らかに変形することを意味するわけではありません。MDN list-style-image 参照

コピーして開ける完全な例

以下の完全なコードを UTF-8 で list-marker.html として保存し、ブラウザで開きます。ライブラリ、サーバー、または別の画像ファイルは必要ありません。SVG（Scalable Vector Graphics）はベクター画像フォーマットであり、この例では16×16の青い円をデータURLに埋め込んでいます。英単語は比較項目です。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>画像リストマーカーの比較</title>
  <style>
    body { max-width: 42rem; margin: 0 auto; padding: 1rem; font-family: sans-serif; }
    h2 { font-size: 1.1rem; }
    .image-list {
      list-style-type: square;
      list-style-position: outside;
      list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%230066cc'/%3E%3C/svg%3E");
      font-size: 20px;
      max-width: 22rem;
      padding-inline-start: 2rem;
    }
    .image-list li { margin-block: .5rem; }
    .large { font-size: 32px; }
    .reset { list-style-image: none; }
  </style>
</head>
<body>
  <h1>画像リストマーカーの比較</h1>
  <h2>list-style-image</h2>
  <ul class="image-list"><li>Alpha</li><li>Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa</li></ul>
  <h2>font-size: 32px</h2>
  <ul class="image-list large"><li>Alpha</li><li>Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa</li></ul>
  <h2>list-style-image: none</h2>
  <ul class="image-list reset"><li>Alpha</li><li>Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa</li></ul>
</body>
</html>

最初の2つのリストでは青い円形マーカー、3番目のリストでは正方形のマーカーが期待される結果です。2番目のリストではテキストだけが32pxに拡大されます。長い2番目の項目が折り返すとき、外側のマーカーとテキストの整列を比較してください。ファイルを編集した後、保存して再読み込みします。

画像のサイズと文字サイズを区別する

このSVGは幅と高さを明示的に16と指定しており、画像マーカーの寸法は16 CSSピクセルになります。テキストを20pxから32pxに拡大しても、この画像が自動的に比例して大きくなるわけではありません。また、すべてのマーカー画像が常に元のピクセル寸法を使用するというのも正確ではありません。画像に固有の寸法や比率がない場合、サイズは異なることがあります。

list-style-image には、個別のマーカーの幅や高さのパラメータはありません。小さなマーカーアセットを用意するか、SVG に適切な寸法を設定してください。::marker がサポートするプロパティも限られており、そこで幅や高さを設定しても任意の画像サイズにはなりません。正確なサイズや間隔が必要な場合は、リストのセマンティクスと実際のテキスト情報を保持しつつ、別の background-image や疑似要素デザインを検討してください。MDN：::markerで利用できるプロパティ

画像の削除と一括指定によるリセット

画像だけを削除するには、list-style-image: none を以下のように設定します。例では list-style-type: square を保持しているため、四角いマーカーが表示されます。変更を比較し、元の url() 宣言を復元して画像を再表示します。フォールバックマーカーは、画像の読み込みに失敗した場合や使用可能な画像がない場合にも使用されます。

.image-list {
  list-style-image: none;
}

以下の list-style の省略記法は、省略された画像コンポーネントもリセットします。そのため、後で適用すると、以前に宣言した画像が意図せず消えることがあります。後からの一括指定で画像設定が上書きされていないか確認し、意図に応じて個別プロパティを使用するか、省略記法に画像を含めてください。

.image-list {
  list-style: square outside;
}

マーカーが表示されない場合の確認事項

画像のURLとレスポンスを確認してください。外部スタイルシート内の相対URLは、そのCSSファイルに対して相対的に解決され、HTMLファイルに対してではありません。style要素内のURLは、ドキュメントの基本URLに従います。開発者ツールのネットワークパネルを使用して、404レスポンスや無効な画像形式を確認してください。
選択したli要素の計算済みlist-style-imageとdisplayを確認してください。list-styleの省略記法や、値を上書きするより優先度の高いルールがないかを確認します。また、displayがflexなどに変更されていないかも確認してください。これにより、要素がもはやリスト項目マーカーを生成しなくなります。
outside配置の場合、インデント不足または親要素のオーバーフロー設定によりマーカーが切り取られることがあります。リストのパディングと切り取りを確認してください。サイトポリシーがデータURLをブロックしている場合は、例の画像を許可された画像URLに置き換えてください。

入れ子になったリストもこのプロパティを継承することがあります。入れ子リストから画像を削除するには、そのリストに明示的にlist-style-image: noneを適用し、list-style-typeを希望する値に設定してください。

リストの意味とアクセシビリティを保つ

ここにある青い円は装飾用です。完了、警告、評価などの重要な意味は、CSS画像だけでなく、実際のリスト項目のテキストに入れてください。CSSマーカーにはHTMLのimg要素のようなalt属性がないため、画像が読み込まれるまたは読み上げられるだろうという前提で情報を省略しないでください。

olに同じ画像マーカーを設定すると、表示される番号が画像に置き換わります。読者がステップ番号を必要とする場合は、元の番号を保持してください。ul、ol、liの構造は維持し、画像がなくても項目とその順序が理解できるか確認してください。W3Cによる画像リストマーカーの定義

CSS