2019.11.25

行間と文字間隔の設定

みいと

Contents

【line-height】行の高さ設定

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

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

数値	単位のない数値を指定すると、指定した値とフォントサイズをかけた高さが設定されます。
単位つきの数値	単位つきの数値で指定できます。例）2em
パーセンテージ	フォントサイズに対するパーセンテージで指定できます。
normal	ブラウザ側が判断した行間が設定されます。この値が初期値になっています。

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

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

line-height

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

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

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

単位つきの数値	単位つきの数値で指定できます。例）1em
パーセンテージ	幅に対するパーセンテージで指定できます。

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

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

text-indent

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

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

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

単位つきの数値	単位つきの数値で指定できます。例）0.5em
normal	標準の状態にします。この値が初期値になっています。

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

letter-spacing

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

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

単位つきの数値	単位つきの数値で指定できます。例）1em
normal	標準の状態にします。この値が初期値になっています。

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

word-spacing