line-heightは単位なしでどう使う？メリットと正しい設定方法を解説

CSSのline-heightを指定するとき、「単位なし」にするか「px／em／rem」などを使うか悩んだことはありませんか？読みやすさやデザイン調整、レスポンシブ対応、アクセシビリティなど、あらゆる面で「単位なし」のline-heightは利点があります。この記事では、単位なしでの使い方を中心に、メリット・デメリット・正しい設定方法を具体例とともに解説します。CSSプロフェッショナルによる最新情報をもとに、実践ですぐ役立つ内容をお届けします。

line-height 単位 なし 使い方とは何か

line-heightの「単位なし」とは、CSSで「1.4」「1.5」など、数値のみで高さを指定することです。これはフォントサイズに対する倍率（比率）として解釈され、フォントサイズが変わる要素でも比率を保ったまま高さが自動的に計算されます。たとえば16pxのフォントにline-height 1.5を付与すれば計算結果で24px相当になります。倍率指定なので、inheritで継承される場合も子要素のフォントサイズに合わせて再計算され、より柔軟な設計が可能です。最新のCSS実践では、この単位なしの指定が文書の行間を安定させ、可読性・アクセシビリティ・レスポンシブデザインに優れていると評価されています。

単位なし line-height の基本構文

単位なしのline-heightは次のように記述します。
codeで:
p { font-size: 16px; line-height: 1.5; }
ここで1.5はフォントサイズの1.5倍という意味です。数値のみで指定するため、pxやemなどの単位は不要です。

この構文の利点は再計算可能である点です。たとえば子要素でフォントサイズを変更しても、line-heightはその子要素のフォントサイズを基準に正しい行間が維持されます。親子間でフォントサイズの差が大きいデザインでも、行間が乱れにくくなります。

他の指定方法との対比

line-heightには単位付きlength(px、em、remなど)、パーセンテージ、キーワードnormalなど他の指定方法もあります。
length指定は絶対値を用いるためフォントサイズが変わっても行間が一定ですが、nested要素でフォントサイズが異なると不自然になることがあります。
percentage指定はfont-sizeに対する割合を示しますが、inheritされた時などに固定されてしまうケースがあります。
normalはブラウザ／フォントに依存し、一貫性が低いです。

CSS仕様での推奨と実務での採用状況

CSS仕様やタイポグラフィデザインの現場では、単位なしのline-heightが推奨されることが多くなっています。読みやすさやアクセシビリティを重視する最近の設計思想では、基準のフォントサイズに対して比率で調整するこの指定方法が標準的とされています。
実際、多くのフレームワークやリセットCSSではline-height: 1.5などのunitless値が初期値として設定されており、文書全体にわたる行間の安定と予測可能性が確保されています。

単位なしで設定するメリット

単位なしline-heightを使うことで得られるメリットは多数あります。可読性の向上、レスポンシブ対応、アクセシビリティ、親子要素間の継承の整合性など、デザイン問わず恩恵がある点をここで詳しく説明します。

自動スケーリングとレスポンシブ対応性

単位なしのline-heightは、フォントサイズが変化する場面において高さも比率に応じて自動でスケーリングします。
たとえばブラウザズーム、ユーザー設定、メディアクエリによるフォントサイズ変更などでも、行間が詰まったり無駄に広がったりしにくいです。これが固定ピクセル指定ではできません。

継承時の一貫性

親要素に単位なしline-heightを指定すれば、子要素でフォントサイズが変わっても、比率が保たれた行間が自動的に設定されます。
長い見出しと本文、脚注など異なるサイズのテキストが混在する場合でも整ったタイポグラフィが維持できます。固定値やem／%指定だとこの継承で予期しないレイアウト崩れが発生します。

可読性とアクセシビリティの向上

行間が適切であれば、読み手の目の負担が減り読みやすくなります。単位なし指定によって、テキスト量が多い本文などで最適な行間を確保しやすくなります。
また、読者がフォントサイズを拡大する場合などにも対応しやすいため、アクセシビリティ要件を満たすデザインにも適しています。

保守性とデザインシステムでの整合性

複数のコンポーネントやページでCSSを共有する際、単位なしline-heightは設計の一貫性を保つために有効です。
基準を一度設定すれば、多くの要素がその比率を継承でき、調整も少なく済むため、CSSの冗長性・バグの混入が減ります。

単位なしでの使い方、正しい設定方法

実際に単位なしline-heightを導入する際にはどのように設定すべきか、具体的な手順と注意点を知っておくことが重要です。ここでは基準値の選び方、見出し・本文ごとの最適値、ツールやテスト方法などを詳しく解説します。

基準となる値の選び方

本文テキストの場合、一般的にline-heightは1.4〜1.6程度が適切とされています。読みやすさのバランスを取り、文字同士が密になりすぎず、改行間の空間が過度に広がらない範囲です。見出しでは1.2〜1.3、キャプションや小さい文字の場合には少し高めの1.5程度など、要素の用途に応じて微調整します。

見出しや本文での異なるパラメータ指定例

以下は見出し・本文ごとにline-heightを単位なしで設定した例です。適切な比率を設けることで階層構造が読みやすくなります。

このように、共通の基準を設けつつ用途ごとに調整することで、見た目の階層が明確になり、読み手への印象も整理されます。

注意点と避けるべき使い方

単位なしにも弱点があります。過度に小さな値(例1以下)は行間が重なり可読性を失いがちです。逆に非常に大きな値を設定するとテキストが散漫になります。
また、特殊なデザインや行間の微調整が厳しいUI部品（ボタンやラベルなど）では、固定ピクセルやrem指定が適する場合があります。

実際にテストする方法

実際にテストする方法

単位なしline-heightの効果を確認するには、異なるフォントサイズ・デバイス・ズームレベルでテストすることが肝心です。
たとえばPC・スマートフォン双方で見出しと本文の改行が美しくつながるか、文字が切れたり重なったりしないかを確認します。
ブラウザのデベロッパーツールで計算されたline-height値を確認することも有効です。

さらに、ユーザーアクセシビリティの面から、拡大表示やスクリーンリーダーなどでの可視性をチェックして、行間が適切かを検証することが推奨されます。

単位あり／単位なしの比較とよくある誤解

単位なしline-heightと単位あり指定との違いはどこにあるのか、また誤解しやすい点を整理することで、CSS設計でのミスを防ぎます。

継承の挙動の違い

単位なし数値は、子要素にその数値がそのまま継承され、子要素のフォントサイズに応じて計算されます。
一方でpxやem、%などを使うと、計算済みの長さが継承されることが多く、子要素のフォントサイズに比例せず不自然な行間になることがあります。
この差が、要素のネストが深いデザインで特に問題になります。

値域（ラインハイトのサイズ）の感覚差

unitless指定は1.0〜2.0の範囲で幅広に使えますが、値が小さいと詰まり過ぎ、大きすぎるとゆったりし過ぎる印象を与えます。
単位あり指定では具体的px値で制御可能なので、高精度がほしい場面で使われますが、そのぶん柔軟性は犠牲になります。

パフォーマンス上の注意と影響

行間設定自体はパフォーマンスに大きな影響を与えるものではありません。ただし、大量のテキストやネストの深い要素で複数のline-height設定が混在していると計算コストがわずかに増えることがあります。
またアクセシビリティ支援技術がフォントサイズ拡大時にline-heightを適切に再計算できなければ、スクリーンリーダーなどで読みにくさが出る可能性があります。

よくある誤解とその訂正

単位無し＝指定ミスという誤解がありますが、実際は仕様通り有効な使い方です。
unitlessとemや％では見た目が似ていても継承や計算の振る舞いが異なるので、誤った理解で混ぜて使うとレイアウトが崩れやすくなります。
またnormalキーワードをline-heightのデフォルトとしすぎて、フォントやブラウザごとの差異を無視するのも危険です。

まとめ

単位なしのline-heightはCSSタイポグラフィ設計において非常に強力な手法です。フォント変更時やレスポンシブデザイン、アクセシビリティ対応において柔軟で予測可能な行間を提供します。
本文には1.4〜1.6、見出しには1.2〜1.3など用途に応じた比率を設定し、小さな値や大きすぎる値の使用、見た目のみに頼る指定は避けましょう。

固定単位ありの指定は特定デザインや制約のあるUIにおいて役立ちますが、全体的なデザインにはunitlessでのline-heightを基本とすることが望ましいです。
最後に、どのような指定でも実際のブラウザ上で表示を確認し、フォントサイズ・画面幅・ユーザー設定に対する見え方をテストすることを忘れないでください。