【ホームページ作成】Webで使えるスペース(空白文字)いろいろ

強制的に作るスペース(空白)

HTMLでは、ソース中の「改行」・「タブ」・「(半角)スペース」は、 いくつ連続していても「1つの半角スペース」として解釈されますね。 ソース中で、スペースを3つ打っても、実際にブラウザ上で表示されるスペースは1つ分だけです。
※全角スペースの場合は別。

強制的に複数のスペースを表示させたい場合は、どうしますか？
よく使われる実体参照に、「   」というものがあります。
次のようにして記述します。

これを表示すると、次のようになります。

3つ分のスペースが挿入されていますね。
「   」を使わずに、ただスペース(空白文字)を記述しただけだと、いくつ連続して記述しても 空白は1文字分しか空きません。

スペースや改行・タブは、いくつ連続していても「1つの半角スペース」と解釈されるからです。

このように、実体参照の「   」（＝「non-breaking space」の略）を使うと、 意図的に半角スペースを連続して挿入することができます。

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

「   」は、よく利用されますが、実は実体参照には、他にもスペース(空白文字)が定義されています。

上記のソースを表示させると、次のように見えます。

空白として空く量がそれぞれ異なるのがお分かり頂けるでしょう。

最初の「   」は通常の空白と同じサイズ。「   」はそれより少し広めの空白。 「   」はさらに広め（＝&enspの2倍）の空白。 「   」は細めの空白です。
※「 」以外は、等幅フォントで表示させるとすべて同じ空白量になります。

空白1文字と「 」の違い

普通のスペース（空白文字）と「   」では、1文字あたりの空白量は同じです。 ところが、文章中で使った場合に、大きな違いが1点だけあります。 この問題（仕様）に遭遇することはあまりないでしょうが、違いは覚えておきましょう。

普通のスペースと の違いとは？ >>