HTML & CSS

テキストの行間や字間を調節する

  1. 最終更新日:
  2. 公開日:

line-heightプロパティletter-spacingプロパティを使ってテキストの行間や文字間(文字同士の隙間)を調節する方法を解説します。

この記事のポイント

  • line-heightプロパティでテキストの行間を調整できる
  • letter-spacingプロパティで文字と文字の隙間を調整する

テキストの行間や字間を調整するCSSプロパティ

行間と字間を設定したいときは、それぞれ次のCSSプロパティを使って行います。

行間を設定するCSSプロパティ

テキストの行間を設定は、line-heightプロパティを使います。

line-heightプロパティの設定例

p.text1 {
  line-height: normal; /* 初期値 */
}
p.text2 {
  line-height: 2.0em;
}
line-heightプロパティの設定例
line-heightプロパティの設定例

字間を設定するCSSプロパティ

文字と文字の隙間の設定は、letter-spacingプロパティを使います。

letter-spacingプロパティの設定例

.text1 {
  letter-spacing: normal; /* 初期値 */
}
.text2 {
  letter-spacing: 10px;
}
letter-spacingプロパティの設定例
letter-spacingプロパティの設定例

テキストの行間を設定

テキストの行間を設定するline-heightプロパティは、次のような単位と数値で設定することができます。

line-heightプロパティの設定例

.text1 {
  /* 初期値。
  ブラウザのユーザーエージェントに依存します。 */
  line-height: normal;
}
.text2 {
  /* 単位無しで指定。
  フォントサイズを基準に、数値を掛けた値が行の高さになります。 */
  line-height: 3;
}
.text3 {
  /* 「em」単位で指定。
  フォントサイズを基準に、数値を掛けた値が行の高さになります。 */
  line-height: 3.0em;
}
.text4 {
  /* 「%」単位で指定。
  フォントサイズを基準に、%を掛けた値が行の高さになります。 */
  line-height: 300%;
}
表示例
表示例

.text2」「.text3」「.text4」は全て同じ高さになります。
行間を設定すると、テキストの下部のみでなく上部にも空白が生まれるので注意してください。

字間を設定

文字と文字の間を設定するletter-spacingプロパティは、次のように任意の単位で設定することができます。
ただし、line-heightプロパティのように単位無しでは指定できません。

もし反対に文字間を詰めたいときは、「-0.2em」など負の値を設定します。

letter-spacingプロパティの設定例

.text1 {
  letter-spacing: normal;
}
.text2 {
  letter-spacing: 10px;
}
.text3 {
  letter-spacing: 2.0em;
}
.text4 {
  letter-spacing: -0.2em;
}
表示例
表示例

記事一覧