line-heightの使い方

HTML CSS

line-heightの使い方

line-height は、CSS でテキストの行間を設定するためのプロパティです。
これにより、テキストの行同士の間隔を調整することができます。
特に、可読性やレイアウトの調整に役立ちます。
ここでは、line-height の使い方とその適用方法について説明します。
使う場面は多いので知っている人は多そうですね。

基本的な使い方

line-height プロパティは、以下のように CSS で指定します。

.test-paragraph {
  line-height: 1.5;
}

この例では、line-height を 1.5 に設定しています。
数値を指定すると、フォントサイズに対する倍率として解釈されます。
例えば、フォントサイズが 16px の場合、行間は 24px（16px × 1.5）になります。

単位の指定

line-height にはいくつかの指定方法があります。
主に以下の4つが一般的です。

1. 数値（倍率）
1.5 のように指定します。
これはフォントサイズに対する倍率です。

.test-paragraph {
  line-height: 1.5;
}

2. 長さの単位
px, em, rem などの単位を指定します。
例えば、20px や 1.5em などです。

.test-paragraph {
  line-height: 20px;
}

3. パーセント
フォントサイズに対するパーセンテージで指定します。
例えば、150% のように指定します。

.test-paragraph {
  line-height: 150%;
}

4. 無単位
数値を指定することで、フォントサイズに対する倍率を設定する方法です。

.test-paragraph {
  line-height: 1.5;
}

line-height の効果

1. 可読性の向上
行間が広いと、テキストが読みやすくなります。
特に、長い文章や段落の場合に効果的です。

2. レイアウトの調整
行間を調整することで、デザイン全体のバランスを整えることができます。
例えば、見出しと本文の間隔を調整する際に使われます。

3. テキストの整列
line-height を適切に設定することで、テキストが縦に揃ったり、隣接する要素との間隔が調整されたりします。

実際の適用例

以下は、line-height を使った具体的な例です。
HTML と CSS のコードを用意しました。

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>line-heightの使い方</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p class="test-paragraph">これは行間を調整したテキストのサンプルです。行間が広いと、テキストが読みやすくなります。</p>
</body>
</html>
CSS (styles.css)
.test-paragraph {
  font-size: 16px;
  line-height: 1.5; /* 行間をフォントサイズの1.5倍に設定 */
}

この例では、line-height を 1.5 に設定し、フォントサイズが 16px の場合、行間が 24px になります。
これにより、テキストが読みやすく、レイアウトも整った印象になります。

終わりに

line-height プロパティを使用することで、テキストの可読性やレイアウトを簡単に調整することができます。
特に、長文や複雑なレイアウトの場合にその効果を発揮します。
プロジェクトのニーズに応じて、適切な値を設定してみてください。