【CSS】letter-spacingの使い方とは？効かないときの原因と対処法も解説
CSSで文字間を指定するには、letter-spacingを使用します。
「どうやって計算しているの？」「効かないときはどうすればいい？」
そんな悩みを抱えている方もいるのではないでしょうか。
今回は、CSSのletter-spacingを用いて文字の間隔を設定したい方のために、
- letter-spacingとは
- letter-spacingのおすすめの値について
- 効かないときの対処法
以上の項目に沿って、解説していきますね。
この記事を読めば、CSSのletter-spacingについて、詳しく理解できるようになりますよ。
ぜひ最後まで読んでくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
letter-spacingとは？どんなときに使うもの？
letter-spacingは、文字の間隔を指定するCSSプロパティです。
文字同士の間の隙間を広げたいときや狭くしたいときに利用します。
具体的には以下のように記述します。
.sample {
letter-spacing: 0.5em;
}値について詳しく解説していきますね。
letter-spacingの値
letter-spacingは、以下のような値を取ることができます。
- normal（初期値）
- 数値 px
- 数値 em
- 数値 %
normalは初期値で、何も指定していない場合にはこの値になります。
後は、サイズなどを決めるときと同様、数値と単位で指定する方法ですね。
この数値にはマイナスを指定することもできます。マイナスでは、文字の間隔が狭くなります。
「em」をおすすめする理由と計算方法
letter-spacingを指定するときの値は、単位「em」を使用することをおすすめします。
emとは相対的な単位で、フォントサイズによって計算されます。
1emがフォントサイズと同じ大きさで、例えば0.5emでは、フォントサイズの半分の大きさになります。
フォントサイズに応じて自動で字間を決めてくれるため、個々の要素で指定する手間が省くことができますね。
異なる要素で異なる値を指定をしていると、字間がバラバラになり、可読性が落ちてしまう可能性があります。
また、閲覧者側でブラウザを拡大・縮小した際にも、文字の大きさに応じた計算がなされる、という利点もあります。
letter-spacingが効かないときの原因と対処法
letter-spacingを指定しているはずなのに、上手く表示されない、なんてときがあります。
letter-spacingが効かない原因と対処法を解説していきますね。
合字など特殊なフォントを使っていないか確認
letter-spacingが効かない場合には、何のフォントを使用しているのか確認してみるのも良いでしょう。
「ff」や「fi」などの文字列はフォントによっては、合字（リガチャ）といって1文字でまとめられることがあります。
これはロゴやパッケージなどのデザインにも使われており、fが続いたりして見づらくなった文章を読みやすくするために生まれたものです。
こういった場合には、文字の間に隙間が作られないため、letter-spacingは効きません。
フォントを変えるか、「font-variant-ligatures:none」を指定して、リガチャの機能を削除する必要があります。
スペルミスなどをデベロッパーで確認
上記の方法で解決しない場合には、単純にスペルミスなどで指定を間違えている可能性があります。
ChromeやFirefoxには、ブラウザで使えるデベロッパーツールが用意されています。
ツールを開いて、letter-spacingが機能しているか確認してみましょう。Chromeの場合、間違った記述には打ち消し線が入っています。
まとめ：letter-spacingを使いこなそう
今回は、CSSのletter-spacingについて使い方とおすすめの値を解説してきました。
効かないときの原因と対処法についても紹介しましたね。
一括で指定することが多いので、これまで意識してこなかったという方もいたのではないでしょうか？
今回の記事が、今後コーディングする上で参考になれば幸いです。
