line-height/行の高さ

line-heightプロパティを使うと行の高さを変更出来ます。

説明

 line-heightプロパティを使うと行の高さを設定し、結果として行間を調整する事が出来ます。

行の高さと行間の違い

 行の高さを大きくすると行間も大きくなり、行の高さを小さくすると行間も小さくなります。

構文

 line-heightプロパティの構文は以下の通りです。

line-height: 高さ;

 高さはフォントサイズとの相対指定で以下が設定出来ます。

【行の高さの相対指定】
指定 説明
% 現在のフォントサイズの高さに対する割合
em 現在のフォントサイズの高さの何倍か
normal 標準で自動的に高さが決まります

 これは今の文字の大きさに対する指定のため、今の文字が大きいと行の高さも大きくなります。

 これ以外にも絶対値として10px等、ピクセル指定も可能ですが、フォントサイズに比例して大きくなったり、小さくなったりしません。

利用例

 line-heightの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

p {
line-height: 200%;
}

<p>line-heightを200%に設定した時の表示例です。1行目と2行目それぞれの高さが200%になっており、結果として行間が通常より広く取られます。</p>

 上記を表示すると以下になります。

line-heightを200%に設定した時の表示例です。1行目と2行目それぞれの高さが200%になっており、結果として行間が通常より広く取られます。

 次は3emを指定した場合の表示例です。

line-heightを3emに設定した時の表示例です。1行目と2行目それぞれの高さが300%を指定したのと同じで、結果として行間がかなり広く取られます。

 次はnormalを指定した場合の表示例です。

line-heightをnormalに設定した時の表示例です。若干の高さが取られるブラウザ、100%と同じで行間がなくなるブラウザがあります。

 因みに100%を指定すると、行間がなくなります。ブラウザによってはこれがデフォルトです。

line-heightを100%に設定した時の表示例です。フォントサイズの高さと行の高さが同じになるため行間がなくなります。長い文章では顕著に分かりますが、非常に読み辛くなります。少なくともnormal以上、出来れば160%等の指定がお奨めです。

 次は6pxで指定した時です。

line-heightを6pxで設定した時の表示例です。フォントサイズより小さいと文字が重なる事があります。フォントサイズは参照するデバイスによって違うため、使わない方が無難です。

 上記は多くの環境で文字が重なって表示されていると思います。

 フォントサイズはパソコン、スマートフォン、ブラウザの種類等、参照する環境によって異なる可能性があるため、px指定は避けた方が無難です。

フォントサイズに寄る影響

 line-heightはpxを除いて現在のフォントサイズに対する行の高さになるため、入れ子にしても高さが高くなったりしません。

 代わりにpx指定以外ではフォントサイズが大きくなったり、小さくなると高さも大きくなったり、小さくなったりして行間も変わってきます。

 以下の例はline-heightはどれもnormal指定ですが、フォントサイズを通常、150%、200%で指定した時の表示例です。

line-heightをnormalに設定した時の表示例です。フォントサイズは指定していません。行間はフォントサイズと同じか少しだけ高くなります。

フォントサイズを150%に指定しています。line-heightは上と同じでnormalです。フォントサイズが大きいため、行間も広くなります。
フォントサイズを200%に指定しています。フォントサイズにより行間が変わるのが分かると思います。

留意点

 1行に複数のline-heightを指定した場合、一番大きな値が有効になります。

 例えば、以下のように100%と200%が混在していたとします。

.t1 {
line-height: 100%;
}
.t2 {
line-height: 200%;
}

<span class="t1">line-heightを100%。</span>
<span class="t2">200%にしています。</span>
<span class="t2">再度100%。</span>
<span class="t2">又200%です。</span>

 上記を幅240pxの幅の中で表示すると以下になります。

line-heightを100%。200%にしています。再度100%。又200%です。

 このようにline-heightを100%に指定した範囲は200%の高さの真ん中に配置されます。

 これは高さに関係するプロパティ、例えばvertical-alignで位置を指定する時等に影響します。

関連ページ

・ホームページ作成「フォントの変更

 フォントの種類やサイズ、色、太字等フォント全般の変更方法を説明しています。

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)