line-heightとブラウザの違いを徹底解説！表示崩れを避ける実践ガイド

---

line-heightの基本を知ろう

line-height は CSS のプロパティで、行と行の間の高さを決める役割をします。実は font-size の大きさだけでは決まらず、line-height は文字の高さを一本の線で見たときの余白のようにも見えます。中学生にも分かるように言い換えると、文字の行の「箱」の高さを決める設定です。例えば font-size が 16px のとき line-height が 1.2 なら、行の高さは 19.2px になります。ここでの本質は、単純な数値だけでなく相対値 で指定できる点です。px で指定すると絶対的な高さ、% や multiplier で指定すると親要素のサイズに影響されます。さらに注意点として、line-height は親子関係を通じて継承されますが、子要素が自身の高低を決める場合、その計算はやや複雑になります。

このセクションではまず基本を押さえます。line-height の値は以下のように解釈されます。
1) 単位なしの数値は 文字の高さの倍率
2) px 指定は実際の像の高さを直接決める
3) em rem など相対単位はフォントサイズに対して計算される
4) normal はブラウザデフォルトの値で設定される
これらの違いを理解することで、同じ CSS でもブラウザごとに表示が変わる原因をつかめます。

ブラウザ間の違いが生まれる原因

ブラウザごとに line-height の解釈が少しずつ違う理由は、主に4つです。1つ目はデフォルトの計算方法の差、2つ目はフォントレンダリングの差、3つ目はデフォルトのフォントファミリの差、4つ目は標準の実装が年々変わっていること。実務ではこの差を避けるため、line-height を具体的な数値か、相対値のどちらかに統一して使うと安定します。

具体的な現象として、同じ CSS を適用しても Chrome では行間が広く見え、Firefox ではやや狭く見えることがあります。これはフォントのヒンティングや描画ロジックの違い、サブピクセルの処理の違いが原因です。特に小さなフォントサイズではその差が目立ちやすく、数ピクセル単位の差が画面全体の読みやすさを左右します。ここで大切なのは、相対値を使う時は親要素のサイズも考慮することです。親の line-height が子どもへ伝播するため、階層を下るほど予期せぬ変化が生じます。

実践的な対策とおすすめの設定

安定した表示を狙うにはいくつかのコツがあります。まずはベースとなる line-height を 1.2〜1.5 程度に設定し、フォントサイズが変わっても読みやすさを崩さない基準を作るのがおすすめです。次に、px 指定を使う場面と相対指定を使う場面を分けること。本文と見出しで別の line-height を設定する場合は、継承を意識して階層ごとに一貫性を持たせましょう。また、グローバルに設定する場合は html または body に対して設定し、特定の要素だけ変えたい場合はその要素へ上書きします。最後に実務ではテストデザインとして、実際の端末や画面サイズでの見え方を確認します。特にスマートフォンでは画面幅が狭くなるため、行間が詰まり過ぎないかをチェックしましょう。これらの方法を組み合わせることで、どのブラウザでも見やすいレイアウトに近づけることができます。

実例で比べてみよう：表とコードの解説

ここでは具体的なコードと、ブラウザ別の実例を表とともに示します。まずは基本的な例です。

p 要素には font-size を 16px、line-height を 1.4 に設定します。これにより、行間は約 22.4px となり、読みやすさが向上します。次に、同じ HTML に対して子要素の line-height を 1.6 に変えると、子要素だけが少し高くなる動作を確認できます。親子の関係を理解しておくと、複雑なレイアウトでも崩れを抑えられます。

able>ブラウザline-height 1.4 の印象line-height 1.6 の印象Chrome比較的均整少し間が広いFirefox若干狭く感じることがあるより余白を感じやすいSafari表示が穏やか読みやすさのバランスが良いble>

表の下には追加の解説を置きます。
実験を再現するコツは、同じフォントと同じサイズで line-height の違いを変えることです。実環境ではフォントファミリによっても見え方が変わります。文字間と行間のバランスを取り、読みやすい設計を心がけましょう。表だけでは伝わらないニュアンスを、文章で補足します。
なお、正常系の表示を基準 にしてから、問題となるケースを見つけ、局所的に調整するのが効率的です。

ピックアップ解説

ある日の友だちとの雑談を思い出す。私たちは同じ CSS を書いても画面が違って見える理由を、結局は行間の秘密にたどり着いた。line-height は font-size の周りを包む“箱”の高さを決める指揮棒。適切な値を選ぶと、読みやすさがぐんと上がる。私の経験では、まずは 1.2 から試して、目に優しい間隔を探すのがコツだ。小さなデバイスでは 1.4 程度が見やすいことが多い。もし偶然のズレが気になる場合は、親子関係の継承を疑い、階層ごとに値を最適化すると良い。そんな日常の小さな気づきが、デザインの大きな安定につながる。

---