行間と文字間隔の設定

【line-height】行の高さ設定

line-heightプロパティは行間(行の高さ)を設定するプロパティです。

値には下記の設定が可能です。

下記のようなHTMLでline-heightプロパティを指定すると、行間がどのように変化するか試してみました。

<p>
    ここは段落の1行目です。<br>
    ここは段落の2行目です。
</p>

このようにline-heightプロパティを指定すると、1行目と2行目の間隔を調整することができます。

【text-indent】インデントの設定

text-indentプロパティは、ブロックレベル要素の1行目のインデントを設定するプロパティです。

値には下記の設定が可能です。

下記のHTMLで段落っぽくなるように、text-indentプロパティを使って字下げしてみます。

<p>
    ここは段落の1行目です。<br>
    ここは段落の2行目です。
</p>

このようにtext-indentに1emを指定すると1文字分の字下げになるので段落の字下げにちょうどいいですね。

【letter-spacing】文字の間隔の設定

letter-spacingプロパティは、文字間隔を設定するプロパティです。

値には下記の設定が可能です。

実際にletter-spacingプロパティを使って文字間隔を指定すると、下記のように間隔を広げることができます。

【word-spacing】単語の間隔の設定

word-spacingプロパティは、単語同士の間隔を設定するプロパティです。

値には下記の設定が可能です。

実際にword-spacingプロパティを使って単語間隔を指定すると、下記のように間隔を広げることができます。
日本語でも半角スペースを入れるとword-spacingの適用対象になるようです。

行間と文字間隔のまとめ

今回は行間や文字の間隔についてまとめました。
WEBサイトを閲覧する人が文字を読みやすいように、line-height, text-indent, letter-spacing, word-spacingを調整していくことが必要です。

みいと

TwitterContact

興味を持ったものをいろいろと勉強しています。