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