泥臭い現場で光る、リスト表現の深淵：`list-style-image`と`list-style-position`を徹底解説

諸君、日々のフロントエンド開発、お疲れ様です。
「リストなんて、`ul`と`li`を書いて、せいぜい`list-style-type: none;`でデフォルトの点や四角を消すくらいだろ？」
そう思っているそこの君、ちょっと待ってほしい。リスト要素はHTMLの骨格を成す重要な部品であり、その表現力はCSSによって無限に広がる奥深い世界を持っている。

今回は、そんなリスト表現の中でも特に「見た目」と「レイアウト」に直結する`list-style-image`と`list-style-position`に焦点を当てていこう。これらは一見地味だが、知らずに使うと思わぬレイアウト崩れを引き起こしたり、逆に巧みに使えばデザインの幅を大きく広げたりする、まさに「縁の下の力持ち」的存在だ。

標準の黒い点や数字だけでは物足りない、もっとリッチな表現を求められる場面は少なくないはずだ。アイコンをマーカーにしたい、箇条書きのインデントを細かく制御したい……そんなときに、これらのプロパティが君の武器となる。さあ、一緒にその挙動の裏側と、現場で役立つ実践的な使い方を深掘りしていこうじゃないか。

—

1. デフォルトマーカーからの脱却：`list-style-image`

まず、リストのマーカーに画像を指定できる`list-style-image`から見ていこう。標準の`disc`や`square`、`decimal`といったタイプではなく、独自のアイコンやブランドイメージに合わせた画像を使いたい場合に活躍する。

標準的な使い方

使い方は非常にシンプルで、`url()`関数を使って画像ファイルのパスを指定するだけだ。

ul {
/ 画像ファイルをマーカーとして指定 /
list-style-image: url(‘./assets/custom-bullet.svg’);
}

これで、`ul`の子要素である`li`の先頭に、指定した画像がマーカーとして表示されるようになる。

現場での知見：フォールバックとSVGの活用

ここで、一つ現場の泥臭い経験からくるアドバイスをしよう。
画像はあくまで外部ファイルだ。ネットワークの状況やファイルパスのミスで、画像が読み込めない可能性は常に存在する。そんな時、マーカーが何も表示されず、デザインが崩れたり情報が伝わりにくくなったりするのは避けたい。

そこで重要なのが、フォールバック戦略だ。`list-style-image`は、画像が読み込めなかった場合のために、`list-style-type`と組み合わせて指定することができる。

ul {
/ まずカスタム画像を試みる /
list-style-image: url(‘./assets/custom-bullet.svg’);
/ 画像が読み込めなかった場合は、標準のディスクマーカーを表示する /
list-style-type: disc;
}

こうすることで、もし画像が読み込めなくても、最低限の視認性を保つことができる。これは地味だが、ユーザー体験を損なわないための大切な配慮だ。

また、現代的な開発では、画像マーカーにはSVGアイコンを使うことを強く推奨する。

• 解像度非依存: どんなデバイスでもクリアに表示される。
• 軽量: PNGやJPGに比べてファイルサイズが小さいことが多い。
• CSSでの制御: `fill`プロパティなどで色を制御できる（ただし、`list-style-image`で指定した場合は、このCSS制御はできない点に注意が必要。背景画像として使うか、`::marker`擬似要素を使うのが一般的）。

注意点：画像サイズの制御

`list-style-image`を使う上で、画像のサイズをCSSで直接制御できないという大きな制約があることを覚えておこう。指定した画像は元のサイズのまま表示されるため、デザインに合わせて画像を調整する必要がある。

もし、CSSでマーカー画像のサイズを柔軟に制御したいのであれば、`list-style-image`ではなく、`::before`擬似要素と`background-image`を組み合わせる方法や、後述する`::marker`擬似要素を使う方が、はるかに高い自由度を得られる。`list-style-image`はあくまで「画像をそのままマーカーとして使う」ためのシンプルなプロパティだと認識しておこう。

—

2. レイアウトを司る：`list-style-position`

次に、マーカーがリストアイテムのコンテンツに対してどこに配置されるかを制御する`list-style-position`だ。これはたった二つの値、`outside`と`inside`しかないが、これがまたレイアウトに大きな影響を与える。

`outside`：デフォルトの挙動

`outside`はリストマーカーが、リストアイテム（`li`要素）のコンテンツボックスの外側に配置されるという値だ。これはブラウザのデフォルトの挙動でもある。

視覚的には、`li`要素の左側のパディング領域にマーカーが描画されるイメージだ。このため、マーカーとテキストが重なることはなく、テキストは常にマーカーの右側に整列して表示される。

`inside`：コンテンツ内への配置

一方で`inside`は、マーカーがリストアイテムのコンテンツボックスの内側に配置される。これがどういうことかというと、マーカーがリストアイテムのテキストコンテンツの一部として扱われる、ということだ。

具体的には、マーカーがリストアイテムの最初の行の先頭に表示され、その後にテキストが続く。もしテキストが複数行にわたる場合、2行目以降のテキストはマーカーの右側ではなく、1行目のテキストの先頭位置に合わせてインデントされる。つまり、マーカーのすぐ下にはテキストが回り込まないのだ。

ボックスモデルとの関係性

この`outside`と`inside`の違いは、リストアイテムのボックスモデルを理解すると、より深く腑に落ちる。

• `outside`の場合: マーカーは`li`要素のコンテンツボックスの外、左側のパディング領域に描画される。これは、`li`要素自体が持っているパディングによって、マーカーとテキストの間に適切なスペースが生まれることを意味する。テキストの左端は、`li`要素のパディングの内側から始まるため、マーカーとテキストが重なる心配がない。

• `inside`の場合: マーカーは`li`要素のコンテンツボックスの内部、最初のインラインボックスの一部として描画される。これにより、マーカー自体がテキストフローの一部となり、テキストがマーカーの右側から回り込むような挙動を示す。特に、リストアイテムが複数行にわたる場合、テキストが全体的に右にずれるため、インデントが深くなったように見える。

この挙動の違いを理解しないと、「なんでリストのインデントが思った通りにならないんだ？」と頭を抱えることになる。特に`inside`は、テキストの回り込み方が直感と異なる場合があるので注意が必要だ。

—

3. ブラウザの裏側：マーカーのレンダリング

ブラウザは、リストマーカーをどのように描画しているのだろうか？これは、CSSの標準仕様で定義された「marker box」という概念によって説明される。

ブラウザのレンダリングエンジンは、`li`要素に対して、通常のコンテンツボックスとは別に、マーカー専用の匿名ボックス（marker box）を生成する。このmarker boxの中に、`list-style-type`で指定された記号や、`list-style-image`で指定された画像が描画されるのだ。

• `list-style-position: outside;`の場合、このmarker boxは`li`要素のコンテンツボックスの「外側」、正確にはコンテンツボックスとパディングボックスの間に配置される。そして、`li`要素は通常、`display: list-item;`という独自の表示タイプを持つため、このmarker boxもブロック要素の左側に「浮いている」ような形で配置され、テキストとは独立した領域を保つ。

• `list-style-position: inside;`の場合、marker boxは`li`要素のコンテンツボックスの「内側」に、あたかもテキストの一部であるかのように配置される。これは、マーカーがインライン要素のように振る舞い、最初の行のテキストに隣接して配置され、その後のテキストがマーカーの右側から回り込む挙動を引き起こす主要因だ。

この「marker box」の存在を意識することで、なぜマーカーがパディングやマージンに影響を受けたり、テキストと異なる挙動を示したりするのか、その謎が解けるはずだ。

—

4. 実践！コピペで使えるサンプルコード

それでは、ここまでの知識を活かして、実際にコードを書いてみよう。`list-style-image`と`list-style-position`の両方を試せる、実践的な例を示す。

リストマーカーの挙動を深掘りする

`list-style-image`と`list-style-position`がリストアイテムに与える影響を見ていきましょう。

1. `list-style-image` を使ったカスタムマーカー

SVGアイコンをData URI形式で直接埋め込んでいます。画像が読み込めない場合は、フォールバックとして四角（`square`）が表示されます。

• これはカスタム画像マーカーのアイテムです。
• 画像が指定されたマーカーは、リストの見た目を豊かにします。
• もし画像が読み込めない場合でも、`list-style-type`で指定したマーカーが代わりに表示されます。
• 長文を書いてみましょう。画像マーカーがどのように配置されるか、そしてテキストの折り返しがどのように処理されるかを確認してください。通常、画像マーカーはテキストの左外側に配置されます。

2. `list-style-position: outside` の挙動（デフォルト）

マーカーがリストアイテムのコンテンツボックスの外側に配置されます。テキストはマーカーの右側に整列します。

• これは `outside` のリストアイテムです。
• マーカーは `li` 要素の左側のパディング領域に描画されます。
• テキストはマーカーの右側にきちんと揃います。
• この挙動は、多くのリストで期待される標準的なものです。コンテンツのインデントを制御しやすいのが特徴です。

3. `list-style-position: inside` の挙動

マーカーがリストアイテムのコンテンツボックスの内側に配置されます。テキストはマーカーに続いて回り込みます。

