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

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

空白スペース(空白文字)を連続して表示させる方法を、わかりやすく解説します。HTML中で「 」という実体参照を使う方法のほか、それ以外の方法もご紹介します。

この記事の担当ガイド

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

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

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

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

半角スペース3つ分を挿入→   しました。

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

半角スペース3つ分を挿入→   しました。

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

半角スペース3つを挿入→ できていません。

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

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

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

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

 実体参照には 様々な空白文字が 定義されています。
 実体参照には 様々な空白文字が 定義されています。
 実体参照には 様々な空白文字が 定義されています。
 実体参照には 様々な空白文字が 定義されています。

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

 実体参照には 様々な空白文字が 定義されています。
 実体参照には 様々な空白文字が 定義されています。
 実体参照には 様々な空白文字が 定義されています。
 実体参照には 様々な空白文字が 定義されています。

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

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

空白1文字と「 」の違い

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

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

更新日:2006年09月22日

あわせて読みたい

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

    良かった

    4

    この記事を共有する