文字と文字の間隔を調節したい場合なぜスペース(空白文字)で調節してはいけないのか?

文字と文字の間隔を調節したい場合どうしてる?

ホームページやブログで文字と文字の間にスペース(空白文字)を挿入することで位置調節するのは、あまり良い方法とは言えません。

では、なぜスペース(空白文字)で調節してはいけないのか?

ワープロソフトや表計算ソフトを使用している場合、文字と文字の間隔を空けたいと思ったら、おそらく文字と文字の間にスペース(空白文字)を挿入するでしょう。
ウェブ上でもそれと同じようにスペースで調節したくなる場合も多いでしょう。しかし、スペース(空白文字)で調節した場合、3つの問題が発生します。

  1. 検索にヒットできなくなる
  2. 音声ブラウザの読み上げがおかしくなる
  3. 必ずしも望み通りの間隔が開くとは限らない

検索にヒットできなくなる

文字間隔をスペース(空白文字)で調節してしまうと、検索にヒットできなくなる問題があります。
スペースを入れてしまう事で単語としての意味をなさなくなり、検索結果として表示されない場合があります。

音声ブラウザの読み上げがおかしくなる

文字間隔をスペース(空白文字)で調節してしまうと、音声ブラウザでの読み上げがおかしくなる問題もあります。

視力弱者が音声ブラウザと利用したときにスペースで調整してしますとやはり単語としてでなく、個々の文字として認識してしまい、結果意味のなさない読み上げとなってしまいます。

必ずしも望み通りの間隔が開くとは限らない

文字間隔をスペース(空白文字)で調節する方法だと、望み通りの間隔(空間)を空けられるとは限らない問題もあります。

フォントサイズは閲覧者の環境によって異なりますので、「半角スペース」や「全角スペース」が具体的に何ピクセルの間隔になるのかは一定ではありません。
ピクセル数のように絶対的な値でなく、「標準の文字サイズに対してどれくらいの割合で空けばよい」という相対的な指定で構わない場合でも、「半角スペース」や「全角スペース」がどれくらいの横幅になるかは、表示に使われるフォントや環境などによって異なります。つまり、スペース(空白文字)で文字間隔を調節したとしても、自分のデザイン通りに見えるのは、自分の使っている環境のみである可能性が高いということです。

スペースを使わずにどうやって文字間隔を調節するの?

スタイルシートで指定します。スタイルシートには、文字間隔を調節するためのプロパティ「letter-spacing」が用意されていて、このプロパティを利用することで、文字と文字の間隔を数値で指定できるようになります。

以下記述方法を記載します。

letter-spacing: normal;(通常の文字間隔)

letter-spacing: 3px;(文字間隔が3ピクセル)

letter-spacing: 0.5em;(文字間隔が0.5文字分)

文字間隔を調節したい場合は、スペースを駆使して調節するのではなく、ぜひ、スタイルシートを使って調節してみて下さい。

 

About Ken 327 Articles
有限会社ナセバーナルの代表取締役

Be the first to comment

Leave a Reply

Your email address will not be published.


*