【CSS Modules】line-heightプロパティの使い方
line-heightプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
line-heightプロパティは、要素内のテキスト行の高さを設定するプロパティです。このプロパティは、テキストの行と行の間の垂直方向の空間、つまり行間を調整することで、文章の可読性やページ全体の視覚的なバランスを決定する上で重要な役割を果たします。
指定できる値にはいくつかの種類があります。まず、normalというキーワードは、ウェブブラウザが設定している既定値（一般的にフォントサイズの約1.2倍程度）を使用します。次に、単位のない数値（例: 1.5）を指定すると、その値が要素のフォントサイズに対する倍率として解釈されます。例えば、font-size: 16pxが設定された要素にline-height: 1.5を指定した場合、行の高さは16px * 1.5 = 24pxになります。この単位なしの数値による指定は、親要素から子要素へ倍率がそのまま継承されるため、テキストサイズが変わっても行間が相対的に保たれるため、最も推奨される方法です。
また、pxやemなどの単位を伴う長さ（例: 24px, 1.5em）で絶対的な行の高さや相対的な高さを指定することも可能です。さらに、150%のようにパーセンテージで指定することもでき、これはフォントサイズに対する割合として行の高さが決まります。このプロパティを適切に設定することで、テキストが読みやすくなり、コンテンツのデザインにおける統一感を保つことができます。特に、長い文章を読む際の目の負担を軽減し、ユーザー体験を向上させるために欠かせないプロパティです。
公式リファレンス: line-height
構文(syntax)
1セレクタ { 2 line-height: 1.5; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません