スポンサードリンク

ブログやホームページをもっと読みやすくしたい。CSSのline-heightの設定。

ブログやホームページをもっと読みやすくしたい。CSSのline-heightの設定。

「行間」

読みやすさを気にしない。これって結構な損です。
メディア運営でもっとも重要な事は、「伝わる」事。
この「伝わる」ことの最初の段階は、まず読みやすい事です。

文章を読みやすくするCSS設定のline-heightを説明します。

例えばこんな文章があったとします。

大通りがあって、人がたくさん行き来している。
他愛もない会話をしたり、好きな事に没頭したり。
笑い声があったり、怒りで声を荒げたり。
すごい大きな通り、たくさん人がいます。
千差万別の人。こだわりがあったり、家族がいたり、好きなことが見つけられなかったり。
その大きな流れに、入り口を作りました。

line-heightに設定できる値は、下記のものがあります。

それでは、設定の状況を一つ一つ見ていきましょう。

1. normalを設定した場合

大通りがあって、人がたくさん行き来している。
他愛もない会話をしたり、好きな事に没頭したり。
笑い声があったり、怒りで声を荒げたり。
すごい大きな通り、たくさん人がいます。
千差万別の人。こだわりがあったり、家族がいたり、好きなことが見つけられなかったり。
その大きな流れに、入り口を作りました。

これがデフォルトの値です。文字数が多くなると少し目で追うのが難しくなるかもしれません。

2. 15pxを設定した場合

大通りがあって、人がたくさん行き来している。
他愛もない会話をしたり、好きな事に没頭したり。
笑い声があったり、怒りで声を荒げたり。
すごい大きな通り、たくさん人がいます。
千差万別の人。こだわりがあったり、家族がいたり、好きなことが見つけられなかったり。
その大きな流れに、入り口を作りました。

大分詰まりました。すごく息苦しいイメージ。読みにくいかもしれません。どうしても詰めないといけない部分には適用するが良いかもしれません。

3. 1.5を設定した場合

大通りがあって、人がたくさん行き来している。
他愛もない会話をしたり、好きな事に没頭したり。
笑い声があったり、怒りで声を荒げたり。
すごい大きな通り、たくさん人がいます。
千差万別の人。こだわりがあったり、家族がいたり、好きなことが見つけられなかったり。
その大きな流れに、入り口を作りました。

文字の立て幅を1とし、下のスペースに0.5を加えた状態。徐々に読みやすくなってきました。

4. 200%を設定した場合

大通りがあって、人がたくさん行き来している。
他愛もない会話をしたり、好きな事に没頭したり。
笑い声があったり、怒りで声を荒げたり。
すごい大きな通り、たくさん人がいます。
千差万別の人。こだわりがあったり、家族がいたり、好きなことが見つけられなかったり。
その大きな流れに、入り口を作りました。

文字の立て幅を100%とし、下にさらにそれと同じ立て幅100%を追加した状態になります。これなら、ゆったり読めそうです。

5. 0.5emを設定した場合

大通りがあって、人がたくさん行き来している。
他愛もない会話をしたり、好きな事に没頭したり。
笑い声があったり、怒りで声を荒げたり。
すごい大きな通り、たくさん人がいます。
千差万別の人。こだわりがあったり、家族がいたり、好きなことが見つけられなかったり。
その大きな流れに、入り口を作りました。

重なってしまいました。1以下の数値ですので、文字の立て幅の半分を行間として取っています。これは非常に読みにくいですね。

お使いのブログやホームページでは、どうですか?
たくさんの文字を詰め込む情熱的なホームページほど、きちんとした行間を取った方が読み手に伝わるメディアになります。

また、パソコンのブラウザやスマートフォンによって、表示の状態が変わります。
各端末毎に微調整が必要になります。小さい画面と大きな画面で読みやすさが変わるのは当たり前ですよね。

読み手は、「読みにくい」なんて言ってくれる人は稀です。
言ってくれる方がいたらとてもありがたいです。
もしご自分で気づくのであれば、こちらの設定を試してみても良いかもしれません。

Pocket
LinkedIn にシェア


スポンサードリンク