文字の間隔と行間を指定する

文字の間隔と行間を指定する

Webサイトを作成するとき、文字の大きさはページの読みやすさを左右する重要な要素となりますが、文字の間隔や行間(行の高さ)も読みやすさに影響を与えます。文字の間隔を指定するには「letter-spacing」、行間を指定するには「line-height」をそれぞれCSSで指定します。

文字の間隔(letter-spacing)

文字と文字の間隔を調整するには、CSSのプロパティ「letter-spacing」を使用します。

文字の間隔(letter-spacing)

このプロパティでは、文字の間隔を「px」や「em」などの単位を使って指定します。letter-spacingは後術するline-height(行間の指定)に比べると使用頻度は低いですが、見出しを目立たせたいときなどに使用します。

p {
  letter-spacing: 20px;
}

テキストの行間(line-height)

テキストの行間(高さ)を調整するには、CSSのプロパティ「line-height」を使用します。テキストの行間はページの読みやすさやデザインに影響を与えるので積極的に指定するようにしてください。

テキストの行間(line-height)

このプロパティで値を指定するには4つの方法があります。

①pxやemの単位で指定

line-heightの値に「px」や「em」などの単位をつけて行間を指定します。

p {
  font-size: 16px;
  line-height: 24px;
}

このとき、ここで指定した行間の高さには文字の高さも含まれることに注意してください。たとえば、フォントサイズを「16px」、行間を「24px」と指定した場合、文字の上下に4pxずつの余白ができます。

line-heightの説明

値のみで指定

line-heightの値に単位をつけず、数値のみで指定します。この場合、一行の高さは「フォントサイズ × 指定した値」となります。たとえば、フォントサイズを「16px」、行間を「1.5」とした場合は「16px × 1.5 = 24px」となり、上記の「24px」で直接指定した場合と結果は同じになります。

p {
  font-size: 16px;
  line-height: 1.5;
}

③%で指定

line-heightの値を%で指定することもできます。この場合も、一行の高さは「フォントサイズ × 指定した値(%)」となります。たとえば、フォントサイズを「16px」、行間を「150%」とした場合は「16px × 150% = 24px」となり、上記の「24px」で直接指定した場合と結果は同じになります。

p {
  font-size: 16px;
  line-height: 150%;
}

④normalを指定

line-heightの値に「normal」というキーワードを入力すると、ブラウザが自動的に行間を決定します。通常、line-heightを指定しない場合の初期値は「normal」となっています。

p {
  font-size: 16px;
  line-height: normal;
}

検索

MENU

サンプルコード集

Webの基礎知識

others

coming soon…

  • コンテンツ制作中
PAGE TOP