リストの余白管理、デフォルトの挙動を理解していますか？
Web制作の現場で、リスト要素（ul, ol）のスタイリングに頭を悩ませることは多いはずです。特にリストマーカーの位置を制御するlist-style-positionプロパティは、CSSの基本中の基本ですが、実務レベルで「なぜかレイアウトが崩れる」というトラブルの温床になりがちです。今回は、このプロパティを使いこなし、デザインの精度を上げるための独自視点をお伝えします。
outsideとinsideの決定的な違いと実務への影響
list-style-positionには、初期値であるoutsideと、内側に配置するinsideがあります。outsideの場合、リストマーカーはボックスモデルの外側にぶら下がる形で配置されます。ここで多くのデザイナーが陥る罠が、親要素のpaddingとの干渉です。
例えば、ulに対してpadding-leftを大きく設定し、その中に背景色を敷いた場合、outsideのままだとマーカーが背景色の外にはみ出してしまいます。デザインカンプで「マーカーも含めて背景色の中に収めたい」という指示がある場合、outsideのままでは調整が非常に困難です。このようなケースでは迷わずinsideを選択すべきですが、ここでさらなる課題が発生します。
insideを選択したときに必ず直面する「改行問題」
insideを指定すると、マーカーがテキストの一部として扱われます。そのため、文章が長くなって2行目以降に折り返された際、マーカーの直下にも文字が回り込んでしまうのです。これは、多くのクライアントが嫌う「見た目の美しさを損なう状態」です。
これをスマートに解決する実務テクニックとして、私は「擬似要素（::before）を使ったマーカーの自作」を推奨しています。list-style-typeに頼るのではなく、spanタグでテキストを囲み、ulまたはliに対してpadding-leftで余白を確保しつつ、background-imageやfont-iconでマーカーを制御する手法です。
なぜあえて擬似要素を使うのか
ネイティブのlist-style-positionは、ブラウザ間の微細なレンダリング差を完全に消すことが難しいという側面があります。特にフォントサイズや行間（line-height）を細かく調整するLP制作などでは、マーカーの位置が1pxずれるだけで全体の調和が崩れます。
擬似要素で制御するメリットは、以下の3点です。
1. マーカーの垂直方向の位置をvertical-alignやtransformでミリ単位で調整できる。
2. 2行目以降がマーカーの下に潜り込むことを物理的に防げる（text-indentの負の値を併用する必要がない）。
3. レスポンシブ環境下でもマーカーのサイズや色を柔軟に変更できる。
まとめ：プロの選別眼を持つ
list-style-positionは、単純なリストであれば便利なプロパティですが、複雑なUIを構築する際には、その「挙動の制限」がボトルネックになります。実務では「手軽さ」よりも「修正のしやすさと予期せぬ崩れの回避」を優先すべきです。
基本的なCSSプロパティを使いこなすことは大切ですが、時にはそれを使わない選択をする。これもまた、シニアデザイナーとして現場で生き残るための重要なスキルだと考えています。ぜひ次回の案件では、リストマーカーの挙動を一度立ち止まって再考してみてください。
コメント