CSSで行間を読みやすくする方法｜詰まりすぎ・広すぎを直すコツ

ホームページを見ていて、

このように思われることもありますよね。

そこで、この記事では、
CSSで行間を整える基本と詰まりすぎ・広すぎを直すコツを分かりやすく解説します。

行間を少し調整するだけで、読みやすさはとても良くなりますよ。

文章を読みやすいホームページを作ることはとても大切なので、ぜひ最後までお読みくださいね！

CSSで行間がおかしくなるよくある原因

まずは、CSSで行間がおかしくなるよくある原因から見てみましょう！

line-heightを指定していない

行間を指定していないと、
ブラウザの初期設定のまま表示されます。

数値の意味を知らない

line-heightには、いくつか指定方法があり、
それを知らないと極端な行間になります。

文字サイズとのバランスが合っていない

文字サイズだけ変えて、
行間を変えていないと読みにくくなります。

CSSで行間を変更する基本の書き方

次に、CSSで行間を変更する基本の書き方をお伝えします。

まず行間は line-height で指定します。

p {
  line-height: 1.6;
}

これで、p タグの行間が広がります。

line-heightとは？

文字と文字の 縦の間隔 を指定するCSSです。
数値を大きくすると、行間も広くなります。

おすすめの行間はどれくらい？

それでは、おすすめの行間についてお伝えします。

初心者の方は、まずこのくらいを目安にしてください。

• 一般的な文章：1.5〜1.7くらい
• 長文の記事：1.6くらい

詰まりすぎず、広すぎず、ちょうどよい読みやすさになります。

bodyでまとめて行間を指定する方法

bodyでまとめて行間を指定する方法をご紹介します。

行間は、bodyでまとめて指定 するのが一番簡単です。

body {
  line-height: 1.6;
}

これだけで、ページ全体の行間がそろいますよ。

なぜbody指定がよいのか

• あちこち指定しなくてよい
• 行間がバラバラにならない
• 管理が楽

というメリットがあります。

特に、管理が楽なのは良いですよね！

スマホでも読みやすくする行間設定

スマホでも読みやすくする行間設定をお伝えします。

スマホは画面が小さいので、
行間は 少し広め の方が読みやすいです。

@media screen and (max-width: 768px) {
  body {
    line-height: 1.7;
  }
}

これで、スマホのときだけ行間が広がります。

px指定と数値指定の違い（初心者向け）

px指定と数値指定の違いについて解説します。

数値指定（おすすめ）

line-height: 1.6;

文字サイズに合わせて、自動で調整されます。
初心者の方には、この指定がおすすめです。

px指定（あまり使わない）

line-height: 24px;

文字サイズを変えると、
行間のバランスが崩れやすくなります。

👉 そのため、基本は数値指定でOK です！

よくある失敗と直し方

よくある失敗と直し方をお伝えします。

行間が狭すぎる

👉 line-height: 1.5 以上にする

行間が広すぎる

👉 1.8 以上になっていないか確認する

一部だけ行間が違う

👉 body指定と個別指定が混ざっていないか確認する

初心者向けのおすすめ行間設定（コピペ用）

初心者向けのおすすめな行間設定について、お伝えします。

全体用（基本）

body {
  line-height: 1.6;
}

見出し用（少し詰めたい場合）

h1, h2, h3 {
  line-height: 1.4;
}

スマホ用

@media screen and (max-width: 768px) {
  body {
    line-height: 1.7;
  }
}

まとめ

「CSSで行間を読みやすくする方法｜詰まりすぎ・広すぎを直すコツ」はいかがでしたでしょうか？

CSSで行間を整えるだけで、文章の読みやすさは大きく変わりますよ。

文字サイズと行間はセットで考えると、
とても読みやすいホームページになります。

特に、行間については、詰めすぎると文字がとても読みづらくなるので、ぜひ参考にしてくださいね！