css「letter-spacing」文字間を「広げる」「狭める」プロパティ（html,css）

こんにちは、tanakaです。

今回は「letter-spacing」の説明です。

「letter-spacingは、
文字と文字の間にスペースを入れるプロパティです。

さらに

マイナスの数値を入れることによって、
文字と文字の間を狭めることもできます。

「letter-spacing」の値は、
２種類です。

　１：normal
　２：数値（px enなど）

それでは
詳しくみて行きましょう。

文字化けします

＜コピー、ペーストすると文字化けします＞

このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。

十分ご注意ください。

「letter-spacing」とは？

「letter-spacing」とは、
文字と文字の間を「広げたり」「狭めたり」するプロパティです。

値は２つあります。

　１：normal
　２：数値（px emなど）

詳しく説明します。

＜１：normal＞

「normal」は、
文字間を「広げたり」「狭めたり」しません。（デフォルト値）

＜２：数値＞

「数値」は、
px emなど数値を使って、
文字間を「広げたり」「狭めたり」します。

プラス　　＝　広がる
マイナス　＝　狭まる

＜プラス＞

＜マイナス＞

「letter-spacing」は文字の間を広げる時、
「文字の後ろにスペース」を入れます。

＜「letter-spacing」の文字間スペース＞

文字の間を均等にするなら

「letter-spacing」よりも「text-align-last: justify」の方が良いでしょう。

＜「text-align-last: justify」の文字間スペース＞

「text-align-last: justify」を使う時には、
注意点があります。

「text-align-last: justify」は、
「display: inline」では使えません。

その理由は、
「display: inline」では「widthの設定ができない」からです。

なので

「text-align-last: justify」を使うときは、
「display: inline」以外を使用してください。

text-align-last: justify;
display: inline-block;
width: 300px;

以上、
css「letter-spacing」文字の間を「広げたり」「狭めたり」するプロパティ（html,css）
の話でした。

ありがとうございました。