• css

CSSで文字の間隔を変更してみた

はじめに

htmlで見出しとかつけてみたんですが、文字の間隔がちょっと詰まって見えるのか・・もうちょっと開けたいのですがどうしたらいいんですかね?スペースであけるわけにはいかないですし・・
cssで文字の間隔を指定するものがあるので、そちらを使って調整してみましょう。
やっぱりcssで調整することができるのですね。
letter-spacingというものを使えば可能です。

letter-spacingを使って文字間隔を変えてみよう

letter-spacingを指定することで文字間隔を変更することができます。
サンプルは下記のようになります。

<h4>デフォルトの文字間隔</h4>
<h4 class="lt02em">0.2emだけ文字間隔を開けて見る</h4>
.lt02em{
  letter-spacing:0.2em;
}

letter-spacingの実行例

デフォルトの文字間隔

デフォルトの文字間隔

このように文字の間隔が広くなっていることがわかるかと思います。
デザインや読みやすさに応じて変更できるのはいいですね。

関連記事

  1. hoverした時に文字の間隔をつかってアニメーションしてみよう

  2. 見出しの前に三角形をつけてみよう

  3. CSSでテキスト文にインデントをつけてみよう

  4. cssでフェードをかけてみよう

  5. 特定の番号の要素のcssだけ変更してみよう

  6. cssで矢印を作ろう

2022年1月
 12
3456789
10111213141516
17181920212223
24252627282930
31  
Translate »