リストマーカー、なんかズレてる…？ そんな時はline-heightで解決！
Webサイトを作っていると、リスト（箇条書き）って本当によく使いますよね。商品一覧だったり、手順の説明だったり、アイデアの羅列だったり…。HTMLで `
- ` や `
- ` で項目を並べていく。うんうん、基本中の基本！
でも、ふとリストを見返してみると、あれ？なんかマーカー（・とか数字とか）と、その隣のテキストの「てっぺん」とか「底辺」が揃ってない…？ なんて経験、ありませんか？
「え、なんで？CSSでちゃんと設定したはずなのに…」って、ちょっと焦っちゃいますよね。大丈夫、大丈夫。それはあなただけじゃないんです。多くの人が一度は「うーん、なんでだ？」って頭を抱える、とってもよくある現象なんです。
今日は、そんなリストマーカーとテキストの「垂直方向のズレ」問題に、優しく、そしてスマートに立ち向かう方法を、身近な例え話を交えながら一緒に学んでいきましょう！
なんでマーカーとテキストはズレちゃうの？ 〜「ベースライン」ってなんだっけ？〜
このズレの原因を理解するには、まず「ベースライン」という考え方を知っておくと便利です。
ベースラインって聞くと、なんだか難しそうに聞こえるかもしれませんが、実はとっても身近なものなんですよ。
例えば、ノートに文字を書くとき、罫線がありますよね？あの罫線が、文字の「土台」になって、まっすぐ書きやすくしてくれている。あの罫線こそが、文字にとっての「ベースライン」なんです。
コンピューターの画面上の文字も、実は目には見えない「ベースライン」があって、その線に沿って文字が並んでいるんです。
リストマーカーも、このベースラインに揃えようと頑張ってはいるんですが、フォントの種類やサイズ、あるいは要素の「行の高さ（line-height）」の設定によって、微妙にズレてしまうことがあるんですね。
特に、マーカーは文字よりも少し「背が高い」場合があったり、文字の「上の方」に重心があったりすると、このベースラインでの揃え方がうまくいかずに、見た目上「ズレてる！」と感じてしまうんです。
解決の糸口は「line-height」にあり！
さて、このズレを解消するカギとなるのが、CSSの `line-height` プロパティです。
`line-height` って、文字通り「行の高さ」のこと。これは、文字そのものの高さだけでなく、文字と文字の間にある「行間」も含めた、行全体の高さを決めるものなんです。
この `line-height` をうまく調整することで、マーカーとテキストの「距離感」をコントロールして、見た目をスッキリさせることができるんですね。
具体的にどうすればいいの？ 〜まずは基本の確認〜
まずは、リストに基本的なスタイルを当ててみましょう。
リストマーカーの整列
マーカーがズレやすい例
- これはリスト項目1です。
- これはリスト項目2で、
改行も入ってみましょう。 - これはリスト項目3です。
line-heightを調整した例
- これはリスト項目1です。
- これはリスト項目2で、
改行も入ってみましょう。 - これはリスト項目3です。
このコードをブラウザで開いて、比べてみてください。「マーカーがズレやすい例」と「line-heightを調整した例」で、マーカーとテキストの位置関係がどう変わったか、よーく見てみましょう。
「マーカーがズレやすい例」では、マーカー（・）がテキストのベースラインから少し上に浮いているように見えたり、改行が入った時にさらにズレが目立ったりするかもしれません。
一方、「line-heightを調整した例」では、`line-height` を `1.2` から `1.5` に少し広げただけで、マーカーとテキストがより自然に、そして綺麗に揃って見えるようになったはずです。
なぜ `line-height` の調整で揃うのか？ 〜買い物カゴと商品の関係〜
なぜ `line-height` を調整すると、マーカーとテキストが綺麗に揃うのでしょうか？
これを理解するために、ちょっとお買い物のシーンを想像してみましょう。
- リストマーカー は、いわば「買い物カゴ」だと思ってください。
- リストのテキスト は、そのカゴに入れる「商品」です。
`line-height` は、この「買い物カゴ」と「商品」を、どれくらいの「スペース」で運ぶかを決めるものなんです。
もし、カゴ（マーカー）が商品のサイズに対して小さすぎたり、カゴの持ち手が商品に引っかかりやすかったりすると、カゴと商品がうまく収まらず、見た目がごちゃごちゃしてしまいますよね？
`line-height` を広げるということは、この「運ぶためのスペース」を、カゴ（マーカー）と商品（テキスト）の両方にとって、もう少しゆったりと取ってあげるイメージです。
そうすることで、カゴ（マーカー）は商品（テキスト）のベースラインに、より自然に、そして安定して「収まる」ようになるんです。結果として、見た目のズレが解消される、というわけなんですね。
改行が入った時こそ `line-height` の真価が発揮される！
特に、リスト項目の中に `
` タグで改行が入っている場合、マーカーとテキストのズレは顕著になりやすいです。
これは、改行によって「行」が追加されることで、マーカーがその新しい行のベースラインにどう配置されるかが、より複雑になるためです。
`line-height` を適切に設定しておくと、この改行が入った場合でも、マーカーがテキストの左側に自然に配置され、全体の見た目が崩れにくくなります。
記述リスト (`dl`, `dt`, `dd`) でも使えるテクニック！
リストマーカーのズレ問題は、通常の `
- ` や `
- HTML
- HyperText Markup Languageの略。Webページの構造を定義するためのマークアップ言語です。
- CSS
- Cascading Style Sheetsの略。Webページのデザインやレイアウトを定義するためのスタイルシート言語です。
- HTML
- HyperText Markup Languageの略。Webページの構造を定義するためのマークアップ言語です。
- CSS
- Cascading Style Sheetsの略。Webページのデザインやレイアウトを定義するためのスタイルシート言語です。
- 単位なしの数値（例: `line-height: 1.5;`）: これが一番おすすめです！この数値は、その要素の `font-size` に対して「何倍」の高さにするかを指定します。例えば、`font-size` が `20px` で `line-height` が `1.5` なら、行の高さは `20px 1.5 = 30px` になります。この方法だと、フォントサイズが変わっても、行間が自動的に比例して調整されるので、とっても便利なんです。
- 単位付きの数値（例: `line-height: 24px;`）: これは、行の高さを直接ピクセル（`px`）で指定する方法です。フォントサイズが変わっても、行の高さは固定なので、フォントが大きくなると行間が狭く、フォントが小さくなると行間が広くなってしまうことがあります。
- パーセント（例: `line-height: 150%;`）: 単位なしの数値と同じように、`font-size` に対する相対値で指定します。`1.5` と `150%` は、ほぼ同じ意味になります。
- リストマーカーとテキストのズレは、フォントや行の高さの設定によって起こりやすい。
- 「ベースライン」という文字の土台を意識すると、原因が理解しやすい。
- CSSの `line-height` プロパティを調整することで、マーカーとテキストの「距離感」をコントロールし、見た目を綺麗に揃えることができる。
- `line-height` は単位なしの数値（例: `1.5`）で指定するのが、フォントサイズが変わってもバランスが取りやすくおすすめ。
- 記述リスト (`dl`, `dt`, `dd`) でも、同様の考え方で調整できる。
- ` だけではなく、定義リスト（Description List）である `dl`, `dt`, `dd` を使う場合でも、似たようなことが起こり得ます。
`dt`（項目のタイトル）と `dd`（項目の説明）の間で、テキストの揃えが微妙にずれることがあるんですね。
記述リストの整列
通常の記述リスト
line-heightを調整した記述リスト
この例では、`dd` 要素の `line-height` を調整することで、`dt` と `dd` の間の見た目のバランスを整えています。
`dl`, `dt`, `dd` の場合は、マーカーというよりは、`dt` と `dd` という「ブロック」同士の上下の余白や、`dd` の中のテキストの行間を調整することで、全体としてスッキリ見せるのがポイントになります。
どのくらいの `line-height` がベスト？ 〜「数字」と「単位」の話〜
さて、ここで気になるのが「どのくらいの `line-height` がベストなの？」ということですよね。
`line-height` には、いくつかの指定方法があります。
一般的に、可読性を考えると、`font-size` の 1.4倍〜1.8倍 くらいが心地よい行間になりやすいと言われています。
ただ、これはあくまで目安です。デザインするサイトの雰囲気や、使用するフォント、ターゲットとする読者層によって、最適な値は変わってきます。
まずは `1.5` あたりから試してみて、実際にブラウザで表示を見ながら、微調整していくのが成功の秘訣です！
まとめ：リストマーカーのズレは `line-height` でスマートに解決！
どうでしたか？リストマーカーの垂直方向のズレ問題、少しはスッキリしましたでしょうか？
リストはWebサイトの「顔」とも言える、とても重要な要素です。ちょっとした見た目のズレを解消するだけで、サイト全体の印象がグッと良くなることもあります。
今回ご紹介した `line-height` のテクニック、ぜひあなたのWeb制作に取り入れてみてください。きっと、より美しく、より洗練されたWebサイト作りのお手伝いができるはずですよ！
これからも、皆さんの「なぜ？」に寄り添いながら、Web制作の楽しさを伝えていけたら嬉しいです。また次の記事でお会いしましょう！
- ` を使って、そこに `
コメント