CSSで文字の間隔を設定する方法

文字と文字の間隔の設定は(letter-spacing)を利用することで可能です。

文字の間隔を調整する際に、スペースを入れて調整してしまうことがあるかもしれませんが、スペースで文字の間隔を調整すると、音声ブラウザなどの読み上げソフトでは正しく読み上げることができなくなってしまいます。

また、1つの単語ではなくなってしまうと、検索にかからなくなります。

ですから、文字の間隔を調整する時はスタイルシートで、と頭に入れておくと良いでしょう。今回は、そんな(letter-spacing)のポイントや使い方を紹介します。

ポイント

値に%は使えない

(letter-spacing)では、値に%を使っての指定は出来ないので注意しましょう。

デフォルトの指定

normalで初期値に指定ができます。

数値+ptで指定する

基本的には、数値にptをつけて文字と文字の間隔を指定して使います。

値には-も使用できる

値には-を使用して、文字の間隔を指定することもできます。-を指定すると、文字が重なって表示されます。

記述の仕方

実際の記述の仕方を見てみましょう。

今回はnormalを設定してみました、この要素は文字の間隔がデフォルトになります。

要素{
   letter-spacing: normal;
}

emを使うことで文字数で文字の間隔を指定することもできます。

要素 {
   letter-spacing: 1.8em;
}

上記の様に記述すると、文字の間隔は1.8文字分に指定できます。

初めにも書きましたが(letter-spacing)には色々な指定の仕方があり、便利ですので、文字の間隔を調整したい時はスペースではなくスタイルシートを活用しましょう。


イベント

2017/12/05(火)
Design Thinking Square