リストレイアウトを実装していると、「liごとに高さが揃わない」「同じデザインなのに一部の行だけズレて見える」といった違和感に直面することがあります。この問題は、margin や padding の指定ミスと思われがちですが、実務では line-height の設計が原因になっているケースが非常に多く見られます。本記事では、li の高さが揃わない仕組みと、その背後にある line-height の挙動を整理し、安定したリスト表示を実現するための考え方を解説します。
liの高さはどのように決まるのか
li 要素の高さは、明示的に height を指定しない限り、内部のテキストや子要素の高さによって自動的に決まります。このとき重要なのが、テキストの描画領域を決定する line-height です。li の高さは「フォントサイズ + line-height による上下余白 + padding + border」の合計で構成されており、見た目以上に複数の要素が関与しています。
line-heightが揃っていないことによる影響
li の高さが揃わない最も典型的な原因は、line-height が要素ごと、あるいは継承元ごとに異なっていることです。たとえば、親要素で line-height: 1.5 が指定されている一方で、子要素や一部のテキストに別の line-height が適用されていると、同じ1行テキストでも行ボックスの高さが変わってしまいます。
ul {
line-height: 1.6;
}
ul li span {
line-height: 1.2;
}
このような状態では、span を含む li と含まない li で、結果的に高さがズレて見えることになります。
line-heightを数値で指定していない場合の落とし穴
line-height を px などの固定値で指定していない場合、ブラウザはフォントサイズを基準に行ボックスを計算します。しかし、font-size が微妙に異なる要素が混在していると、その差が line-height にも反映され、li ごとの高さにばらつきが生じます。
特に em や rem を使ってフォントサイズを調整しているデザインでは、意図せず li 内の一部テキストだけが異なる行高を持つことがあり、これがズレの原因になります。
line-heightを相対値で統一する重要性
リスト内の高さを安定させたい場合、line-height は単位なしの数値で統一するのが基本です。単位なし指定はフォントサイズに対する倍率として扱われるため、継承やフォントサイズ変更時でも相対関係が保たれます。
ul li {
line-height: 1.5;
}
この指定により、li 内のテキスト構成が多少異なっても、行ボックスの高さが揃いやすくなります。
複数行テキストが含まれる場合の注意点
li 内のテキストが折り返して複数行になる場合、line-height の差はさらに顕著に現れます。1行目と2行目の行間が広すぎたり狭すぎたりすると、リスト全体のリズムが崩れ、視認性が低下します。
この場合も、li 単位で line-height を明示的に指定しておくことで、行数が増えても見た目の一貫性を保つことができます。
flexbox使用時に起こりやすいズレ
li を flex アイテムとして扱っている場合、align-items の指定によって縦位置が揃っていないように見えることがあります。しかし、これは flex の問題ではなく、内部テキストの line-height による行ボックスの差が原因であるケースがほとんどです。
flexbox で高さを揃えたい場合でも、まず line-height を揃え、そのうえで align-items を調整する、という順序で考えることが重要です。
height指定で無理に揃えるべきではない理由
li の高さが揃わないからといって、height を固定値で指定すると、フォントサイズ変更やレスポンシブ対応時にテキストがはみ出したり、上下が詰まったりする原因になります。これは一時的な対処にはなっても、長期的には破綻しやすい設計です。
高さのズレはレイアウトではなく、行ボックス設計の問題として捉え、line-height を調整するほうが安全です。
実務での確認ポイント
li の高さが揃わない場合は、まず開発者ツールで各 li に適用されている line-height と font-size を確認します。次に、子要素や擬似要素が異なる行高を持っていないかをチェックします。この順序で確認すれば、原因を効率よく切り分けることができます。
まとめ
li の高さが揃わない問題は、CSSレイアウトの不具合ではなく、line-height の設計によって引き起こされることが大半です。行ボックスの仕組みを理解し、li 単位で line-height を相対値指定で統一することで、複数行や装飾を含むリストでも安定した表示を実現できます。高さを無理に固定するのではなく、文字組みとして正しく整えることが、保守性の高いCSS設計につながります。
