文字間(文字と文字の間の間隔)を調整するには、プロパティにletter-spacingを指定します。
letter-spacing:指定する値;
}
letter-spacingを使うことにより、文字と文字の間の間隔を調整することができます。
例えばこちらの文書。
むかしむかしあるところに、おじいさんとおばあさんが住んでいました。おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。おばあさんが洗濯をしていると、川の向こうからドンブラコ、ドンブラコと大きな桃が流れてきました。
上の文章は、文字と文字の間に隙間がなく、とても窮屈です。これではとても読みづらいですね。
そこで、letter-spacingを使って文字間を調整します。
むかしむかしあるところに、おじいさんとおばあさんが住んでいました。おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。おばあさんが洗濯をしていると、川の向こうからドンブラコ、ドンブラコと大きな桃が流れてきました。
文字と文字の間の間隔が広がり、窮屈さが解消されました!
※上記文書はわかりやすいように、やや広めの文字間に設定しています。
このように、文字間を調整することにより、読みやすい文書を作ることができます。
文字間の調整方法と記述例
[CSSの記述例]letter-spacing:5px;
}
指定する単位は、px以外の単位を使用してもOKです。(ptやem、exなど)
※私はpxもしくはemで指定することが多いです。
なお、マイナスの値をつけることも可能です。
[HTMLの記述例] <!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>文字間の調整</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<p class="mojikan">むかしむかしあるところに、おじいさんとおばあさんが住んでいました。おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。おばあさんが洗濯をしていると、川の向こうからドンブラコ、ドンブラコと大きな桃が流れてきました。</p>
</body>
</html>
むかしむかしあるところに、おじいさんとおばあさんが住んでいました。おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。おばあさんが洗濯をしていると、川の向こうからドンブラコ、ドンブラコと大きな桃が流れてきました。
前ページの「行間を調整する」や、後述の単語間の調整と一緒に指定することにより、ゆったり広々とした文書を作ることも可能です。
※もちろんその逆も可能です。
ホームページの雰囲気や読みやすさに気をつけて、読みやすい文書に仕上げましょう。
覚えておきたいポイント
できるだけCSSで指定する
文字間を調整する際は、ついつい「文 字 間」のようにスペースを入れて調整しまいがちですが、できるだけ文字間はCSSで調整するようにしましょう。空白が入っていると音声読み上げ機能やソフトが対応できないなどのトラブルが発生する場合があります。