line-height/行の高さ

説明

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

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

構文

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

line-height: 高さ;

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

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

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

利用例

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

p {
line-height: 200%;
}

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

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

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

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

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

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

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

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

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

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

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

　以下の例はline-heightはどれもnormal指定ですが、フォントサイズを通常、150%、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%の高さの真ん中に配置されます。

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

関連ページ

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

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

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

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

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

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