CSS3スタイル虎の巻

letter-spacing

letter-spacingは、文字の間隔を指定するスタイルです。

解説

文字の間隔を明示的に指定したい場合に使用します。
(ここでいう文字とは"あ"とか"A"など、1文字1文字の事を指します。)
マイナス値を指定すると、文字が重なって表示されます。

文字ではなく単語単位の間隔を指定したい場合は、word-spacingを使用してください。

構文

構文は以下になります。

letter-spacing: 値;

letter-spacingには以下の値が指定できます。

説明
数値pxやem等の単位と共に数値で間隔を指定する
(例)letter-spacing:10px;
normalデフォルトの間隔を指定する
(例)letter-spacing:normal;

太字の値は初期値です。

サンプル

文字間隔を10pxにする


.sample01 {
  letter-spacing:10px;
}

<div class="sample01">ここの文字間隔は10pxです。</div>
ここの文字間隔は10pxです。

文字間隔を20pxにする


.sample02 {
  letter-spacing:20px;
}

<div class="sample02">ここの文字間隔は20pxです。</div>
ここの文字間隔は20pxです。

文字間隔を-5pxにする


.sample03 {
  letter-spacing:-5px;
}

<div class="sample03">ここの文字間隔は-5pxです。</div>
ここの文字間隔は-5pxです。

マイナスを指定すると文字が重なります。

文字間隔をnormalにする(デフォルト値)


.sample04 {
  letter-spacing:normal;
}

<div class="sample04">ここの文字間隔はnormalです。</div>
ここの文字間隔はnormalです。

備考

  • normalサイズの場合は特に指定しなくてもOKです。

関連項目