line-heightとは

line-heightとは

line-height は、CSSプロパティの一つで、行の高さを設定するために使用されます。
このプロパティは、テキストの行間を制御し、可読性を向上させるために利用されます。
line-height を設定することで、行の基準線(テキストの基準となる線)と次の行の基準線との距離を指定します。

line-height の使い方

line-height は、次のように設定できます:

  • 数値値:

line-height: 1.5; のように、数値を指定します。
この場合、行の高さはフォントサイズの1.5倍になります。
これは「単位なし数値」とも呼ばれ、フォントサイズに対する相対的な高さを指定します。

  • 長さ値:

line-height: 20px; のように、ピクセル(px)、ポイント(pt)などの具体的な長さ単位で指定します。
この場合、行の高さは20ピクセルになります。

  • パーセンテージ値:

line-height: 150%; のように、パーセンテージで指定することもできます。
これはフォントサイズに対して指定したパーセンテージの高さを意味します。

  • キーワード値:

line-height: normal; のように、キーワードを使用することもできます。
normal はブラウザのデフォルトの行高さを指定します。

具体例

以下に、line-height を使用した基本的な例を示します。

HTML (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Line Height Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p class="example-text">これは行の高さを調整するためのテストです。行の高さが設定されることで、テキストの読みやすさが向上します。</p>
</body>
</html>

CSS (styles.css)

.example-text {
  font-size: 16px;
  line-height: 1.5; /* フォントサイズの1.5倍の高さ */
  color: #333;
}

この例では、line-height: 1.5; によって、行の高さがフォントサイズの1.5倍に設定されます。
これにより、テキストが行間でより読みやすくなります。

まとめ

line-height を適切に設定することで、テキストの可読性やデザイン性が向上します。
行間が広すぎるとテキストが散漫に見えることがあり、狭すぎると読みづらくなることがあります。
フォントサイズやデザインの要件に応じて、適切な値を選ぶことが重要です。