CSSのletter-spacingでテキストの文字の間隔を狭くする方法

キャッチコピーをバンと表示したいけど、微妙に2文字だけ改行されてしまう!!

なんてことないですか?

 

こういった場合には文字を小さくするという対応方法もありますが、文字と文字の間の微妙な隙間を狭くすることで改行せずに全体を表示させる方法を紹介します。

CSSのletter-spacingでテキストの文字の間隔を狭くする方法

結論から言うと、CSSの letter-spacing というプロパティを使います。

初期状態は値に normal が指定されています。

このにマイナスの値を指定すると文字間隔が狭まります。

値の単位は px や em などを使います。

 

たとえば次のようなHTMLがあるとします。

表示すれば次のようになりますね。

あいうえお

 

この #sampletext に対し、letter-spacing: -3px; を指定してみます。

すると次のように表示されます。

あいうえお

 

間隔が狭まって表示されていることが分かると思います。

文字の間隔を広くする方法

letter-spacing はプラスの値を指定すると間隔を広げることができます。

さっそくやってみましょう。

 

まず通常の状態です。

上のHTMLを表示すると

あいうえお

になります。

 

これ letter-spacing: 5px; を指定してみます。

すると次のように表示されます。

あいうえお

 

間隔が広がったことが分かりますね!

letter-spacingの値の単位

上の例では px を使いました。

px はピクセルのことで文字サイズやブロックの幅などを指定するときに使う単位です。

分かりやすいかと思ったので px で参考コードを書きました。

 

文字サイズなんかでは em を使う場合も多いです。

emはエムと読むそうです。イーエムって読んでた…恥ずかしい。

emは文字の高さを基準にした単位です。

letter-spacingで文字幅を指定するとき、文字の大きさに対し相対的に値を指定できるので実際に使う場合はこちらのほうがおすすめです。

パソコンとスマホで文字のサイズが異なる場合も文字の大きさに合わせて幅が変動してくれます。

 

他にも vw なんてのもあります。

vw は画面の幅に対して大きさが変動します。

スマホやタブレット表示のときのように画面いっぱいにコンテンツを表示する場合にはなかなか使えます!

パソコンで画面いっぱいに表示しない場合は使い勝手が悪いように感じます。

まとめ

文字の間隔をCSSで指定する場合は letter-spacing プロパティを使う。

単位は px か em が一般的で em のほうが文字サイズに応じた値が設定できるのでおすすめ。

マイナスの値を指定すれば文字幅が狭まり、プラスの値を指定すれば広がる。

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA