「文章が読みにくい」「文字が詰まって見える」そんなときに活躍するのが CSSのline-height（ラインハイト）です。 行間を調整することで、テキストの読みやすさを大きく向上させることができます。この記事では、line-heightの基本とおすすめの使い方を紹介します。 line-heightとは？ line-heightは、テキストの「行の高さ＝行間」を指定するCSSプロパティです。 行間が広すぎたり狭すぎたりすると、読みにくくなってしまうため、適切な設定が重要です。 主な指定方法 指定方法例特徴 数値（単位なし）line-height: 1.6;フォントサイズに対する倍率で指定（推奨） パーセントline-height: 160%;フォントサイズの割合で指定 長さline-height: 24px;絶対値で指定（固定高さ） 基本的な使い方 ① 標準的な行間を指定（1.6倍） コピー p { line-height: 1.6; } ② 小さめの行間（1.2倍） コピー .compact-text { font-size: 14px; line-height: 1.2; } ③ 固定ピクセルでの指定（例：24px） コピー .fixed-line { font-size: 16px; line-height: 24px; } おすすめのline-height値 本文用：1.5〜1.8 程度が読みやすい 見出し用：やや詰めて 1.2〜1.4 モバイル：余白を意識してやや広め おわりに line-heightを適切に設定するだけで、文章の見やすさ・印象は大きく変わります。 特にWebサイトでは、画面サイズによって印象が変わるので、レスポンシブ対応も意識して行間を調整してみましょう！
タグ: line-height
