文字と文字の間隔を調節したい場合に、空白文字を使ってはダメ

文字の間隔を調節したい

文字の間隔を調節したい

文字と文字の間隔を調節したいと思ったことはありませんか? 「見出し」を作る際などで、「広いスペースに短い文字をバランスよく表示させたい!」と思ったことはありませんか?

そのような、「文字と文字の間隔を広げたい」場合に、文字と文字の間にスペース(空白文字)を挿入することで調節しているなら、良い方法とは言えません。

今回は、空白文字で調節してはいけない理由と、細かく文字間隔を調節する方法をご紹介致します。

なぜ空白文字で調節してはいけないのか

ワープロソフトを使用している場合、文字と文字の間隔を広げたいと思ったら、文字と文字の間にスペース(空白文字)を挿入するでしょう。 ウェブ上でもそれと同じように空白文字で調節したくなる方々もいらっしゃるかもしれません。しかし、それには以下の3つの問題点があります。


また、後から間隔を再調整したくなった際に、すべての空白文字を再度打ち直すのは非常に手間が掛かってしまう問題もあります。

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

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

文字間隔をスペース(空白文字)で調節してしまうと、検索にヒットできなくなる問題があります。

例えば、見出しとして「今日の日記」という5文字を表示させ、それらの間隔を広げるべく、文字と文字の間に半角スペースを入れて、 「 今 日 の 日 記 」と記述したとしましょう。

ここで、「日記」という単語で検索する場合を考えます。このページ内に存在するのは「日」と「記」という独立した文字であって、「日記」という単語ではありません。したがって、「今日の日記」という見出しは、「日記」という検索語ではヒットしないことになってしまいます。見出しが検索でヒットしないというのは、少々困りますね。

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

正しく読み上げられなくなる

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

先ほどと同じように「今日の日記」を(文字間に空白文字を入れて)「 今 日 の 日 記 」と記述したとしましょう。

すると、音声ブラウザは、「きょうのにっき」とは読まずに、「いま・ひ・の・ひ・き」などのように読んでしまう可能性があります。空白文字で単語が分断されてしまったために「単語」とは認識できず、独立した1つ1つの文字としてそのまま読んでしまうわけです。これでは、何が書かれているのかさっぱり分かりません。

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

フォントサイズはアクセス者によって異なります。ですから、「半角スペース」や「全角スペース」が具体的に何ピクセルの間隔になるのかは、アクセス環境によって異なります。 ピクセル数のように絶対的な値でなく、「標準の文字サイズに対してどれくらい開けばよい」という相対的な指定で構わない場合でも、 半角スペースや全角スペースがどれくらいの横幅になるかは、フォントや環境によって異なります。

つまり、空白文字で文字間隔を調節したとしても、自分のデザイン通りに見えるのは、自分の使っている環境のみである可能性もあるということです。 これでは、「見やすくする」ために広げたのに、逆に見にくくなってしまう環境も存在するかも知れないことになります。 それでは困りますね。

文字間隔は、スタイルシートを使って調節する

さて、スペース(空白文字)で文字間隔を調節してはいけない理由はお分かりいただけたと思います。それでは、どうやって文字間隔を調節すれば良いでしょうか。そこで便利なのが、CSS(スタイルシート)です。CSSには、文字間隔を調節するための「letter-spacing」というプロパティが用意されています。

それでは次のページで、文字間隔を調節できるletter-spacingプロパティの記述方法を見てみましょう。