行間の指定

行間の指定にはスタイルシートを使います。

行間の指定にはスタイルシートを使って行います。自分のホームページにとって適切な行間を探してみてください。行間一つでガラっと見え方が違ってきます。

行間の指定方法

行間の指定方法の単位にも、文字サイズの指定と同様に、絶対的に大きさを指定する方法と、相対的に大きさを指定する方法があります。

例えば、

line-height: 150%;

と指定した場合は、行間は元の文字サイズに対して150％です。ちょっと慣れないとわかりずらいですが、 100%で行間はゼロです。つまり、行間を70％とか、100以下に設定すると、文字は重なってしまいます。

ちょっとわかりにくいかもしれないので、例を出しておきます。

行間を100％に指定

まずは、行間を100％に指定した場合です。何も指定しないと100％です。 150％など、行間を広げる事を覚えてしまうと、ちょっと読みずらく感じてしまうかもしれません。まあ、デフォルトの設定なので、問題があるわけではありません。

行間を150％に指定

次に、行間を150％に指定した場合です。当サイトでは、基本的に150％指定なので、その他の文章との違いがわからないと思います。一般的に、行間は140～160％程度が見やすいと言われています。

行間を200％に指定

そして、行間を200％に指定した場合です。当サイトのデザインでは、ちょっと間延びしたイメージになるかと思いますが、デザイン次第では180％や200％が一番見やすかったりします。もちろん、その逆に120％程度が見やすい場合もあります。

行間を50％に指定

最後に、行間を50％に指定した場合です。実は文字を重ねてロゴっぽくすることも出来ますが難しいものですね（笑）。見事に重なってしまいます。コレでは見れたもんじゃないですね。

行間を30％に指定

キレイに重ねればそれっぽいかも？　ＡＢＣ
　キレイに重ねればそれっぽいかも？　ＡＢＣ
　　キレイに重ねればそれっぽいかも？　ＡＢＣ