ホームページ作成/特殊文字・記号の記述 (HTML)

Web上で使えるスペース(空白文字)いろいろ

ウェブページ内で空白文字(スペース)を連続表示させる方法を解説。HTML中では、スペースキーで半角の空白文字を連続して打っても、表示される空白は1つだけです。「 」などの「文字実体参照」という特殊な記述方法を使うことで、複数の連続した空白が入れられます。

この記事の担当ガイド

Web作成が楽しくなるお手伝い。分かりやすい解説を探求するWeb職人

  • このエントリーをはてなブックマークに追加

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

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

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

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

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

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

文字実体参照は、
&」+「特殊文字の名称」+「;
の形で構成され、
 
と記述すると、空白文字になります。すべて半角文字で記述します。最後の「;」(セミコロン記号)を忘れないように注意して下さい(※nbspの意味は次のページで紹介します)。

空白以外の特殊文字いろいろ
空白以外にも、「&lt;」で「<」記号になったり、「&gt;」で「>」記号になったりします。これらの記号は、HTMLソース内では特殊な意味を持つので、文字として表示したい場合には、このように文字実体参照を使う必要があります。他にも、「&copy;」で著作権記号「©」になったり、「&raquo;」で右向き二重矢印「»」になったり、「&hearts;」でハートマーク「♥」になったりします。このように、たくさんの特殊文字の書き方が用意されています。

文字実体参照「&nbsp;」を連続して書けば、空白文字が連続して表示

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

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

他にもあるスペース(空白文字)の種類

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

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

それぞれ、空白の横幅が異なるのがお分かり頂けるでしょう。

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

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

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

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

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

更新日:2014年06月09日

(公開日:2006年09月22日)

あわせて読みたい

    この記事を読んで良かったですか?

    良かった

    7

    この記事を共有する