letter-spacing
letter-spacingプロパティは、文字の間隔を調整するプロパティです。
この文字間隔のアルゴリズムは定められていないため、UA(ブラウザなど)に依存しています。
また、両端揃えの影響を受ける事が有ります。
- 対応ブラウザ
-
プロパティの解説
- 値
- normal|<長さ>|inherit
- 初期値
- normal
- 適用される要素
- 全ての要素
- 継承
- しません
- パーセント値
- N/A
- メディア
- visual
値の解説
- normal
- 現在指定されているフォントで標準の文字間隔になります。この値が指定されている場合、両端揃えの為に文字間隔を調整する事が有ります。
- <長さ>
-
文字間隔を増加させるために長さを指定します。マイナス値の指定も不正にはなりませんが、大きな値を入れると読めなくなったりします。
また、UA(ブラウザなど)による文字間隔の変更を禁止する事ができます。normal
と同じ文字間隔で変更を禁止するには、値を0
にする事で可能です。
letter-spacingのサンプル
p.sample01 {
letter-spacing: normal;
}
p.sample02 {
letter-spacing: 1px;
}
p.sample03 {
letter-spacing: 0.5em;
}
p.sample04 {
letter-spacing: -1px;
}
p.sample05 {
letter-spacing: -0.5em;
}
<p class="sample01">letter-spacingプロパティのサンプルです。</p>
<p class="sample02">letter-spacingプロパティのサンプルです。</p>
<p class="sample03">letter-spacingプロパティのサンプルです。</p>
<p class="sample04">letter-spacingプロパティのサンプルです。</p>
<p class="sample05">letter-spacingプロパティのサンプルです。</p>
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
letter-spacingプロパティのサンプルです。
letter-spacingプロパティのサンプルです。
letter-spacingプロパティのサンプルです。
letter-spacingプロパティのサンプルです。
letter-spacingプロパティのサンプルです。
このように、文字間隔を調整するにはletter-spacingプロパティを使う必要が有り、スペースなどで調整するのはよくありません。
スペースなどで調整してしまうと、音声ブラウザで正確に読み取れなかったり、検索エンジンなどで単語とマッチングしない可能性が生じたりと言った問題が発生します。
アクセシビリティ面、SEO面共にメリットが無いため、文字間隔の調整はletter-spacingプロパティを必ず使いましょう。