ホームページを見ていて、
・文字が詰まりすぎて読みにくい
・行間が広すぎて、間のびして見える
・どこを直せばよいかわからない
このように思われることもありますよね。
そこで、この記事では、
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で行間を整えるだけで、文章の読みやすさは大きく変わりますよ。
✔ line-heightで行間を調整
✔ body指定が一番かんたん
✔ 数値指定が基本
文字サイズと行間はセットで考えると、
とても読みやすいホームページになります。
特に、行間については、詰めすぎると文字がとても読みづらくなるので、ぜひ参考にしてくださいね！
