リストマーカーの「沼」にハマらないために：`list-style-image`の限界と、モダンな解決策
フロントエンドの実務で、デザインカンプから「リストの先頭に特定のアイコンを置いてほしい」という要求を受けたとき、真っ先に思い浮かぶのは `list-style-image` プロパティではないでしょうか。
「とりあえずこれで実装して…」と安易に手を出すと、後で必ずと言っていいほど修正依頼という名の「地獄」を見ることになります。今回は、なぜ `list-style-image` が実務で嫌われるのか、そして私たちが現代のフロントエンド開発で選ぶべき「正解」について、少し踏み込んだ話をしましょう。
—
1. `list-style-image` の「何がダメ」なのか
まずは基本のおさらいです。`list-style-image` は、その名の通りリストのマーカーに画像を指定するプロパティです。
ul {
list-style-image: url(‘icon-star.png’);
}
これだけで実装できるなら簡単な話ですが、現場でこれを使うと以下の問題に直面します。
- サイズ調整ができない: ブラウザは画像を「そのままのサイズ」で表示しようとします。CSSで `width` や `height` を指定しても、このプロパティには一切影響しません。
- 配置の制御が不可能: テキストとの垂直方向の揃え（alignment）がブラウザのデフォルト依存になり、PCとスマホで見え方がズレることもザラです。
- 高解像度対応が困難: Retinaディスプレイなどの高密度画面でアイコンを綺麗に見せようとしても、レスポンシブに追従させることができません。
端的に言えば、「制御不能なブラックボックス」をDOMに埋め込んでいるようなものなのです。
—
2. 次世代の標準：`::marker` 擬似要素の活用
現代のフロントエンド開発では、`::marker` 擬似要素を活用するのがベストプラクティスです。これはリストマーカーを個別のノードとして操作できるようにする画期的な仕様です。
`::marker` を使えば、これまで不可能だった「マーカーのサイズ変更」や「色の変更（`content`で文字を使う場合）」が自由自在になります。
実践的なコードサンプル
以下は、`::marker` を活用してアイコンを配置する、実務クオリティのコードです。そのままコピーして試してみてください。
.custom-list {
list-style: none; / デフォルトのマーカーを消去 /
padding-left: 1.5rem;
}
.custom-list li {
position: relative;
margin-bottom: 0.5rem;
}
/ ::markerを使って画像マーカーを定義 /
.custom-list li::marker {
/ ここで画像を指定 /
content: url(‘path/to/icon.svg’);
}
/ もしIE11の残党がいない環境であれば、::markerは最強の武器になります /
—
3. 「もっと細かく制御したい」という現場のワガママに応える
`::marker` は便利ですが、複雑な余白調整や、アイコンとテキストの間に厳密な距離を持たせたい場合は、あえて `::before` を使う手法が最も確実です。これは「リストマーカーを諦めて、単なる装飾として扱う」という、シニアレベルの割り切りです。
現場で採用される「ベスト・オブ・ベスト」な実装
.refined-list {
list-style: none; / マーカーを完全に排除 /
padding: 0;
}
.refined-list li {
position: relative;
padding-left: 24px; / アイコン分のスペースを確保 /
line-height: 1.5;
}
.refined-list li::before {
content: ”;
position: absolute;
left: 0;
top: 0.25em; / テキストとの垂直位置を微調整 /
width: 16px; / アイコンサイズを完全制御 /
height: 16px;
background-image: url(‘icon.svg’);
background-size: contain;
background-repeat: no-repeat;
}
なぜこれが「正解」なのか
1. 柔軟性: `background-size` や `background-position` を駆使できるため、どんな画像でもピクセル単位で配置を制御できます。
2. 保守性: 後からアイコンを差し替えたり、マウスオーバー時にマーカーの色を変えたりするようなアニメーション実装も容易です。
3. ブラウザ間差異の排除: ブラウザのレンダリングエンジンに依存せず、常に同じ見た目を保証できます。
—
まとめ：技術の「枯れ」を見極める
`list-style-image` は、HTMLの黎明期から存在する便利なショートカットですが、現代の洗練されたUIを構築するには「力不足」です。
- 簡単な箇条書きなら `::marker`
- デザインの再現性が求められる現場なら `::before` + `background`
この使い分けができるだけで、あなたのマークアップの品質は一気に一段階上がります。仕様を鵜呑みにせず、「ブラウザが裏でどう処理しているか」を想像しながら実装する。その姿勢こそが、フロントエンドエンジニアとしての価値を高めてくれるはずです。
さあ、明日からの案件では、無機質なリストマーカーに命を吹き込んでやりましょう。
コメント