こんにちは〜
急にどうしたの？
letter-spacingプロパティを設定する事でこのように文字と文字の間にスペースを空けることができるんだよ
1.letter-spacingの基本と使い方
letter-spacingプロパティを指定し、値にはpx, em, rem, %を付けて設定すると文字と文字の間隔を取ることができます。
ちなみに初期値は”normal”が設定されていて、”0“と同じ意味になります。
セレクター{
letter-spacing: 値;
}<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>p{
letter-spacing: 2px;
}この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
また値にはマイナスも設定でき、その時は字詰めの効果になります。
どちらに設定するとしても値は大きくしすぎない方が良いです
2.letter-spacingの値
2-1.pxで指定した場合
実際に文章に使った際の例を見てみましょう。
letter-spacing : 0 (normal);
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
letter-spacing : 1px;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
letter-spacing : -1px;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
letter-spacingを無理に設定しなくてもバランスは取れていると思います。
またマイナスに設定すると字間が狭まったのがわかります。
2-2.emで指定した場合
emで指定した場合はフォントサイズに併せて間隔が変わります。
これを相対値といいます。またpxの場合は絶対値といいます。
この場合のスペースの考え方はfont-size × letter-spacingとなります。
.text1{
font-size: 18px;
letter-spacing: 1em;
}
/*letter-spacing: 18pxと同じ*/
.text2{
font-size: 20px;
letter-spacing: 1em;
}
/*letter-spacing: 20pxと同じ*/
.text3{
font-size: 22px;
letter-spacing: 1em;
}
/*letter-spacing: 22pxと同じ*/
.text4{
font-size: 22px;
letter-spacing: 22px;
}
/*letter-spacing: 22pxと同じ*/テキスト1
テキスト2
テキスト3
テキスト4
テキスト1、テキスト2、テキスト3は同じletter-spacing(1em)が指定されていますが文字サイズに応じて変わるので間隔は違っています
またテキスト3とテキスト4は同じ間隔になっています
こちらも文章に使った際の例を見てみましょう。
letter-spacing : 1em;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
letter-spacing : 0.1em;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
letter-spacing : 0.05em;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
さすがに１emに設定すると広すぎて読みづらくなります。
ホラーな文章を書きたい方は良いかもしれません(笑)
間隔でこんなに印象が変わるんだね
letter-spacingは設定してもしなくても見た目が大きく崩れる事はないですが使うのであれば、pxで指定するより文字のサイズに応じて間隔を変えてくれるemの方が良いです。
指定する数値に関しては0.05em〜0.1emで指定するのがちょうど良い感じになります。
というわけでremと％については割愛です。
3.まとめ
セレクター{
letter-spacing: 値;
}- letter-spacingは字間を付けるプロパティ
- 値はpx, em, rem, %で指定
- 指定する場合は文字のサイズに応じて間隔を変えてくれるemの方が便利で、0.05em〜0.1emで指定するのがちょうど良い
クリックで変化します
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
コメント