HTML内でも複数のスペース(空白文字)を連続して入れたい

ウェブページ上に、複数のスペース(空白文字)を連続して掲載したい場合があります。ワープロソフトであれば、スペースキーなどで必要なだけ空白を入れれば良いのですが、ウェブ上ではその方法では望み通りにいかない場合があります。

なぜなら、HTMLソース中に書かれた「半角スペース」・「タブ」・「改行」は、いくつ連続していても「1つ分の空白」として解釈されるからです。HTMLソース中にスペースキーを使って半角スペースを3つ打っても、実際にブラウザ上で表示される空白量は半角スペース1つ分だけです。

※全角スペースの場合は統合されません。全角スペース(=日本語入力機能をONにした状態でスペースキーを打ったときに挿入される幅の広い空白文字)は、連続して打てば打った分だけ空白文字がそのまま表示されます。

ウェブ上でスペース(空白文字)を表示するための文字実体参照

強制的に複数のスペース(空白文字)を連続して表示させたい場合には、「文字実体参照」と呼ばれる「特殊文字を表示させるための特別な記述方法」を使います。

文字実体参照とは、
&」+「特殊文字の名称」+「;
の形で構成される記述方法です。すべて半角文字で記述します。最後の「;」(セミコロン記号)を忘れないように注意して下さい(※nbspの意味は次のページで紹介します)。例えばHTMLソース中に、
 
と記述すると、ブラウザ上では空白文字として表示されます。

文字実体参照「 」を連続して書けば、空白文字が連続表示される

例えば、HTMLソース中に下記のように記述してみて下さい。
半角スペース3つ分を挿入→   しました。
これをブラウザで表示すると、次のように見えます。
半角スペース3つ分を挿入→   しました。
3つ分の半角スペース(空白文字)が挿入されています。

このように、文字実体参照の「 」を使った記述方法なら、半角スペース(空白文字)を必要なだけ連続して表示できます。

半角サイズ以外もある、スペース(空白文字)の種類

文字実体参照によるスペース(空白文字)は、上記でご紹介した「 」だけではありません。それ以外にも、以下のような空白文字が定義されています。
 文字実体参照には 様々な空白文字が 定義されています。
○ 文字実体参照には 様々な空白文字が 定義されています。
○ 文字実体参照には 様々な空白文字が 定義されています。
○ 文字実体参照には 様々な空白文字が 定義されています。
上記のソースを表示させると、次のように見えます。なお、先頭の1行は、比較のために掲載した「文字実体参照を使わずに半角スペースをそのまま打った場合」です。

○ 文字実体参照には 様々な空白文字が 定義されています。(※半角スペース)
○ 文字実体参照には 様々な空白文字が 定義されています。(※ )
○ 文字実体参照には 様々な空白文字が 定義されています。(※ )
○ 文字実体参照には 様々な空白文字が 定義されています。(※ )
○ 文字実体参照には 様々な空白文字が 定義されています。(※ )

最初の「半角スペース」と「 」は同じ幅ですが、それ以降は空白の横幅がそれぞれで異なるのがお分かり頂けるでしょう。

  • 「 」は通常の半角スペースと同じサイズの空白。
  • 「 」はそれより少し広めの空白。
  • 「 」はさらに広めの空白。
  • 「 」は、最初の「 」よりも狭い(細い)空白です。

文字間隔の調整にはスタイルシートを
なお、これらの空白文字は、文字間隔を調整する目的では使わない方が望ましいです。空白文字で文字間隔を調整してしまうと、単語が検索にヒットしなくなったり、読み上げがおかしくなったり、後から間隔を再調整したくなった際に面倒になります。文字間隔を調整したい場合は、スタイルシートを活用しましょう。詳しくは、記事「文字間隔を空白で調節してはダメ! CSSで調節する方法」で解説していますので、ぜひご参照下さい。

空白以外の特殊文字いろいろ
空白文字の表示以外にも文字実体参照は様々な場面で使われます。例えば「&lt;」で「<」記号になったり、「&gt;」で「>」記号になったりします。これらの記号はHTMLソース内では特殊な意味を持つため、文字として表示したい場合には文字実体参照を使う必要があります。

他にも、「&copy;」で著作権記号「©」になったり、「&raquo;」で右向き二重矢印「»」になったり、「&hearts;」でハートマーク「♥」になったりします。このように、たくさんの特殊文字の書き方が用意されています。

空白1文字と、「&nbsp;」1つの違いは……?

さて、スペースキーで打てる半角スペース(空白文字)と、文字実体参照「&nbsp;」で表示される空白文字では、1文字あたりの空白量(横幅)は同じです。前者は複数連続しても「1つ」だと解釈されるのに対し、後者は複数連続すればその分だけ空白が表示されるという違いがあります。しかし、もっと大きな違いもあります。

最後に、「nbsp」の意味も併せて、普通のスペースと「&nbsp;」の違いについてご紹介いたします。