ホームページ作成/文字や画像の動的変更 (HTML,CSS,JavaScript)

スタイルシートで文章の行間を調節する方法

CSSを使えば文章の行間サイズ(行の高さ)を簡単に調節できます。行間を詰めることも広げることもできます。広めの行間を指定すれば長文が読みやすくなるでしょう。行間を狭めれば占有空間量が減らせます。CSSのline-heightプロパティを使ってウェブ上に掲載した文章の行間を自由自在に調整する方法を解説。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

スタイルシートを使えば、文章の行間を詰めたり広げたりできる

行と行の空間量を調節したい

行と行の空間量を調節したい

長い文章は、行間が狭く詰まっていると読みにくく感じられてしまいます。しかし、1行ごとに空行を挟むほど行間を広げてしまっても、やはり読みにくくなるでしょう。文章量や1行の幅などを考慮した適切な行間を設定することで、読みやすい長文になります。

多くのブラウザでは、標準の行間はあまり広いとはいえません。短い文章を掲載する分には問題ありませんが、長い文章を掲載する際には標準よりも広めの行間で表示する方が望ましいでしょう。

また、小さな文字サイズで補足文章などを掲載する場合や、1行の横幅が狭い空間に多数の行を使って表示する場合などでは、行間が広いと読みにくくなることもあります。そのような場合には、行間を狭く詰めることでうまく見せられるでしょう。

今回は、スタイルシートを使って文章の行間サイズを指定する方法をご紹介いたします。文章量に合わせた適切な行間を設定して、文章を読みやすく掲載してみましょう。

スタイルシートで行間を調節する

HTMLだけでは行間を詰めたり広げたり細かく調節することはできませんが、スタイルシートを使えば下図のように行間を狭くしたり広くしたりできます。具体的な数値で行間の広さを指定できますから、望み通りの行間サイズに調節できます。

行間サイズを詰めたり広げたりしてみた表示例

行間サイズを詰めたり広げたりしてみた表示例


上図のサンプルを実際にお使いのブラウザで表示してみたい場合は、行間サイズの調整例サンプルページをご覧下さい。HTMLソース内にCSSも記述していますので参考にして下さい。この3つの例では、左側は行間を「0」に、中央は行間を「0.45文字分」に、右側は行間を「0.7文字分」に設定しています。 左端は全行がぴったりくっついているのに対して、右端はずいぶんとゆったり表示されていることが分かります。

CSSのline-heightプロパティで、行の高さを指定できる

1文字の高さに対する「行の高さ」を指定できる

1文字の高さに対する「行の高さ」を指定できる

CSSでは、line-heightプロパティを使うことで「行の高さ」を指定できます。高さは、pxやptなどの単位を使った数値で指定することもできますが、1文字の高さを基準にして「何文字分の高さにするか」という倍率を指定することもできます。

先程の3つの表示例では、行の高さを1.0倍・1.45倍・1.7倍に設定していました。1.0倍なら、行の高さは「1文字と同じ」になるため「行間は0」になります。1.45倍なら、行の高さは「1文字の高さの1.45倍」になるため「行間は0.45文字分」になります。

文字の高さを基準にして、1行の高さを指定できる

文字の高さを基準にして、1行の高さを指定できる

スタイルシートで行間(行の高さ)を調節するには

  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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