CSS line-heightの使い方・行間・行の高さの調整方法

CSS

【CSS line-heightの使い方】行の高さの指定・行間調整方法

2021年3月19日

今回はline-heightを使って、行の高さの指定・行間を調整する方法を紹介します。

テキストの行間などを調整したい場合にline-heightはよく利用されるので、覚えておくと便利です。

line-heightは行間・行の高さ調整のCSS

line-heightプロパティは行の高さを指定するのに使用されるCSSプロパティです。

line-heightプロパティとは?

本記事の冒頭で「行間を調整したい場合に使用する」と記述しましたが、実際には行の高さを指定する際に使用するプロパティで、行の高さを指定することで間接的に行間を調整することができます。

例えば上の図の例で、フォントサイズ(≒文字の高さ)が20pxだったとすると、「line-height=40px」の場合の行間は20pxに調整することができます。

line-height: 40px;、font-size: 20px;のデモ。

また上の例ではline-heightプロパティの値を「40px」といったようにピクセル値を指定していますが、ピクセル値以外にも利用できる値にはいくつかあります。

line-heightで指定できる値

line-heightで指定できる値は、数字のみ、または数字+単位(px/em/%など)があります。

単位 備考
数値のみ 例: line-height:2.0
数値+単位 例: line-height:40px
normal(初期値) 例: line-height:normal

 

数値のみ

1つ目は「数値のみ」を使った指定方法です。

数値のみの指定方法では、フォントサイズを「1」として、フォントサイズに応じた行高を設定することができます。

フォントサイズが18pxならば、line-height:2.0は行間36pxです。
line-height: 2.0;を使用した例。
 

数値+単位

2つ目は「数値+単位」という値を使った指定方法です。

単位には「px」「em」「%」の3つが利用できます。

単位名 意味
px(ピクセル) 決まったピクセル数の行高を指定することができる。(絶対的な値)
em(エム) フォントサイズに応じて行高を変更することができる。(相対的な値)
%(パーセント) フォントサイズに応じて行高を変更することができる。(相対的な値)

 

px(ピクセル)

px(ピクセル)を指定することで、決まったピクセル数の行高を指定することができます。

 
line-height: 40px;を使用した例。

pxの指定方法ではピクセルといった絶対値を使用して行高を指定している為、フォントサイズに関わらず常に一定の行高が設定されます。
 

em(エム)

em(エム)を指定することで、フォントサイズに応じて行高を変更することができます。

「1.0em = フォントサイズ」になるので「2.0em」とした場合は、ちょうどフォントサイズ2つ分の行高に設定することが可能です。

line-height: 2.0em;を使用した例。
 

%(パーセント)

%(パーセント)もemと同様、フォントサイズに応じて行高を変更することができます。

%の場合は「100% = フォントサイズ」になるので「200%」とした場合は、フォントサイズ2つ分の行高に設定することが可能です。

 
line-height: 200%;を使用した例。
 

normal(初期値)

初期値はnormal」です。

normalは特にline-heightを指定していない状態だと初めからこちらの値になっています。レスポンシブデザインなどでブラウザサイズによって初期値に戻したい場合に利用します。

line-height: normal;を使用した例。
 

「数値のみ」と「emや%」の違い

「数値のみ」も「数値+emや%」も比率で指定する方法ですが、数値のみと違って、「em」や「%」の単位を使った方法は親要素の高さの値が子要素の行高にそのまま引き継がれてしまうといった違いがあります。

以下は親要素のフォントサイズが40px、子要素のフォントサイズが16pxの場合のline-heightの指定方法による違いです。

要素(フォントサイズ) line-height: 2.0; line-height: 2.0em; line-height: 200%;
親要素が20pxの場合 40px 40px 40px
子要素が16pxの場合 32px 40px

※親要素の行高がそのまま引き継がれている

40px

※親要素の行高がそのまま引き継がれている

「数値のみ」の指定方法と「em」や「%」を利用した指定方法の違い。

「数値のみ」の方が、親要素のフォントサイズや子要素のフォントサイズに対してそれぞれ行高を計算してくれるので、数字のみの方がよく使われているのではないかと思います。

line-heightの値には「1.5 ~ 2.0」辺りの数値を指定しておくと文章が読みやすくなるのでおすすめです。

 

(補足)line-heightで垂直方向中央に配置することも可能

line-heightは文字を垂直方向に対して要素を中央に配置したい際にも使用することができます。

以下はヘッダーにline-heightを指定している例ですが、ヘッダー内のテキストがヘッダー垂直方向中央位置に配置されているのが分かります。

line-heightを使って垂直方向中央に要素を配置している例。

 

まとめ・行間の指定にはline-heightプロパティを使用!

まとめです。今回はline-heightを使って、行の高さの指定・行間を調整する方法を紹介しました。

line-heightプロパティとは?

テキストの行間などを調整したい場合にline-heightはよく利用されるので、覚えておくと便利です。

今回は以上になります。最後までご覧頂き、ありがとうございました!

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-CSS