word-spacing/単語間隔

word-spacingプロパティは英字の単語間隔を指定出来ます。

説明

 word-spacingプロパティを使うと英字の単語間隔を大きくしたり、小さくしたりといった設定が出来ます。

word-spacing説明

構文

 word-spacingプロパティの構文は以下の通りです。

word-spacing: 単語間隔;

 単語間隔は以下の設定が出来ます。

【単語間隔】
指定 説明
nomal デフォルト
px ピクセル
em 文字数

利用例

 word-spacingで20pxを指定した利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

p {
word-spacing: 20px;
}

<p>This is a pen.</p>

 上記を表示すると以下になります。

This is a pen.

 単語間が広がっています。

 尚、デフォルトのnormalの単語間隔は以下の通りです。

This is a pen.

 次は2emを指定した時です。

This is a pen.

 マイナスで指定する事も出来ます。以下は-5pxで指定した時です。

This is a pen.

 マイナスを大きくすると文字が重なったり、表示が逆転して左方向に記述が表示されたりします。

留意点

 word-spacingは単語間隔というより半角スペースの幅を広げる動作になります。

 このため、日本語や画像等様々な記述の途中に半角スペースがあると影響を受けます。

p {
word-spacing: 4em;
}

<p>これは ペンです。</p>

 上記を表示すると以下になります。

これは ペンです。

補足

 word-spacingと似たプロパティでletter-spacingがあります。letter-spacingは文字間隔で、word-spacingは単語間隔です。

letter-spacinfgとword-spacing違い

 letter-spacingが1文字1文字の間隔を指定するのに対し、word-spacingは単語単位で間隔を指定するといった違いがあります。

関連ページ

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)