【テクニカル・上級編】list-style-imageによる画像マーカーの実装 – HTML実践ガイド

1. サイズ調整の不能: `width` や `height` が指定できない。画像は等倍（オリジナルの解像度）でレンダリングされ、高DPIディスプレイへの対応（`srcset` 等）も不可能。
2. 配置の不確実性: ブラウザ間でマージンやアライメントの計算ロジックが微妙に異なる。特に `line-height` が絡むと、テキストとの垂直位置合わせ（Vertical Alignment）は運任せになる。
3. リフロー・リペイントの非効率性: 画像のロード完了タイミングにより、リスト項目のレイアウトが突如としてズレる「レイアウトシフト（CLS）」を誘発しやすい。

これらは、UXを最優先し、厳格なデザインシステムを運用する現代のWebアプリにおいて、許容し難い仕様と言える。

—

2. 救世主 `::marker` 擬似要素の真価

現代のモダンブラウザにおいて、リストマーカーを制御する唯一の正攻法は `::marker` 擬似要素だ。これは `

しかし、`::marker` はあくまで「限定的なスタイル」しか受け付けない。`display` プロパティも変更できないため、複雑なレイアウトには対応できないという制約がある。そこで、さらに一歩先を行く「背景画像による擬似要素」のパターンを紹介する。

推奨される実装パターン：`list-style-type: none` ＋ `::before`

`::marker` の制約を超え、パフォーマンスと柔軟性を両立させるには、あえて標準のリストマーカーを無効化し、`::before` を活用するのがプロの選択だ。

.custom-list {
list-style-type: none; / 標準のマーカーを無効化 /
padding-left: 0;

&__item {
position: relative;
padding-left: 1.5rem; / マーカー用の余白を確保 /

&::before {
content: “”;
position: absolute;
left: 0;
top: 0.5em; / テキストとの垂直位置を微調整 /
width: 1rem;
height: 1rem;
background-image: url(‘/path/to/icon.svg’);
background-size: contain;
background-repeat: no-repeat;

/ パフォーマンス最適化: ウィルチェンジの活用は慎重に /
/ 頻繁に更新されるリストでなければ、デフォルトの描画で十分高速 /
}
}
}

—

3. パフォーマンスと型安全の追求

TypeScriptでリストコンポーネントを構築する場合、単に見た目を整えるだけでは不十分だ。動的にマーカーが変わるような複雑なリストを扱う際は、以下の設計思想を組み込んでほしい。

コンポーネント設計における型安全性

interface ListItemProps {
label: string;
// マーカーアイコンのパスを動的に渡すケース
iconUrl?: string;
// クリティカルなパスでの遅延読み込みを考慮した型定義
priority?: ‘high’ | ‘low’;
}

// Reactなどで実装する場合の型安全性
const ListItem: React.FC = ({ label, iconUrl }) => {
// サーバーサイドでのレンダリング(SSR)を考慮し、
// パス解決をコンポーネント外部で行う設計が望ましい
return (