HTMLでWEBサイトの文字などを打ち込んでいると、
「もう少し文字の間を詰めたい」
「もう少し文字と文字の間隔を空けたいな」
なんて思ったことはありませんか？
実は、簡単に文字間隔を調整できるCSSのプロパティがあるんです。
そこで今回は、文字間隔を調整出来るプロパティ”letter-spacing”をご紹介します。
CSSで文字間隔を調整！letter-spacingの書き方
まずは、以下をご覧ください。
おはようございます
おはようございます
おはようございます
文字同士の間隔がそれぞれかなり違いますよね？
これは、letter-spacingで調整しているからなんです。
真ん中のおはようございますには“letter-spacing: 5px;“を、一番下のおはようございますには”letter-spacing: -5px;“のスタイルを適用しています。
そうする事で、文字と文字の間をゆったりさせたり、引き締めたりする事が可能なのです。
効果的に使って、WEBサイトを美しく魅せられるようにしていきましょう！
letter-spacingに指定できる値
letter-spacingの値には色んな単位があります。
| nomal | 初期値（ブラウザの方で自動的に決めてくれるが、ほとんどの場合０があてられる。） |
|---|---|
| 数値 + px | ピクセルで文字間隔を指定する方法 |
| 数値 + em | em指定したい要素のフォントサイズ（px）÷ 親となる要素のフォントサイズ（相対的に指定する方法、文字の大きさが変わっても比率で適応してくれる。） |
ここで紹介はしましたが、あまりpxでの指定はおすすめしません。
なぜなら、WEBサイトやブラウザによって色んなサイズのフォントサイズが使われているので、思った通りの文字間隔にならないケースが出てくるからです。
一方emでの指定は、親要素となるフォントサイズに対する比率で指定しているので、フォントサイズが変わっても同じ比率を維持してくれます。
例えば、0.1emと指定すると、親要素となるフォントサイズの10分の1の比率で文字間隔が適用されます。
16pxならば、1.6px
40pxならば、4.0px
100pxならば、10.0px
となります。
またletter-spacingは、子要素にも適用されるのでWEBサイト全体に反映させるために、以下のようにbodyタグに指定される事も多いです。
|
1 2 3 |
body { letter-spacing: 0.05em; } |
よく使われているおすすめの数値は、0.05em〜0.1emの間になります。
迷ったら、この数値を指定しておくと良いでしょう。
まとめ
いかがでしたか？
今回は、WEBサイトなどで見やすさを更にあげるために必要な、CSSで文字間隔を調整できる”letter-spacing”について学びました。
これで、文字間隔の調整についてはバッチリですね！
この記事を読んであなたの悩みが解決されれば幸いです。
