Documentation CSS

概要

list-style-imageプロパティは、CSSでリストのマーカー（箇条書きの記号）をカスタム画像に置き換えるためのプロパティです。デフォルトの丸点や数字の代わりに、オリジナルのアイコンや画像を使用することで、デザインに個性を加えることができます。

この記事では、list-style-imageの基本的な使い方から、実践的なカスタマイズ手法、代替手法との比較まで詳しく解説します。

list-style-imageの基本

基本構文

/* 画像を指定 */
list-style-image: url('marker.png');

/* 画像なし（デフォルト） */
list-style-image: none;

/* グローバル値 */
list-style-image: inherit;
list-style-image: initial;
list-style-image: revert;
list-style-image: unset;

シンプルな使用例

<ul class="custom-list">
  <li>最新のセキュリティ対策</li>
  <li>24時間サポート体制</li>
  <li>無料アップデート保証</li>
</ul>
.custom-list {
  list-style-image: url('star-icon.png');
  padding-left: 24px;
}

.custom-list li {
  padding-left: 8px;
  margin-bottom: 12px;
}

画像形式の指定方法

外部画像ファイル

/* PNG画像 */
ul {
  list-style-image: url('/images/marker.png');
}

/* SVG画像 */
ul {
  list-style-image: url('/images/marker.svg');
}

/* 相対パス */
ul {
  list-style-image: url('../icons/bullet.png');
}

インラインSVG（Data URI）

Data URIを使用すると、外部ファイルなしで画像を埋め込むことができます。

/* シンプルな円 */
ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="4" fill="%233498db"/></svg>');
}

/* チェックマーク */
ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="%2327ae60" d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0z"/></svg>');
}

/* 矢印 */
ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23e74c3c" d="M1 6l4-4v3h6v2H5v3z" transform="rotate(180 6 6)"/></svg>');
}

グラデーション画像（CSS関数）

/* 線形グラデーションの四角形 */
ul {
  list-style-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 放射状グラデーションの円 */
ul {
  list-style-image: radial-gradient(circle, #f093fb 0%, #f5576c 100%);
}

フォールバック設定

画像が読み込まれない場合に備えて、list-style-typeでフォールバックを指定します。

.fallback-list {
  /* 画像が読み込まれない場合は四角形を表示 */
  list-style-type: square;
  list-style-image: url('marker.png');
}

/* または、ショートハンドで指定 */
.fallback-list {
  list-style: square url('marker.png');
}

実践的な使用例

特徴リスト

<ul class="feature-list">
  <li>高速なパフォーマンス</li>
  <li>直感的なインターフェース</li>
  <li>豊富なカスタマイズオプション</li>
</ul>
.feature-list {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="%233498db"/><path fill="white" d="M7 10.5l-2.5-2.5 1-1L7 8.5l3.5-3.5 1 1z"/></svg>');
  padding-left: 24px;
}

.feature-list li {
  padding-left: 8px;
  margin-bottom: 12px;
  line-height: 1.6;
}

カテゴリ別リスト

<div class="category-lists">
  <ul class="tech-list">
    <li>React</li>
    <li>Vue.js</li>
    <li>Angular</li>
  </ul>

  <ul class="design-list">
    <li>Figma</li>
    <li>Sketch</li>
    <li>Adobe XD</li>
  </ul>
</div>
.tech-list {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><rect width="10" height="10" x="1" y="1" fill="%233498db" rx="2"/></svg>');
}

.design-list {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><circle cx="6" cy="6" r="5" fill="%23e74c3c"/></svg>');
}

.tech-list li,
.design-list li {
  padding-left: 8px;
  margin-bottom: 8px;
}

段階的な手順リスト

<ol class="steps-list">
  <li>アカウントを作成します</li>
  <li>プロフィールを設定します</li>
  <li>初期設定を完了します</li>
</ol>
.steps-list {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="9" fill="%2327ae60"/><path fill="white" d="M8.5 13.5l-3-3 1.5-1.5 1.5 1.5 4-4 1.5 1.5z"/></svg>');
  padding-left: 32px;
}

.steps-list li {
  padding-left: 12px;
  margin-bottom: 16px;
  line-height: 1.8;
}

画像サイズの調整

list-style-imageでは画像サイズを直接制御できないため、適切なサイズの画像を用意するか、代替手法を使用する必要があります。

推奨画像サイズ

  • 一般的なリスト: 12px × 12px 〜 16px × 16px
  • 大きめのリスト: 20px × 20px 〜 24px × 24px
  • SVG形式: viewBoxで任意のサイズに対応

サイズを制御できる代替手法

list-style-imageの代わりに::before疑似要素を使用すると、サイズを細かく制御できます。

/* list-style-image では制御できないサイズ */
.limited-control {
  list-style-image: url('large-icon.png'); /* サイズ調整不可 */
}

/* ::before 疑似要素を使用した代替手法 */
.flexible-control {
  list-style: none;
  padding-left: 0;
}

.flexible-control li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
}

.flexible-control li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  background-image: url('icon.png');
  background-size: contain;
  background-repeat: no-repeat;
}

