ホーム | CSSプロパティ・目次

●文字と文字の間隔を広げる

 letter-spacingは、ひとつひとつの文字と文字の間隔を広げるプロパティです。指定できる値は長さを表す単位付きの値ですが、normal(標準)の値も指定できます。パーセント付きの値は適用されません。また、一定の限度はありますがマイナス(-)の値を指定することも可能です。マイナスの値を指定すると文字間隔を詰めて表記されるようになります。すべての要素に指摘でき、指定した値は子要素へ継承します。

 

【サンプル】

letter-spacingは文字と文字の間隔を広げるプロパティです。

【CSS】

.sample {
 letter-spacing: 10px;
}

【HTML】

<p class="sample">letter-spacingは文字と文字の間隔を広げるプロパティです。</p>

 注意する点としては、あらかじめ、CSSで指定した長さを表す単位にすでに備わっている標準の文字間隔にletter-spacingプロパティの値が加算されるといういう点です。文字間隔そのものを指定するプロパティではないことに注意してください。そして、ウィンドウズ版IEの場合、値にemの単位を指定するとその要素のフォントサイズに対する文字間隔ではなく、親要素のフォントサイズに対する文字間隔になるというバグがあります。それとこのプロパティには連続したbr要素を無視するというバグがあるようです。ウィンドウズ版IE(v7以下)に対しては二つ以上の連続したbr要素に対してはないものとして無視してしまうバグがあるというものです。(偶数回目のbr要素を無視します。例えば、連続したbr要素のうち、2つ目、4つ目のbr要素が無視されるといった具合です。これはbr要素でレイアウト調整されている場合、ブラウザのバージョンによってはレイアウト崩れの要因になる可能性があります。)そのほか、Mac版IE(v4.5、v5.0)では間隔を広げすぎると要素からはみ出てしまうバグがあります。

Key words:letter-spacing バグ

【アドバイス】

・emの単位を使わない。
・このプロパティを使う場合、br要素に対して、“letter-spacing: 0;”または、“letter-spacing: normal;”を同時に指定しておく。

【例】

body {
 background-color: #000;
 color: #fff;
 letter-spacing: 1px;
}
br {
 letter-spacing: normal; /* ← IE6、IE7対策 */
}

【備考】

 文字と文字の間に空白を入れて調整することがあります。例えば、「日 時」、「時 間」といった具合です。しかし、(全角半角問わず)単語の間に空白を入れると、スクリーンリーダーや音声ブラウザといった読み上げソフトによっては正しく読み上げない、あるいは、意味が変わってしまい不自然になる場合があります。文字と文字の間隔を空けたい場合にはスタイルシートで調整するようにしましょう。

全体の目次 | テキスト・目次

Copyright (C) 2011 http://www.xml.vc/ All Rights Reserved.