リストの「マーカー」がズレてモヤモヤする……その悩み、CSSで解決しましょう！
Webサイトを作っていて、「あれ、なんかリストの点（マーカー）が微妙に浮いてない？」と気になったことはありませんか？
テキストの行の真ん中あたりにポツンと浮かぶ黒い点。あるいは、文字サイズを大きくした瞬間にマーカーとテキストの高さがバラバラになってしまう現象。これ、CSSを触り始めたばかりの人が必ずと言っていいほど直面する「Web制作あるある」なんです。
実は、ブラウザがデフォルトで表示するリストマーカーは、私たちが思っている以上に「ワガママ」な存在。今日は、このマーカーと仲良く付き合うための、現場の知恵をお話ししますね。
—
なぜマーカーは「ズレ」てしまうのか？
まず知っておいてほしいのは、「リストマーカーは、実はHTML/CSSの『文字の一部』ではない」という事実です。
例えるなら、マーカーは「本の内容」ではなく「本の表紙に貼られたシール」のようなもの。テキストがどれだけオシャレに整列していても、シールであるマーカーは、ブラウザの気分次第で微妙な位置に配置されてしまうことがあるんです。
特に、フォントサイズを大きくしたり、行間（line-height）を調整したりすると、この「シール」はまるで水に浮く木の葉のように、ふわふわと上下にずれていってしまいます。
—
解決策：マーカーを「自分自身」でデザインする
標準のマーカー（`list-style: disc` など）で悩むのは、もう終わりにしましょう。プロの現場では、「標準のマーカーを消して、疑似要素（`::before`）で自分で描く」のが定石です。
これなら、マーカーの位置をCSSの `top` や `margin` でミリ単位まで自由にコントロールできます。
ステップ1：まずは標準を消す
まずは、ブラウザにお任せしていた標準の「シール」を剥がします。
ul {
/ 標準のマーカーを消す魔法のコード /
list-style: none;
padding-left: 0;
}
ステップ2：自分専用のマーカーを置く
次に、`li::before` を使って、テキストの前に「新しいマーカー」を配置します。
li {
/ マーカーを置くための余裕を作る /
padding-left: 20px;
position: relative;
}
li::before {
/ コンテンツとしてマーカーを定義 /
content: “”;
display: inline-block;
width: 8px;
height: 8px;
background-color: #333;
border-radius: 50%;
/ 位置の微調整 /
position: absolute;
left: 0;
top: 0.6em; / ここを調整すると上下位置がバッチリ決まります /
transform: translateY(-50%); / 中心を合わせるための隠し味 /
}
—
「top: 0.6em」と「transform」の秘密
ちょっとだけ技術的な話をしますね。ここで使った `top: 0.6em` と `transform: translateY(-50%)` は、どんなフォントサイズになってもマーカーがテキストの「ど真ん中」に来るための黄金コンビです。
- `top: 0.6em`: 「行の半分くらいの高さからスタートしてね」という指示。
- `transform: translateY(-50%)`: 「自分自身の高さの半分だけ上に引き戻してね」という指示。
この2つを合わせると、マーカーはどんなサイズになっても「行の中央」にビシッと吸い寄せられるんです。これさえ知っておけば、もう「マーカーがズレてる！」と深夜に頭を抱える必要はありません。
—
最後に：完璧主義になりすぎないで
Web制作を始めたばかりだと、「ピクセル単位で合わせないと！」と焦ってしまうこともあるかもしれません。でも、大丈夫。今回紹介した方法を使えば、PCで見てもスマホで見ても、美しいリストが作れるようになります。
リストは、読者にとって「情報の案内板」です。マーカーが整っているだけで、サイト全体の信頼感はぐっと増します。
「標準がダメなら、自分で作ればいい」。この考え方こそが、フロントエンド開発を楽しくするコツです。ぜひ、次のサイト制作で試してみてくださいね。応援しています！
コメント