なぜ、`list-style-image`は実務で「使えない子」なのか？
フロントエンドの現場で、リストマーカーに独自のアイコンをあてたいという要件は、もはや日常茶飯事ですよね。「`list-style-image`を使えば一発じゃん」と安易に飛びついて、数分後に頭を抱えた経験がある方も多いのではないでしょうか。
結論から言います。`list-style-image`は、現代の緻密なデザインを実現するには力不足です。 なぜそう言い切れるのか、そして我々プロが現場でどうやってこの問題を回避しているのか、その「泥臭い現実」と「スマートな解決策」を解説します。
—
1. `list-style-image`の限界：なぜ「制御不能」なのか
`list-style-image`は、MDNを見ればわかる通り、リストマーカーに外部画像を指定するためのプロパティです。しかし、こいつには致命的な欠点があります。
- 位置調整がほぼ不可能: 多くのブラウザで、マーカーの表示位置は「ブラウザ任せ」です。`padding`や`margin`で微調整しようとしても、要素の外側に追いやられたり、テキストと重なったりと、デザインカンプ通りの1ピクセルの狂いもない配置は絶望的です。
- リサイズが効かない: 画像のサイズを変更するプロパティが存在しません。巨大なアイコンを表示させてCSSで縮小する、といった小細工も通用しません。
- 描画の不整合: ブラウザによってマーカーとテキストのベースラインの合わせ方が微妙に異なり、クロスブラウザ対応に多大な時間を奪われます。
ブラウザのレンダリングエンジンは、`list-style-image`を「リストアイテムのボックスの外側」に機械的に配置するよう設計されています。つまり、我々がCSSで制御できる領域の外側に存在しているのです。
—
2. 実務の最適解：`background-image`で「擬似マーカー」を作る
では、現場のシニア層はどうしているか。答えはシンプルです。`list-style-type: none` でデフォルトのマーカーを消し去り、`li` 要素の `background-image` や `::before` 疑似要素を使って自作するのです。
これなら、`background-position` や `background-size` をフル活用して、配置もサイズも自由自在。これが現代のフロントエンドにおける「標準」です。
実践的なコード例
以下は、アイコンのサイズや位置を完璧に制御できる、現場で即戦力となる実装パターンです。
.custom-list {
list-style: none; / デフォルトのマーカーを消去 /
padding: 0;
margin: 0;
}
.custom-list li {
/ テキストがアイコンと被らないように左に余白を確保 /
padding-left: 24px;
/ 背景画像としてアイコンを設定 /
background-image: url(‘path/to/icon.svg’);
background-repeat: no-repeat;
/ アイコンの位置を微調整（垂直中央寄せ） /
background-position: 0 0.3em;
/ アイコンのサイズを明示的に指定 /
background-size: 16px 16px;
/ 行間を整える /
line-height: 1.6;
margin-bottom: 8px;
}
—
3. どちらを選ぶべきか？判断基準
もちろん、すべてのケースで `background-image` が正解というわけではありません。以下の判断基準を頭に入れておいてください。
- `list-style-image` を使ってもいいケース:
- 社内ツールや管理画面などで、デザインの整合性よりも「実装コストの低さ」が優先される場合。
- マーカーの配置が多少ズレていても、仕様上全く問題がない場合。
- `background-image` (または `::before`) を使うべきケース:
- クライアントワーク全般: デザインカンプと1ピクセルの誤差も許されない場合。
- アイコンのサイズを可変にする必要がある場合: レスポンシブ対応などでアイコンのサイズを調整したい時。
- アイコンにホバーエフェクトをつけたい場合: `background-position` をずらす手法（スプライト）や、疑似要素の透過度変化などで動的な表現が必要な場合。
—
現場からのアドバイス
最近のトレンドとしては、`background-image` よりも `::before` 疑似要素を使用する手法 がさらに好まれます。
`::before` で `content: ”;` を指定し、`display: inline-block;` にしてアイコンを配置すれば、背景画像よりもさらに柔軟に `flex` や `grid` を使ったレイアウトが可能になります。
「CSSは、標準機能の裏側にあるレンダリングの仕組みを知れば、思い通りに操れるようになる」。これは私が若手時代に先輩から教わった言葉ですが、本当にその通りだと思います。`list-style-image` という「手軽そうな罠」に引っかからず、一歩引いて「どう配置すればブラウザは最も素直に動いてくれるか」を考える癖をつけてください。
皆さんのコーディングが、明日から少しでもストレスフリーになることを願っています。
コメント