Title

word-spacingとは

word-spacing とは次の語句からなるCSSのプロパティです。

word

読み: ワード
意味: 単語、一言

spacing

読み: スペーシング
意味: 間隔、語間

目次に戻る

word-spacingプロパティの概要

このプロパティは、要素や単語の間隔を調整するために使用します。

指定した値は、初期値に対する増加分となります。

値の指定方法はキーワード値のnormalと単位付きの実数値のみとなります。 実数値には負の数も指定することができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{word-spacing: 設定値}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルはdiv要素にテキストを内包したものを使用ています。 このdiv要素にword-spacingプロパティを適用して変化を見ていきたいと思います。

初期値: normal

初期値のnormalキーワードは、 フォントやブラウザの設定を踏まえた、通常の語間で表示します。

div{word-spacing: normal;}

目次に戻る

数値: 絶対値と相対値による語間の設定

このサンプルでは、1cmという絶対値で語間を設定しました。 実際にブラウザに表示される単語と単語の間隔は1センチメートルに固定されています。

div{word-spacing: 1cm;}

このサンプルでは、1.5emという相対値で語間を設定しました。 これは、div要素に設定されている、 font-size プロパティの文字の高さを1として1.5倍の長さで語間を設定していることになります。

div{word-spacing: 1.5em;}

目次に戻る

パーセンテージ値: パーセントによる語間の設定

ここでは、100%と200%で語間を設定した2つの比較サンプルを用意しました。 このパーセンテージ値については、ブラウザによっては対応していないものがありますので、ご注意ください。

div{word-spacing: 200%;}

目次に戻る

グローバル値

word-spacingプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のnormalに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承するのが基本なので、inheritと同じ働きをします。

セレクター{word-spacing: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承する

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

word-spacing: normal;

word-spacing: 1cm;

word-spacing: 5px;

word-spacing: -2px;

word-spacing: 100%;

word-spacing: 50%;

目次に戻る