CSSで行間を調整するには？概要から表示の違いをサンプルで解説

言語・開発

プログラミング言語

CSS

アンドエンジニア編集部

2024.12.23

この記事でわかること

CSSで行間を調整するには、行の高さを設定するline-heightプロパティを用います

デフォルト設定のnormalのほか、単位なし、emで指定、%で指定、pxで指定、の指定方法があります

設定するには推奨される単位なしを用いて、コンテンツに合わせて値を決めるのがおすすめです

Facebook

LINE

Hatena

CSSで行間を調整する

CSSで行間を調整するには、行の高さを設定するCSSプロパティを用います。このプロパティにはいくつかの指定方法があり、指定によってフォントサイズに合わせて行間の設定が可能です。ここでは、行間設定の考え方を学び、設定の種類による表示の違いを学んでいきます。

CSSとは？概要や基本書式、具体的な記述方法について解説！

CSSでできること一覧！HTMLやJavaScriptとの違い、メリットも解説

CSSで行の高さを設定するには

CSSで行の高さを設定するには、line-heightプロパティを用います。このプロパティは、フォントサイズを指定するfont-sizeとも密接に関係しており、フォントサイズとの比率を設定したり、ピクセル値を直接指定したりして行間を設定します。

具体的には、次のように表示テキストをfont-sizeで指定し（①）、文字間をline-heightで指定します（②）。

　【図】：表示テキストと行間・文字間の関係

これによって、行間をあけるだけではなく狭くすることも可能なため、表示コンテンツに応じて微調整することもできます。CSSプロパティのmarginやpaddingを使って行間の上だけ、あるいは下だけの調整も可能です。

【参考】：MDN Docs: line-height 【参考】：MDN Docs: font-size

line-heightプロパティの指定方法

行間設定のline-heightプロパティには、いくつかの指定方法があります。それぞれの概要は、以下の通りです。

・normalを指定する（デフォルト値） ブラウザなどのユーザーエージェントに依存します。Edge・ChromeやFirefoxでは、font-familyやfont-sizeのおよそ1.2に設定されます。他のブラウザでもおよそ1.2〜1.5の範囲で設定されています。ブラウザのデフォルト値であり、バランスが取れた表示が確認されています。

・単位なし（推奨） font-sizeで指定するフォントサイズに、この値が掛け合わされます。もっとも表示上の問題が少ない指定方法であり、変更する際に推奨される指定方法です。デフォルト値のnormalの場合も、この単位なしに倍率が設定されています。指定方法は、フォントサイズと同じ行間を設定する場合は、 ”line-height: 2.0;” などと指定します。

・length値を指定する（emで指定） emはlengthを指定する単位です。行ボックスの高さに比例して設定されます。ブロック表示などでは、比率の調整が難しいので推奨されていません。

・パーセントで指定する（%で指定） %を付けると比率のパーセンテージとして処理されます。ブロック表示などでは、比率の調整が難しいので推奨されていません。

・ピクセル値で指定する（pxで指定） pxを付けるとピクセル値が高さに反映されます。指定したフォントサイズを確認しながら微調整する必要があります。

CSSのemとは？フォントサイズ指定方法の違いを比較解説！

CSSで行間を設定してみる

ここでは、実際にCSSを使用してブラウザの表示を確認していきます。最初にHTMLの全体構成とCSSの概要を学び、コンテンツを確認していきます。その後、実際の表示の違いについてブラウザの表示例とともに解説します。

HTMLの全体構成とCSS

ここでは、HTMLの全体構成とCSSについて学んでいきます。HTMLの全体構成は次の通りです。HTMLの<head>部分にCSSのスタイルシートを<style>～</style>で記述します。

<!DOCTYPE html>
<html>
<head>
<style>
  ここにCSSを記述する
</style>
</head>
<body>
  ここに表示するコンテンツを記述する
</body>
</html>

今回使用したサンプルコードでは、次のようにスタイルシートを記述しています。

<style>
.case1 {
    line-height: 1.5;
    font-size: medium;
    color: green;
}
.case2 {
    line-height: 1.5em;
    font-size: medium;
    color: gray;
}
.case3 {
    line-height: 120%;
    font-size: medium;
    color: orange;
}
.case4 {
    line-height: 30px;
    font-size: medium;
    color: blue;
}
.fold {
  width: 12em;
  display: inline-block;
}
</style>

case1は、line-heightを単位なしで指定しています。同様にcase2はem値で、case3は%で、case4はpx値で指定しています。表示領域は、inline-blockで表示しています。

HTMLのコンテンツを記述する

HTMLのコンテンツは、<body>〜</body> に実際の表示コンテンツを記述します。ここでは、表示領域を<div>で区切り、line-heightの指定方法を「単位なし」「emで指定」「%で指定」「pxで指定」の4通りで違いを確認します。

ここでは、次のようにcase1〜case4に記述して違いを確認していきます。

<body>
  <div class="case1 fold">
    <h1>正しく表示できるか、仕上がりを確認しましょう</h1>
    <p>
    フォントサイズをいくつか設定します。 <br>
    line-heightを単位なしで設定しています。<br
    ここでは、small / medium / largeの中で mediumを設定します。
    </p>
  </div>
  <div class="case2 fold">
    <h1>正しく表示できるか、仕上がりを確認しましょう</h1>
    フォントサイズをいくつか設定します。<br>
    line-heightをemで設定しています。<br>
    ここでは、small / medium / largeの中で mediumを設定します。
  </div>
    <div class="case3 fold">
    <h1>正しく表示できるか、仕上がりを確認しましょう</h1>
    フォントサイズをいくつか設定します。<br>
    line-heightを%で設定しています。<br>
    ここでは、small / medium / largeの中で mediumを設定します。
  </div>
    <div class="case4 fold">
    <h1>正しく表示できるか、仕上がりを確認しましょう</h1>
    フォントサイズをいくつか設定します。<br>
    line-heightをpxで設定しています。<br>
    ここでは、small / medium / largeの中で mediumを設定します。
  </div>
</body>

使用するフォントサイズとCSS行間設定内容は表示テキストに記載し、ブラウザの表示から確認できるようにしておきました。