【html/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.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。

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

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

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

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

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

単位をつけない場合、大きい文字サイズに合わせて行間にゆとりができますが、単位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で調整しましょう。

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

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

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

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

タグ別オススメの値

line-heightは子孫要素へ継承します。

そのためbodyに指定すれば、すべてのタグで同じ行間にすることもできるのですが、line-heightはhtmlタグによって値を変えることをおすすめします。

行間が広いことで読みやすくなることもあれば、ある程度一塊感を出した方がいいことがあるためです。

また、デザインにおいて上下にpaddingではない隙間ができるため高さの調整をしたいときに邪魔になることもあります。

【小さめの値(1.25)推奨】h1～h6、li、td

h1やliは2～3行で一塊となる要素です。行間を狭くすることで一塊感がでて一瞬で把握できます。

その代わり前後の要素とは別の塊であることを表すため、marginかpaddingで離してあげみましょう。

tdはマスが小さくなりがちです。行間より左右のpaddingが小さいとバランスが悪くなります。行間を狭くして一塊感を出すとともに、表が縦伸びすることを防ぐことができます。

ただし、td内が文章になる場合は1.5くらいの値でもいいかもしれません。

【大きめの値(1.75)推奨】p

pタグは文章を表示させます。文章はある程度行間があるほうが読みやすくなります。

それだけではなく、2～4行ごとにさらに行をあけるともっと読みやすくなります。

【まとめ】行間を詰めたり広げる方法

• line-heightで行間を指定する
• 単位は指定しない
• 記事のpタグは「line-height:1.75」がオススメ
  h1～h6、li、tdは「line-height:1.25」がオススメ
• marginやpaddingでさらに細かい調整

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