文字と文字の間隔を調節したい場合どうしてる？
ホームページやブログで文字と文字の間にスペース（空白文字）を挿入することで位置調節するのは、あまり良い方法とは言えません。
では、なぜスペース（空白文字）で調節してはいけないのか？
ワープロソフトや表計算ソフトを使用している場合、文字と文字の間隔を空けたいと思ったら、おそらく文字と文字の間にスペース（空白文字）を挿入するでしょう。
ウェブ上でもそれと同じようにスペースで調節したくなる場合も多いでしょう。しかし、スペース（空白文字）で調節した場合、3つの問題が発生します。
- 検索にヒットできなくなる
- 音声ブラウザの読み上げがおかしくなる
- 必ずしも望み通りの間隔が開くとは限らない
検索にヒットできなくなる
文字間隔をスペース（空白文字）で調節してしまうと、検索にヒットできなくなる問題があります。
スペースを入れてしまう事で単語としての意味をなさなくなり、検索結果として表示されない場合があります。
音声ブラウザの読み上げがおかしくなる
文字間隔をスペース（空白文字）で調節してしまうと、音声ブラウザでの読み上げがおかしくなる問題もあります。
視力弱者が音声ブラウザと利用したときにスペースで調整してしますとやはり単語としてでなく、個々の文字として認識してしまい、結果意味のなさない読み上げとなってしまいます。
必ずしも望み通りの間隔が開くとは限らない
文字間隔をスペース（空白文字）で調節する方法だと、望み通りの間隔（空間）を空けられるとは限らない問題もあります。
フォントサイズは閲覧者の環境によって異なりますので、「半角スペース」や「全角スペース」が具体的に何ピクセルの間隔になるのかは一定ではありません。
ピクセル数のように絶対的な値でなく、「標準の文字サイズに対してどれくらいの割合で空けばよい」という相対的な指定で構わない場合でも、「半角スペース」や「全角スペース」がどれくらいの横幅になるかは、表示に使われるフォントや環境などによって異なります。つまり、スペース（空白文字）で文字間隔を調節したとしても、自分のデザイン通りに見えるのは、自分の使っている環境のみである可能性が高いということです。
スペースを使わずにどうやって文字間隔を調節するの？
スタイルシートで指定します。スタイルシートには、文字間隔を調節するためのプロパティ「letter-spacing」が用意されていて、このプロパティを利用することで、文字と文字の間隔を数値で指定できるようになります。
以下記述方法を記載します。
letter-spacing: normal;（通常の文字間隔）
letter-spacing: 3px;（文字間隔が3ピクセル）
letter-spacing: 0.5em;（文字間隔が0.5文字分）
文字間隔を調節したい場合は、スペースを駆使して調節するのではなく、ぜひ、スタイルシートを使って調節してみて下さい。
Leave a Reply