• これは `inside` のリストアイテムです。
• マーカーがコンテンツの一部として扱われるため、テキストがマーカーの右側から回り込みます。
• 複数行にわたるテキストの場合、2行目以降もマーカーの下ではなく、1行目のテキストの開始位置に揃います。
• この挙動は、特に長文のリストアイテムでインデントの見た目を大きく変える可能性がありますので、注意深く使用しましょう。

4. `list-style` ショートハンドプロパティ

`list-style` プロパティを使って、`type`、`position`、`image` をまとめて指定することもできます。

• ショートハンドで設定されたリストアイテムです。
• このプロパティは、`list-style-type`、`list-style-position`、`list-style-image` の順で記述できます。
• 指定されなかったプロパティは初期値が適用されます。

このコードでは、`li`要素にダッシュのボーダーを引いて、それぞれの`li`要素の領域を可視化している。これにより、`list-style-position`が`li`要素のコンテンツ領域にどう影響を与えるかが、より分かりやすくなるはずだ。特に`inside`の挙動は、実際に手を動かして試してみないと感覚を掴みにくいので、ぜひエディタに貼り付けて動作を確認してほしい。

—

5. 現場でのベストプラクティスと注意点

最後に、実務でこれらのプロパティを扱う上でのベストプラクティスと注意点をいくつか共有しておこう。

アクセシビリティへの配慮

`list-style-image`で画像マーカーを使用する場合、その画像は純粋な装飾であり、意味のある情報を伝達するべきではない。なぜなら、画像マーカーには代替テキスト（`alt`属性）のような仕組みがなく、スクリーンリーダーのユーザーにはその情報が伝わらないからだ。

もしマーカーが「重要度を示す」「カテゴリを区別する」などの意味を持つ場合は、CSSの画像マーカーではなく、`li`要素のコンテンツ内にアイコンSVGやテキストを直接記述するなど、意味が伝わるマークアップを検討すべきだ。

レスポンシブデザインでの考慮

`list-style-position: inside;`は、特にモバイルデバイスのような画面幅が狭い環境で、テキストの折り返し方やインデントに大きな影響を与える可能性がある。狭い画面でテキストが回り込むと、視認性が低下したり、レイアウトが崩れて見えることがある。

レスポンシブデザインを考慮する際は、PCとモバイルの両方でリストの見た目を確認し、必要であればメディアクエリを使って`list-style-position`の値を切り替える、あるいは`padding-left`で調整するなど、細やかな調整が求められるだろう。

メンテナンス性とモダンなアプローチ：`::marker`擬似要素

`list-style-image`はシンプルだが、画像のサイズや色をCSSで細かく制御できないという制約があった。この問題を解決し、より柔軟なマーカースタイリングを可能にするのが、CSSの`::marker`擬似要素だ。

`::marker`擬似要素を使えば、マーカーの色、サイズ（`font-size`）、位置（`margin`）などを直接CSSで指定できる。これにより、画像を使わずとも、よりリッチなカスタムマーカーを実現できるようになった。

ul li::marker {
content: ‘👉’; / 絵文字をマーカーに /
color: #e74c3c; / 色を指定 /
font-size: 1.2em; / サイズを調整 /
/ margin-right: 5px; / / マーカーとテキストの間隔も調整可能 /
}

モダンブラウザでのサポートも進んでいるため、今後は`list-style-image`よりも`::marker`擬似要素を使ったアプローチが主流になるだろう。ただし、`list-style-image`は依然としてシンプルに画像を配置したい場合に有効な選択肢であり、両者の特性を理解して使い分けることが重要だ。

—

まとめ

今回は、HTMLのリスト要素を彩る`list-style-image`と、その配置を制御する`list-style-position`について深掘りしてきた。

• `list-style-image`は、画像をマーカーとして指定するシンプルなプロパティだが、画像サイズを直接制御できないという制約がある。フォールバックとして`list-style-type`を併用し、SVGアイコンの活用を検討しよう。
• `list-style-position`は、`outside`と`inside`の二つの値で、マーカーがコンテンツボックスの「外側」か「内側」かを変える。特に`inside`はテキストの回り込み方に影響を与え、レイアウトに視覚的な変化をもたらすため、その挙動をしっかり理解しておくことが肝心だ。
• ブラウザは「marker box」という匿名ボックスを生成してマーカーを描画している。
• より柔軟なマーカーデザインを求めるなら、`::marker`擬似要素の活用も視野に入れていこう。

リストはHTMLの基本要素でありながら、CSSによる表現の奥深さを教えてくれる好例だ。今日学んだ知識を活かし、地味なリストを、よりユーザーフレンドリーで魅力的なUIに変貌させてほしい。

それでは、また次の記事で会おう！ 現場からは以上だ！