【CSS】letter-spacingの使い方とは?効かないときの原因と対処法も解説

2024.01.03

CSSで文字間を指定するには、letter-spacingを使用します。

「どうやって計算しているの?」「効かないときはどうすればいい?」

そんな悩みを抱えている方もいるのではないでしょうか。

今回は、CSSのletter-spacingを用いて文字の間隔を設定したい方のために、

  • letter-spacingとは
  • letter-spacingのおすすめの値について
  • 効かないときの対処法

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSのletter-spacingについて、詳しく理解できるようになりますよ。

ぜひ最後まで読んでくださいね!

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について使い方とおすすめの値を解説してきました。

効かないときの原因と対処法についても紹介しましたね。

一括で指定することが多いので、これまで意識してこなかったという方もいたのではないでしょうか?

今回の記事が、今後コーディングする上で参考になれば幸いです。

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5