Title

line-heightとは

line-height とは次の語句からなるCSSのプロパティです。

line

読み: ライン
意味: 線、行

height

読み: ハイト
意味: 高さ

目次に戻る

line-heightプロパティの概要

このプロパティは行ボックスの高さを指定するために使用します。 もう少し分かりやすい言葉にすると、「テキストラインの高さを指定するために使用します。」という解釈をしていただければ良いと思います。

line-heightプロパティをインライン要素に対して指定すると、インライン要素のボックスの高さを指定したことになります。 また、ブロックレベル要素に対して指定した場合は、その中に含まれるインラインのボックスの高さの最小値を指定したことになります。

目次に戻る

実機サンプルとサンプルコード

ここからは、実際の要素に対して、このプロパティを適用したものを見ていきたいと思います。 サンプルで使用しているのはdiv要素です。この要素はブロックレベル要素であり、コンテンツをまとめておく汎用コンテナーです。 マークアップの意味は特別にはありませんので、非常に使い勝手の良い要素でもあります。

構文

セレクター{line-height: 設定値;}

初期値: normal

初期値のnormalキーワードは行間を空けない設定でテキストが表示されます。 なお、このプロパティのキーワード値は、このnormalのみです。

div{line-height: normal;}

目次に戻る

数値: 単位なし数値

line-heightプロパティで行間の幅を指定する際には基本的に数値による指定を行います。 このサンプルでは数値を使って行間を指定していますが、「単位なし」の数値を使っているところが ポイントとなります。

単位を指定しない場合、その要素のフォントサイズに、この指定数値を掛けたもので計算が行われ、行間の幅が決まります。 このサンプルでは2行分の行間を指定しており、テキスト行で1行使っているので、テキストラインの上下に0.5行分の間隔が空けられています。

line-heightプロパティでは、要素のフォントサイズを基準に計算が行われる単位なし数値を使用することが推奨されています。

div{line-height: 2;}

目次に戻る

数値: 単位あり数値

行間の幅を指定する数値に単位を指定することもできます。 ここでは絶対値とパーセンテージ値を同時に紹介しておきます。

単位を指定しない場合、その要素のフォントサイズに、この指定数値を掛けたもので計算が行われ、行間の幅が決まります。 しかし、単位を指定した場合は継承のフォントサイズとの相性が悪く、適切な行間をコントロールすることに不向きともいえます。 このため、前述していますが、line-heightプロパティでは、要素のフォントサイズを基準に計算が行われる単位なし数値を使用することが推奨されます。

div{line-height: 2em;}
div{line-height: 20px;}
div{line-height: 120%;}

目次に戻る

グローバル値

line-heightプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のnormalに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承するのが基本なので、inheritと同じ働きをします。

div{line-height: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承する

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

line-height: normal;

line-height: 3;

line-height: 3em;

line-height: 30px;

line-height: 130%;

目次に戻る