行間を広げるには

今回は、「行間の指定方法」について説明します。
行間を広げることによって、非常に読みやすくなりますので、是非、適切な行間を空けるようにカスタマイズしましょう。


行間（行の高さ）を指定するには、line-height というプロパティを使用します。

＜スタイルシートの記述例＞

.content p { line-height: 150%; }

上記の場合、行間は「line-height: 150%;」と指定されています。この「150%」という記述を変更することで、行間を変更することができます。


行間の指定方法には、「15pt」のように絶対サイズで指定する方法、 「150%」のように相対サイズで指定する方法、「1.5」のように数値のみで指定する方法があります。

■ 絶対サイズで指定

line-height: 15pt;

文字サイズが 10pt のときに、行の高さを 15pt に指定すると、行間は 5pt になります。

（行間　＝　行の高さ　－　文字サイズ）

■ 相対サイズで指定

line-height: 150%;

文字サイズが 10pt のときに、行の高さを 150% （文字サイズ×1.5倍）に指定すると、行間は 5pt になります。

（行間　＝　行の高さ　－　文字サイズ）

■ 数値のみ（単位なし）で指定

line-height: 1.5;

文字サイズが 10pt のときに、行の高さを 1.5 （文字サイズ×1.5倍）に指定すると、行間は 5pt になります。

（行間　＝　行の高さ　－　文字サイズ）


絶対サイズと相対サイズの各単位は、下記のような意味ですので、参考にしてください。

絶対サイズ	意味
in	インチ。1in = 25.4mm
cm	センチメートル
mm	ミリメートル
pt	ポイント。1pt = 1/72in
pc	パイカ。1pc = 12pt
px	ピクセル。表示上の1ドット幅 （※正確にはデバイス依存の相対サイズ）

相対サイズ	意味
em	基準書体の文字の高さ （英字の「M」の高さを基準とした大きさ）
ex	基準書体の文字の高さ （英字の「x」の高さを基準とした大きさ）
%	基準書体のサイズに対する百分率

では、行間のカスタマイズ方法について、ブログ別に説明します。カスタマイズをする場合は、利用しているブログを選択してくださいね。

[MovableType]	→ 行間の変更
[livdoor Blog]	→ 行間の変更（livedoorBlog編）
[FC2 ブログ]	→ 行間の変更（FC2ブログ編）

以上、「行間の指定方法」について説明しました。
是非、参考にして、読みやすい行間にカスタマイズしてください。

[次の講義へ] → スペースで文字間隔を調節してはいけない理由

参考になりましたら、1クリックの応援お願いします。