概要へ移動

このページで解説するコードの実行結果。

word-spacing: normal;
Word Spacing
Word Spacing
word-spacing: 1em;
Word Spacing
Word Spacing
word-spacing: 20px;
Word Spacing
Word Spacing

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
div {

    border:             2px solid blue; /*  境界線  */

    margin:             5px;            /*  外側の余白 */

    padding:            5px;            /*  内側の余白  */

    background-color:   #ffe;           /*  背景色  */

}



.lg {

    font-size:          150%;           /*  文字の大きさ  */

    background-color:   #fef;           /*  背景色  */

}

word-spacingの概要

単語の間隔を指定する。

単語の間隔とは、つまり「スペースの幅」であるが、スペースを含まない日本語では、ほとんど効果がない。

指定する値は「 normal （デフォルト値） 」か「数値（＋ 単位）」。

normalはブラウザやフォント・ファミリーに依存するが、一般的に0と同値である。

なお、文字の間隔はletter-spacingで指定する。

CSsプロパティ指定する間隔
word-spacing単語の間
letter-spacing文字の間

無指定、normal、 0

以下の場合、word-spacingはデフォルトになる。

  • word-spacingの指定が無い場合
  • normal
  • 0
HTML : 適用するHTML
<div class="sample">    Word Spacing   </div>

<div class="sample lg"> Word Spacing   </div>
実行結果
Word Spacing
Word Spacing
CSS : normal
.sample  {

    word-spacing: normal; 

}
実行結果
Word Spacing
Word Spacing
CSS : normal
.sample  {

    word-spacing: 0; 

}
実行結果
Word Spacing
Word Spacing

相対的な数値

emなどの相対的な数値を設定すると、フォント・サイズに対する広さになる。 つまり、フォントを大きくすると単語間も広くなる。

CSS : 1em
.sample  {

    word-spacing:     1em; 

}
実行結果
Word Spacing
Word Spacing
CSS : 2em
.sample  {

    word-spacing:     2em; 

}
実行結果
Word Spacing
Word Spacing

絶対的な数値

pxなどの絶対的な数値を設定すると、単語間は一定の広さになる。 つまり、フォント・サイズと無関係。

CSS : 10px
.sample  {

    word-spacing:     10px; 

}
実行結果
Word Spacing
Word Spacing
CSS : 20px
.sample  {

    word-spacing:     20px; 

}
実行結果
Word Spacing
Word Spacing

Emmet : wos

記述Visual Studio Code
wosword-spacing: ;
wos5word-spacing: 5px;