list-style-image vs ::before 疑似要素

機能list-style-image::before 疑似要素
サイズ制御不可可能
位置調整限定的自由
アニメーション不可可能
ホバー効果不可可能
ブラウザサポート広い広い
コードの簡潔さシンプルやや複雑

疑似要素を使用した高度なカスタマイズ

.advanced-list {
  list-style: none;
  padding: 0;
}

.advanced-list li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 16px;
  line-height: 1.6;
}

.advanced-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: url('icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.2s ease;
}

/* ホバーでアイコンを拡大 */
.advanced-list li:hover::before {
  transform: translateY(-50%) scale(1.2);
}

複数の画像を切り替える

.dynamic-list {
  list-style: none;
  padding: 0;
}

.dynamic-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
}

.dynamic-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}

/* 状態に応じて異なる画像 */
.dynamic-list li.completed::before {
  background-image: url('check-green.svg');
}

.dynamic-list li.pending::before {
  background-image: url('clock-yellow.svg');
}

.dynamic-list li.failed::before {
  background-image: url('cross-red.svg');
}

アクセシビリティの考慮

スクリーンリーダー対応

画像マーカーは視覚的な装飾であり、スクリーンリーダーには読み上げられません。重要な意味を持つ場合は、代替テキストを提供してください。

<!-- 視覚的な情報に依存しない構造 -->
<ul class="status-list" role="list">
  <li class="completed">
    <span class="visually-hidden">完了:</span>
    タスク1を完了しました
  </li>
  <li class="pending">
    <span class="visually-hidden">保留中:</span>
    タスク2は保留中です
  </li>
</ul>
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

よくある問題と解決策

問題1: 画像が表示されない

/* 問題: 相対パスが正しくない */
ul {
  list-style-image: url('icons/marker.png'); /* パスを確認 */
}

/* 解決策: 絶対パスまたは正確な相対パスを使用 */
ul {
  list-style-image: url('/assets/icons/marker.png');
}

問題2: 画像の位置がずれる

/* 解決策: ::before疑似要素で位置を調整 */
.aligned-list {
  list-style: none;
}

.aligned-list li {
  position: relative;
  padding-left: 28px;
}

.aligned-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.3em; /* テキストのベースラインに合わせる */
  width: 16px;
  height: 16px;
  background-image: url('marker.png');
  background-size: contain;
}

問題3: 高解像度ディスプレイでぼやける

/* 解決策: SVGを使用するか、2x画像を用意 */
ul {
  list-style-image: url('marker.svg'); /* SVGはスケーラブル */
}

/* または */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  ul {
    list-style-image: url('marker@2x.png');
  }
}

ブラウザサポート

ブラウザサポート状況
Chrome全バージョン
Firefox全バージョン
Safari全バージョン
Edge全バージョン
Opera全バージョン
IE4以降

list-style-imageはすべてのモダンブラウザで完全にサポートされています。

まとめ

list-style-imageプロパティは、リストマーカーを画像でカスタマイズする簡単な方法です。

主なポイント:

  • 外部画像ファイルまたはData URI（インラインSVG）で指定可能
  • list-style-typeでフォールバックを設定することを推奨
  • 画像サイズの制御が必要な場合は::before疑似要素を検討
  • SVG形式を使用すると高解像度ディスプレイでもきれいに表示
  • アクセシビリティのため、視覚情報に依存しすぎない設計を心がける

シンプルなカスタマイズにはlist-style-image、より高度な制御が必要な場合は疑似要素を使い分けましょう。

参考文献

円