ホームページ作成/テキストの配置・装飾 (HTML,CSS)

行間(行の高さ)を調節するなら単位はナシで

長文を読みやすくするには行間を広めに設定する方が望ましいでしょう。その行間(行の高さ)の指定を、単位付きの数値で記述していませんか? 単位を付けて指定すると、上下の行と重なってしまうことがあります。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

行間を単位付きで指定していませんか?

ブラウザが文章を表示する際の標準の行間は、長文を読むには少々狭いものです。 長文を表示させるなら、読みやすい行間サイズを指定しておくのが望ましいでしょう。
※標準の行間はブラウザによって異なりますが、だいたい0.2文字分程度です。

行間は、スタイルシートで自由に調節できます。 「行の高さ」を指定する line-heightプロパティを使います。 以下のように記述すると、行の高さが「文字サイズの1.4倍」になるため、0.4文字分の行間が空くことになります。

p {
   line-height: 1.4;
}

ここでは、「1.4」という数値に単位を付けていません。
行間を調節する際には、この「単位を付けない」という点が重要です。

以下のように、単位を付ける指定も文法的に可能ですが、こうすると少々問題が起こります。

p {
   line-height: 1.4em;
}

上記の記述は、行の高さを「1.4文字分」にする指定なので、先ほどの「1.4」とだけ記述した場合と結果は同じです。 しかし、ある特定の場合には「1.4em」のように単位を付けて記述した場合だけ、困った表示になります。

単位を指定した場合、しなかった場合

下図は、line-heightプロパティの値として「1.4em」を指定した場合(左)と、「1.4」を指定した場合(右)のキャプチャ画像です。

「line-height:1.4em;」のサンプル 「line-height:1.4;」のサンプル
▲line-heightプロパティの値:(左)「1.4em」、(右)「1.4」

line-heightプロパティの値として「1.4em」を指定しても「1.4」を指定しても、どちらも「行の高さが1.4文字分になる」という点では同じです。 (※どちらの画像も、上部3行はまったく同じ行間で表示されています。)

しかし、上図4行目のように、行内にサイズの異なる文字が現れた際の表示は異なります。 単位を指定した場合(左図)は、大きな文字が上下の行に重なってしまいます。 単位を指定しない場合(右図)は、文字サイズに応じて行間(行の高さ)が調節され、文字が重なることはありません。 (大きな文字に対しても、その文字に対する1.4文字分の高さが確保されています。)

下図は、大きな文字が連続して続く極端な例です。

「line-height:1.4em;」のサンプル 「line-height:1.4;」のサンプル
▲line-heightプロパティの値:(左)「1.4em」、(右)「1.4」

「1.4em」のように単位を指定した方(左図)は、文字が重なって読めなくなっています。 しかし、「1.4」のように単位を指定していない方(右図)は、問題なく読めています。

どうしてこうなるのでしょうか?

行間が調節されない理由は次のページで >>

  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます