line-height（行の高さ）プロパティ
最終更新：2026-09-13
line-height line-height（行の高さ）プロパティ
line-height プロパティはテキストの行間の垂直方向の余白を設定します。適切な行の高さは長文の可読性を大きく高め、通常はフォントサイズの約 1.5 倍です。
| カテゴリ | |
|---|---|
| 初期値 | normal |
| 継承 | はい |
| 適用対象 | all |
| アニメーションタイプ | number |
| CSS バージョン | CSS1 |
| 状態 | 標準 |
📝 構文
line-height: normal | <number> | <length> | <percentage>;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
normal | キーワード | 既定の行の高さ（約 1.2） |
<number> | タイプ | 単位なしの倍率（例: 1.5） |
<length> | <percentage> | タイプ | 長さまたはパーセントによる固定の行の高さ |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| line-height | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザーでサポート | |||||
ヒント： 単位なしの数値（1.5 など）を推奨します。フォントサイズに合わせて拡縮し、継承の挙動も予測しやすいです。
重要： 単位なしの数値とパーセントでは継承のされ方が異なります。単位なしの数値は倍率として継承され、パーセントは親のフォントサイズを基準に解決されて固定ピクセル値として継承されます。
❓ よくある質問
QCSS で 1 行のテキストを垂直方向に中央揃えするにはどうすればよいですか？
Aline-height をコンテナの高さと等しく設定します。たとえば height: 40px; line-height: 40px とすると、1 行のテキストは垂直方向に中央揃えになります。ただし複数行のテキストははみ出すため、その場合は Flexbox の align-items: center に切り替えてください。
Qウェブサイトの本文を読みやすくするにはどの行の高さにすべきですか？
A本文にはフォントサイズの 1.5〜1.8 倍を推奨します。長文の読み物は 1.7〜1.8 がよく、見出しは 1.2〜1.4 と少し狭くできます。コードブロックはよく 1.4〜1.6 を使います。画面が狭いモバイルでは、通常デスクトップより少し大きい行の高さが必要です。
Qline-height: 1.5 と line-height: 150% の違いは何ですか？
A違いは継承にあります。単位なしの 1.5 は倍率なので、子要素は自身のフォントサイズから行の高さを計算します。これは予測しやすい挙動です。150% のようなパーセントは継承前に親のフォントサイズを基準に固定ピクセル値として解決されるため、子のフォントサイズが変わっても調整されず、問題を招くことがあります。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
