狼読

 
2020/05/28

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

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

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

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

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

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

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

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

文字の間隔を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.1文字分空きます。
文字の間隔が0.2文字分空きます

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

まとめ

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

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/05/01

[css]チェックボックスのチェック欄を消して、オリジナルのチェックボックスを作る方法

投稿カレンダー

2020年10月
 1234
567891011
12131415161718
19202122232425
262728293031  

Technology

category

©狼読