[css]文字の間隔を調整する方法

文字の間隔をcssでコントロールする方法をご紹介したいと思います。

文字の間隔が詰まっていると、文字が見にくくてホームページ自体がもう文字を読む気を無くしてしまうっていうことありませんか？

こんな状態にならないように文字の間隔をコントロールすることでちょっとでも見やすい文字間隔を実現して見ましょう。

文字の間隔をコントロールするためのHTMLの準備

文字の間隔が開いている様子がわかるように、通常の状態とちょっとずつ開いていくようなサンプルを作っていきましょう。
そのため、htmlは次のような構造になります。

<div>文字の間隔が通常通りです</div>
<div class="lt01">文字の間隔が0.1文字分空きます。</div>
<div class="lt02">文字の間隔が0.2文字分空きます</div>

上記のように３種類用意して文字の間隔が広がっていく様子を見て見ましょう。

文字の間隔をcssでコントロールしてみよう

上記のhtmlに対して、cssを記述することで、文字の間隔をコントロールして見ましょう。文字の間隔をコントロールするためには、「letter-spacing」を使用します。サンプルコードとサンプル実装例は次の通りになります。

<style>
 .lt01{
    letter-spacing:0.1em;
 }
 .lt02{
    letter-spacing:0.2em;
 }
</style>
<div>文字の間隔が通常通りです</div>
<div class="lt01">文字の間隔が0.1文字分空きます。</div>
<div class="lt02">文字の間隔が0.2文字分空きます</div>

文字の間隔を徐々に広がっていくサンプル実装例

上記のように、通常状態に比べて　0.1emずつ文字の間隔をあけていくことで文字の間隔が広がっていっているのが見えるかと思います。

まとめ

文字の間隔をcssで調整する方法についてご紹介させていただきました。cssを用いて文字の間隔を調整する際には、「 letter-spacing」を使用します。あなたのサイトに最適な文字の間隔に調整することで、より読者に見てもらうサイトを目指しましょう。