概要へ移動

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

letter-spacing: normal;
|| Letter Spacing
|| Letter Spacing
letter-spacing: 1em;
|| Letter Spacing
|| Letter Spacing
letter-spacing: 20px;
|| Letter Spacing
|| Letter Spacing
letter-spacing: -3px;
|| Letter Spacing
|| Letter Spacing

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

CSS : デフォルトCSS
div {

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

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

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

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

}



.lg {

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

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

}

letter-spacingの概要

文字の間隔を指定する。

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

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

なお、単語の間隔はword-spacingで指定する。

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

無指定、normal、 0

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

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

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

    letter-spacing: normal; 

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

    letter-spacing: 0; 

}
実行結果
|| Letter Spacing
|| Letter Spacing

相対的な数値

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

CSS : 1em
.sample  {

    letter-spacing:     1em; 

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

    letter-spacing:     2em; 

}
実行結果
|| Letter Spacing
|| Letter Spacing

絶対的な数値

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

CSS : 10px
.sample  {

    letter-spacing:     10px; 

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

    letter-spacing:     20px; 

}
実行結果
|| Letter Spacing
|| Letter Spacing

負の値

負の値を入れると、文字が重なる。

CSS : -3px
.sample  {

    letter-spacing:     -3px; 

}
実行結果
|| Letter Spacing
|| Letter Spacing

Emmet : lts

記述Visual Studio Code
ltsletter-spacing: normal;
lts5letter-spacing: 5px;