CSS

行間と文字間隔の設定

みいと

【line-height】行の高さ設定

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

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

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

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

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

line-height

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

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

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

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

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

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

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

text-indent

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

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

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

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

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

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

letter-spacing

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

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

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

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

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

word-spacing

行間と文字間隔のまとめ

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

まとめ

  • line-heightプロパティで行間の設定ができる
  • text-indentプロパティで字下げの設定ができる
  • letter-spacingプロパティで文字間隔の設定ができる
  • word-spacingプロパティで単語同士の間隔を設定できる

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました