Webデザインにおいて、テキストの可読性を向上させる重要な要素の一つが行間（line-height）です。line-heightプロパティを適切に設定することで、テキストの読みやすさを改善し、デザイン全体のバランスを整えることができます。本記事では、line-heightの基本的な使い方から応用テクニックまでを詳しく解説します。
Contents
line-heightプロパティの基本構文
CSSでline-heightを指定する基本構文は以下の通りです。
selector {
line-height: 値;
}例えば、以下のコードはp要素の行間を1.5倍に設定します。
p {
font-size: 16px;
line-height: 1.5;
}テキストの高さが1.5倍になり、行間が広がる
line-heightの指定方法
数値（推奨）
p {
line-height: 1.5;
}フォントサイズに対して1.5倍の行間になる。単位なしで記述するのがベストプラクティス。
パーセンテージ（%）
p {
line-height: 150%;
}フォントサイズの150%として行間を設定。
pxやemなどの絶対値
p {
line-height: 24px;
}px や em を使うと、フォントサイズに関係なく固定の行間になる。
推奨されない理由：異なるフォントサイズの要素と組み合わせるとバランスが崩れやすい。
line-heightの実用例
見出しの行間を広げる
h1 {
font-size: 32px;
line-height: 1.3;
}見出しのデザインが整い、バランスの取れた配置に
長文の可読性を向上
p {
font-size: 16px;
line-height: 1.8;
}行間を広く取ると、長文でも読みやすくなる
line-heightを使う際の注意点
- 単位なしの数値が推奨される（
1.5のように記述） - 小さすぎると窮屈、大きすぎるとバラけるため適切なバランスを考える
line-heightとheightを同じにすると、テキストを垂直中央揃えできる
まとめ
line-heightは行間を調整するプロパティ- 単位なしの数値（
1.5など）がベストプラクティス - 長文は1．6～1．8、見出しは1．2〜1．4が推奨
- ボタンのテキストの中央揃えにも活用可能
line-heightを適切に設定することで、可読性の高いデザインを実現しましょう！
コメント