Title

letter-spacingとは

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

letter

読み: レター
意味: 文字、手紙

spacing

読み: スペーシング
意味: 間隔をとること、語間、行間

目次に戻る

letter-spacing プロパティの概要

このプロパティは文字と文字の間隔を指定して、字間の距離を離したり、縮めたりすることができます。

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

目次に戻る

構文

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

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

目次に戻る

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

ここからは、実際のHTML要素にプロパティを適用しながら、表示される様子を見ていきたいと思います。 検証に使う要素はdiv要素となります。div要素はマークアップとしての意味を持たない純粋なコンテナー要素です。

目次に戻る

初期値: normal

このnormalキーワードは初期値であり、表示も特に変化はなく、通常の文字間隔で表示されます。 なお、このプロパティのキーワード値はnormalのみです。

div{letter-spacing: normal;}

目次に戻る

数値: 絶対数値で字間を設定する

文字間隔を調整する場合には絶対数値を指定する必要があります。 つまり、数値に単位が必要ということです。

サンプルでは指定値による表示の違いを確認するために3つの比較対象を用意しました。 rem(root em)は文書のhtml要素のフォントサイズを基準にした1文字分を1単位としたものです。 また、pxはCGの画素の最小単位を1単位としたものです。

指定数値には負の値を使用することで文字間隔を縮めることができますが、文字が重なり合うことも考えられます。

div{letter-spacing: 1rem;}
div{letter-spacing: -1px;}
div{letter-spacing: 1px;}

目次に戻る

グローバル値

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

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

div{letter-spacing: グローバル値;}

目次に戻る

補足説明

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

目次に戻る

まとめ

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

letter-spacing: normal;

letter-spacing: 1em;

letter-spacing: 1rem;

letter-spacing: 0.5px;

letter-spacing: -0.5px;

目次に戻る