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

●単語の間隔を広げる

 word-spacingは、半角スペースで区切られた単語と単語の間隔を指定するプロパティです。指定できる値は長さを表す単位付きの数値ですが、nomal(標準)の値も指定できます。パーセント付きの値は指定できません。すべての要素に適用でき、子要素へ継承します。また、一定の限度はありますがマイナス(-)の値も指定できます。マイナスを指定すると単語と単語の間隔を狭くすることができます。

【サンプル】

Merry Christmas.
Happy New Year.

【CSS】

.sample {
 word-spacing: 20px;
}

【HTML】

<p class="sample">Merry Christmas.<br />
Happy New Year.</p>

 日本語の場合、半角スペースを入れながら文章を書かないので必要性を感じないかも知れませんが英語の文章や場面と必要に応じて使えるプロパティだと思います。IE(v5.0以下)が対応していませんが、IE(v6.0〜)、Mac版IE(V4.5、V5.0)、Netscape(v6、v7)、Firefox、Opera(v6〜)、Google chrome、Safariといったブラウザがこのプロパティに対応しています。ただし、ウィンドウズ版IEはletter-spacingプロパティ同様、値にemの単位を指定するとその要素のフォントサイズに対する間隔ではなく、親要素のフォントサイズに対する間隔になるバグがあります。なお、このプロパティが適用されるスペースは半角です。全角スペースに対しては反映されません。ウィンドウズ版IE(v6.0)は全角スペースでも反映され、単語の間隔が広がりますが、例外的なケースです。

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

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