HTMLでの空白文字表示について

こんにちは。すーさんです。

今回はウェブページ内での(半角の)空白文字について、最近調べて分かったことを書いてみたいと思います。
知ってる人にとっては今更な内容だと思いますが、私は今まで知らなかったのでまとめておきます。

これまで、ウェブページで連続して複数の空白文字を表示するときは、昔誰かに「 」を使うと教えられて以来、「 」を使ってきました。
ある日、本文に「 」と表示されているメールを受信しました。これが何を意味する記号なのか分からなかったので調べてみたところ、これも空白文字を表す記号でした。
またこの他にも、「 」、「 」などがあるということが分かりました。

それぞれは、以下のようになります。
・ 
  ノーブレークスペース。通常の半角スペースと同じサイズの空白を挿入できる。
・ 
  en space。”n”字幅の空白で、 よりも少し広め。
・ 
  em space。”m”字幅の空白で、 の2倍。
・ 
   よりも狭い空白。

「 」は自動改行しないスペースとなり、連続して空白文字を表現する場合以外に、英文を改行させたくない場合に使ったりできるようです。

自動改行しないということで今まで困った事はなかったのですが、これから使用する際は少し意識してみようと思いました。

※参考サイト
・HTML内で用いる実体参照による「空白(スペース)」の種類。|Webディレクター視点で語るWeb制作・開発Tipsブログ【Labs to Web】
・All About Web上で使えるスペース(空白文字)いろいろ
・  は半角スペースではないというお話

このブログから情報発信しているUIデザイン専門家集団のホームページ :
フェノメナエンターテインメント株式会社