word-spacingプロパティの説明
CSSのword-spacingプロパティは、単語同士の間隔を指定します。この機能は、英文などの単語を半角スペースで区切る言語において、ホワイトスペースの幅を定義します。
既定値では、半角スペースの幅はフォントやブラウザによって定義されている寸法で表示されますが、word-spacingによって間隔を調整することが可能です。半角スペースで区切られていない文字には影響しません。マイナスの値を与えて幅を詰めることもできます。
連続する文字同士の間隔を指定するには、letter-spacingを使用して下さい。カーニングの規則を変える場合は、font-kerningというプロパティが用意されています。
word-spacingに指定できる値
normal- フォントやブラウザで定義された通常の間隔で表示します。これが初期値です。
<length>- 通常の間隔に追加する幅の寸法を指定できます。CSSで使用できる長さを表す単位付きの数値です。
<percentage>- 文字の贈り幅（advance width）に追加する幅の量をパーセンテージで指定します。
word-spacingの使い方とサンプルコード
word-spacingプロパティの構文は以下の通りです。
/* キーワード値 */
word-spacing: normal;
/* <length>値 */
word-spacing: 3px;
word-spacing: 0.3em;
word-spacing: -0.5rem;
/* <percentage>値 */
word-spacing: 24%;
word-spacing: 50%;
word-spacing: -10%;
/* グローバル値 */
word-spacing: inherit;
word-spacing: initial;
word-spacing: revert;
word-spacing: unset;
word-spacingの実例
それでは実際にword-spacingプロパティの書き方を見ていきましょう。以下の例は、同じ内容のテキストに対して異なる間隔の幅を指定した場合の比較です。マイナスの値を指定すると、単語同士の幅が切り詰められます。間隔を広げすぎると意味が読み取れなくなる可能性があるため、気をつけましょう。
パーセンテージによる指定は対応していないブラウザが多いため、フォントサイズやピクセル単位での指定を推奨します。
<div class="samp_box">
<section id="item_1">
<h1>word-spacing: normal;</h1>
<p>Text text text text. 連続する文字は変化なし。</p>
</section>
<section id="item_2">
<h1>word-spacing: 10px;</h1>
<p>Text text text text. 連続する文字は変化なし。</p>
</section>
<section id="item_3">
<h1>word-spacing: -10px;</h1>
<p>Text text text text. 連続する文字は変化なし。</p>
</section>
<section id="item_4">
<h1>word-spacing: 2em;</h1>
<p>Text text text text. 連続する文字は変化なし。</p>
</section>
<section id="item_5">
<h1>word-spacing: -2em;</h1>
<p>Text text text text. 連続する文字は変化なし。</p>
</section>
<section id="item_6">
<h1>word-spacing: 20%;</h1>
<p>Text text text text. 連続する文字は変化なし。</p>
</section>
<section id="item_7">
<h1>word-spacing: -20%;</h1>
<p>Text text text text. 連続する文字は変化なし。</p>
</section>
</div>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background-color: #eee;
}
.samp_box > section {
overflow: auto;
margin: 1rem 0 0;
padding: 0 1rem 1rem;
background-color: #fff;
}
section > h1 {
margin: 1rem 0 0;
font-size: 1rem;
}
section > p {
margin: .5rem 0 0;
}
#item_1 > p {
word-spacing: normal;
}
#item_2 > p {
word-spacing: 10px;
}
#item_3 > p {
word-spacing: -10px;
}
#item_4 > p {
word-spacing: 2em;
}
#item_5 > p {
word-spacing: -2em;
}
#item_6 > p {
word-spacing: 20%;
}
#item_7 > p {
word-spacing: -20%;
}