cssプロパティletter-spacingについての説明(thml,css入門)

こんにちは tanaka です。

今回は、
cssプロパティ
letter-spacing の説明です。

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


letter-spacingの値は
2つあります。
 1:normal = 文字間を広げたり、狭めたりしない
 2:数値(px enなど)


letter-spacingは、
プラス、マイナスの数値を
入れる事ができます。

プラス  = 文字間が広がる。
マイナス = 文字間が狭まる。


letter-spacingのプラスは、
文字の後ろにスペースが入り
文字と文字の間を
広げます。

letter-spacing :10px

画像blog-letter-spacing01

なので
均等割を使った方が
良い場合も
あります。

text-align-last: justify

画像blog-letter-spacing02

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

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

cssプロパティletter-spacingの説明

letter-spacingとは

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

値は2つあります。
 1:normal = 文字間を広げたり、狭めたりしない
 2:数値(px enなど)

1:normal = 文字間を広げたり、狭めたりしない

normalは
デフォルト値です。

文字と文字の間を空けません。

2:数値(px enなど)

プラス、マイナスの数値を
入れる事ができます。

プラス  = 文字間が広がる。
マイナス = 文字間が狭まる。

text-align-last: justify の方が良い場合も

letter-spacingを使って
文字間を空けると
指定した数値分

文字の後ろに
スペースが追加されます。

letter-spacing :10px;
画像blog-letter-spacing01

なので
場合によっては

左右の幅を決めて、
均等割を使った方が
良い時もあります。

text-align-last: justify;
width: 300px;
display: inline-block;
画像blog-letter-spacing02

ただし
text-align-last: justify は、
display: inlineでは使えない

ので注意。

まとめ

letter-spacingとは

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

値は2つ

値は2つあります。
 1:normal = 文字間を広げたり、狭めたりしない(デフォルト)
 2:数値(px enなど)

プラス、マイナスの数値を
入れる事ができる。

プラス  = 文字間が広がる。
マイナス = 文字間が狭まる。

文字の後ろにスペース

letter-spacingは、
指定した数値分

文字の後ろに
スペースが追加される。

画像blog-letter-spacing01
text-align-last: justify; でも良い

letter-spacingではなく、
均等割を
使うのもあり。

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

画像blog-letter-spacing02

ただし
text-align-last: justify は、
display: inlineでは使えない

ので注意。

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

以上、
letter-spacing
の話でした。

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

タイトルとURLをコピーしました