ホーム(記事一覧)へ

CSSで行間を開けたり詰める方法

記事は読んでもらってナンボです。読みやすくするには空間、行間が非常に大切です。

しかし、デフォルトでは行間が狭かったり広かったりで、どうも読みづらいことがあります。

CSSで行間を開けたり詰める方法を解説します。

行間を開けたり詰めるCSS
line-height

行間を開けたり詰めるには「line-height」を指定します。

下記は「line-height: 2」を指定した例です。

テキストテキスト
テキストテキスト
テキストテキスト

<style>
.example{
    line-height: 2;
    border: 1px solid #999;
}
</style>
<p class="example">テキストテキスト<br>テキストテキスト<br>テキストテキスト</p>

line-heightで指定した数値が大きいほど行間が開き、小さいほど詰まります。

指定した数値の文字数分 高さが確保され、その上下中央に文字が置かれます。

よって1行の上下の隙間は次のような式になります。

{(指定した数値-1)÷2}×文字サイズ

ややこしいですが、指定した数値が1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。

2行以上になったとき、上と下分の隙間となるため、2なら0.5文字+0.5文字で1文字分開くことになります。

単位をつけるかつけないか

結論から言うと単位はつけないことをおススメします。

line-heightは指定した値の文字数分高さを確保するのでemをつけても基本的には同じ結果になります。

しかし、文中で文字サイズを変えたとき違いがでます。

単位をつけない
line-height: 2

テキストテキスト
テキスト大きい文字テキスト
テキストテキスト

単位emをつける
line-height: 2em

テキストテキスト
テキスト大きい文字テキスト
テキストテキスト

単位をつけない場合、大きい文字サイズに合わせて行間にゆとりができますが、単位emをつけた場合ゆとりがなくなります。

pxで指定すると固定

pxで指定すると文字サイズに関わらず行間を一定にできます。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキスト

文字サイズが変わると行間が開きすぎたり、文字が重なることもあります。

ユーザーによっては文字サイズを変えていることもあるため、pxでの指定はオススメしません。

適切な行間の値

下記は1.25~2の4段階の行間の例です。

line-height: 1.25の文章はこんなかんじです。h2やliなど、多くても3行程度になる要素をまとめる場合に適切でしょう。

line-height: 1.5の文章はこんなかんじです。tdのように、幅が狭いためよく改行されるが、ある程度まとめたいという要素におススメです。

line-height: 1.75の文章はこんなかんじです。長文でも読みやすい行間であり、メインとなるブログ部分や記事、読ませる文章部分におススメです。

line-height: 2の文章はこんなかんじです。1.75よりさらに行間があきます。文字サイズを考慮しつつ、よりゆとりを持たせたい場合におススメです。

サイトのデザインやデザイナーの考えにもよりますが、私は記事部分の行間は1.75を指定しています。

marginやpaddingでの行間調整

line-heightで行間を指定すると1行の上と最後の行の下は0.5文字分だけ開き、それ以外の行では1文字分だけ開くという状況になります。

tdなど枠線があるときはとくに顕著になります。

これを回避するためpaddingで調整しましょう。

padding指定なし

テキストテキスト
テキストテキスト
テキストテキスト

padding:0.5em 0を指定

テキストテキスト
テキストテキスト
テキストテキスト

このように指定すると常に1文字分開いているように見せることができます。

line-heightはhtml要素内の文字の行間を指定できます。html要素同士の隙間を空けるにはmarginやpaddingで調整しましょう。

当サイトではpタグにline-heightもmarginも指定しています。

pタグとpタグの間に隙間ができることで1文がわかりやすくなり、読みやすくしています。

【まとめ】行間を開けたり詰めるCSS

  • line-heightで行間を指定する
  • 単位は指定しない
  • 記事では「line-height:1.75」がオススメ
  • marginやpaddingでさらに細かい調整

以上、CSSで行間を開けたり詰める方法でした。

関連記事