CSSはWebデザインに欠かせない要素の一つであり、多くのデザイナーに利用されています。その中でも、line-heightというプロパティは、Webサイトのレイアウトやデザインにおいて、非常に重要な役割を担っています。本記事では、line-heightについて解説し、その使い方や実際の効果について紹介します。
①line-heightとは
line-heightとは、文字列や要素の高さを指定するプロパティです。テキストの行間や、要素の上下の余白を調整することができます。例えば、line-heightが1.5の場合、1行の高さがフォントサイズの1.5倍になります。このプロパティは、テキストの可読性を向上させるために、または要素の見た目を調整するために利用されます。
②使い方
line-heightは、CSSで要素に適用することができます。以下は、その使い方の例です。
例①
p {
line-height: 1.5;
}
この例では、段落の行間を1.5倍に設定しています。
例②
h1 {
font-size: 36px;
line-height: 1.2;
}
この例では、見出しのフォントサイズが36pxで、行間を1.2倍に設定しています。このように、line-heightをフォントサイズと組み合わせることで、テキストの読みやすさを調整することができます。
例③
.button {
display: inline-block;
line-height: 40px;
}
この例では、ボタンの高さを40pxに設定しています。このように、line-heightを要素の高さとして利用することができます。
③実際試したところ結果
line-heightを変更すると、文字列の見た目が大きく変わることがわかります。例えば、行間が狭いと、テキストが詰まっているように感じられます。逆に、行間が広いと、読みやすさが向上すると感じる人もいます。
また、line-heightを要素の高さとして利用することで、要素の見た目を調整することができます。例えば、ボタンなどの要素には、適切な高さを設定することで、見た目を整えることができます。
実際の結果を見る：https://eigo-bunpou.com/nerdy/