トップページの中の プロパティの中の Lのプロパティ一覧の中の letter-spacing

letter-spacing

  • 最終更新:2009年11月 8日 16:43

letter-spacingプロパティは、文字の間隔を調整するプロパティです。

この文字間隔のアルゴリズムは定められていないため、UA(ブラウザなど)に依存しています。
また、両端揃えの影響を受ける事が有ります。

対応ブラウザ
  • IE6対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

プロパティの解説

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プロパティを必ず使いましょう。

このページの上部へ