「行間」
読みやすさを気にしない。これって結構な損です。
メディア運営でもっとも重要な事は、「伝わる」事。
この「伝わる」ことの最初の段階は、まず読みやすい事です。
文章を読みやすくするCSS設定のline-heightを説明します。
例えばこんな文章があったとします。
他愛もない会話をしたり、好きな事に没頭したり。
笑い声があったり、怒りで声を荒げたり。
すごい大きな通り、たくさん人がいます。
千差万別の人。こだわりがあったり、家族がいたり、好きなことが見つけられなかったり。
その大きな流れに、入り口を作りました。
line-heightに設定できる値は、下記のものがあります。
[css]
.クラス名1 {line-height: normal;}
.クラス名2 {line-height: 15px;}
.クラス名3 {line-height: 1.5;}
.クラス名4 {line-height: 200%;}
.クラス名5 {line-height: 0.5em;}
[/css]
それでは、設定の状況を一つ一つ見ていきましょう。
1. normalを設定した場合
[css]
.クラス名
{
line-height:normal;
}
[/css]
他愛もない会話をしたり、好きな事に没頭したり。
笑い声があったり、怒りで声を荒げたり。
すごい大きな通り、たくさん人がいます。
千差万別の人。こだわりがあったり、家族がいたり、好きなことが見つけられなかったり。
その大きな流れに、入り口を作りました。
これがデフォルトの値です。文字数が多くなると少し目で追うのが難しくなるかもしれません。
2. 15pxを設定した場合
[css]
.クラス名
{
line-height:15px;
}
[/css]
他愛もない会話をしたり、好きな事に没頭したり。
笑い声があったり、怒りで声を荒げたり。
すごい大きな通り、たくさん人がいます。
千差万別の人。こだわりがあったり、家族がいたり、好きなことが見つけられなかったり。
その大きな流れに、入り口を作りました。
大分詰まりました。すごく息苦しいイメージ。読みにくいかもしれません。どうしても詰めないといけない部分には適用するが良いかもしれません。
3. 1.5を設定した場合
[css]
.クラス名
{
line-height:1.5;
}
[/css]
他愛もない会話をしたり、好きな事に没頭したり。
笑い声があったり、怒りで声を荒げたり。
すごい大きな通り、たくさん人がいます。
千差万別の人。こだわりがあったり、家族がいたり、好きなことが見つけられなかったり。
その大きな流れに、入り口を作りました。
文字の立て幅を1とし、下のスペースに0.5を加えた状態。徐々に読みやすくなってきました。
4. 200%を設定した場合
[css]
.クラス名
{
line-height:200%;
}
[/css]
他愛もない会話をしたり、好きな事に没頭したり。
笑い声があったり、怒りで声を荒げたり。
すごい大きな通り、たくさん人がいます。
千差万別の人。こだわりがあったり、家族がいたり、好きなことが見つけられなかったり。
その大きな流れに、入り口を作りました。
文字の立て幅を100%とし、下にさらにそれと同じ立て幅100%を追加した状態になります。これなら、ゆったり読めそうです。
5. 0.5emを設定した場合
[css]
.クラス名
{
line-height:0.5em;
}
[/css]
他愛もない会話をしたり、好きな事に没頭したり。
笑い声があったり、怒りで声を荒げたり。
すごい大きな通り、たくさん人がいます。
千差万別の人。こだわりがあったり、家族がいたり、好きなことが見つけられなかったり。
その大きな流れに、入り口を作りました。
重なってしまいました。１以下の数値ですので、文字の立て幅の半分を行間として取っています。これは非常に読みにくいですね。
たくさんの文字を詰め込む情熱的なホームページほど、きちんとした行間を取った方が読み手に伝わるメディアになります。
また、パソコンのブラウザやスマートフォンによって、表示の状態が変わります。
各端末毎に微調整が必要になります。小さい画面と大きな画面で読みやすさが変わるのは当たり前ですよね。
読み手は、「読みにくい」なんて言ってくれる人は稀です。
言ってくれる方がいたらとてもありがたいです。
もしご自分で気づくのであれば、こちらの設定を試してみても良いかもしれません。
Amazonで購入したおすすめ商品
お疲れ様です。パソコン仕事は体を痛めます。長時間のパソコン仕事で、肩や目が痛い方はこちらがおすすめです。
快適な環境で仕事をしたいですね。
肩が上がらない。姿勢が悪くなる。
腕を広げてタイピングできるので、肩への負担が軽減されます。
目の奥が痛い！時に。
画面の色を損なうことなく、パソコンを長時間見るときに役立ちます。
見た目はエッジが効いている？ので、集中モードの時に。
ネットが遅くて困る！接続数足りてる？
パソコン・スマホ・タブレットを８０台まで接続できてこの値段。
