にせもんのホンモノ

普通の人"にせもん"による雑記ブログ

行間の調整|記事の読みやすさを考えてみる

f:id:nisemon_honmono:20200429172219j:plain

文章の行間は、読みやすさに大きな影響を与えます。

Webサイトやブログを作るときはデフォルトではなく指定しておくべきでしょう。

今回はCSSで簡単に行間・行高を調整する方法を紹介します。

 

 

今回もサルワカさんのサイトを参考にしました。
初心者でも分かりやすい説明ですのでオススメ!

saruwakakun.com

 

デフォルトの行間が気になる

ブログ開設時は気にならないデフォルト設定

はてなブログの場合、選ぶテーマによって異なることもありますが、私はシンプルな『Minimalism』を使用しています。

シンプルゆえにカスタマイズもしやすいですが、"行間が広すぎない?"と次第に気になりはじめ、思い切って見直すことに決めました。

 

hitsuzi.hatenablog.com

 

比較するため同じ文章を入力

これは改行していませんが、行間が広くて少し読みづらくないですか? 

f:id:nisemon_honmono:20190609212823p:image

 

CSSで行間(行高)を指定する方法

CSSではline-heightプロパティで簡単に行間を決めることができます。

CSS欄に{line-height: 値}を入力しましょう。

 

f:id:nisemon_honmono:20190609123415p:plain
【出典:サルワカ】

line-heightではこの図のようにそれぞれの行の高さを指定します。ちなみにline-height自体は行間ではなく、行高を指定するものなのです。

 

おすすめのline-heightの値

読みやすさとデザイン性を考えると、line-heightは1.5〜2.0程度がベストらしいです。

それより小さいと窮屈に見え、それより大きいとスカスカに見えてしまいます。

では、実際にコードを書いてみてチェックしてみましょう!

 

line-height:1.0の場合

f:id:nisemon_honmono:20190609210242p:image

これだと少し狭く苦しい感じませんか?

文字が大きければ良いですが、小さいと読みづらさを感じる人もいるかも。

 

line-height:1.5の場合

f:id:nisemon_honmono:20190609211232p:image

少し行間が広くなりました。

この程度が読みやすく丁度良いでしょうか?

 

line-height:1.7の場合

f:id:nisemon_honmono:20190609211232p:image

もう少し行間を広くします。

1.5~1.7ぐらいが丁度良いと感じる人が多いかも。

 

line-height:2.0の場合

f:id:nisemon_honmono:20190609210201p:image

少し広すぎる気がします。

ただ、ゆったりした雰囲気が好みな方にはいいかもしれません。


先程の比較を参考に1.5〜2.0くらいの間で自分のWebサイトやブログに合う行間を見つけてみましょう!読みやすくなると評価も高くなります。

 

行高をPタグに対して指定する

行間は文章に対して指定したい場合が多いと思います。
段落を表すpタグに対して最低限line-heightを指定しておくべきですね。 

実際にWebサイトやブログで指定するときには、いくつかの値を入れてみて、どれがベストか吟味すると良いでしょう。

 

これでわたしのブログも少しは読みやすくなったのではないでしょうか?

 

2019/06/17作成
2020/04/29更新 

 

 

DESIGN カテゴリーに戻る

 

最後まで読んでいただき、
ありがとうございます!

 

===========================
ブログランキングに参加中です!
励みになりますのでポチッとしてください!
===========================

にほんブログ村 にほんブログ村へ
にほんブログ村


人気ブログランキング