概要
CSSプロパティ｢letter-spacing｣は、文字同士の間隔を調整する際に使用します。また行の高さを調整したい場合は line-height プロパティを使用します。
<p class="space-px">おはようございます。</p>
<style>
.space-px {letter-spacing: 10px;}
</style>取りうる値
数値またはキーワードで指定します。またマイナス値も指定することができます。
| 値 | 説明 |
|---|---|
| normal | 初期値です。標準の間隔にします |
| 値 | px, em, %などで指定。マイナス値を指定することもできます。 |
値の単位の詳細は以下の通りです。
| 単位 | 説明 |
|---|---|
| px | pxとは画面の1画素（ピクセル）のサイズを１とする単位です。実際に表示されるサイズはモニターの解像度により変化します。 |
| em | 親要素を起点とする文字の高さを１とする単位です。１emは１文字分となります。 |
| % | 親要素の幅を基準に割合を％値で指定した単位です。 |
値の指定方法
{ letter-spacing: 値 }値を指定してみた際の表示です。
<p class="space-px">おはようございます。</p>
<p class="space-percent">おはようございます。</p>
<p class="space-minus">おはようございます。</p>
<style>
.space-px {letter-spacing: 10px;}
.space-percent {letter-spacing: 5px;}
.space-minus {letter-spacing: -5px;}
</style>使用する上での注意点
ページ内の様々な場所で異なる指定をすると、読みづらい印象を与えてしまうかもしれません。ですので、統一した値を指定するか、細かい箇所を微調整する程度に留めておくことが重要です。
使用例
実際に使用するする際には｢em｣の指定がおすすめです。この単位は、ブラウザを拡大、縮小した際にも相対的に値が計算されますので自然な表示が可能になります。
<p>おはようございます。</p>
<p class="space-em">おはようございます。</p>
<p class="space-em2">おはようございます。</p>
<style>
.space-em {letter-spacing: 1em;}
.space-em2 {letter-spacing: 0.2em;}
</style>