HTML でスペースを表す - と各種スペース文字の使い分け
HTML では連続する半角スペースが 1 つに縮小されるため、意図どおりの空白を表示するにはエンティティを使う必要があります。この記事では をはじめとする各種スペース文字の使い方を整理します。
なぜスペースが消えるのか
HTML のレンダリングエンジンには「ホワイトスペースの折りたたみ」というルールがあります。ソースコード上でスペースを何個書いても、ブラウザは連続する空白を 1 つにまとめて表示します。
<p>Hello World</p>このように半角スペースを 6 個入れても、ブラウザの表示は Hello World のように 1 つ分のスペースしか表示されません。改行やタブも同様に 1 つの空白として扱われます。
この仕様は HTML が文書構造を記述する言語として設計されているためです。ソースの見た目と表示結果を分離することで、インデントや改行を自由に入れてもレイアウトが崩れないようになっています。
の基本
最もよく使われるスペース文字が （Non-Breaking Space）です。名前のとおり「改行しないスペース」という意味を持っています。
<p>Hello World</p>この場合、3 つ分のスペースがそのまま表示されます。 には 2 つの特徴があります。
通常の半角スペースと違い、連続して書いても 1 つにまとめられることがありません。書いた数だけ空白が表示されます。
で結ばれた単語の間では自動改行が発生しません。2 つの単語をひとかたまりとして扱いたいときに便利です。
たとえば 100 km と書くと、100 と km の間で改行されることを防げます。数値と単位のように、途中で切れると読みにくくなる箇所に適しています。
幅が異なるスペース文字
以外にも、HTML では幅の異なるスペース文字をエンティティで指定できます。
| エンティティ | 名前 | 幅の目安 |
|---|---|---|
| | No-Break Space | 通常の半角スペースと同じ |
|   | En Space | 文字サイズの半分 |
|   | Em Space | 文字サイズと同じ |
  は活字組版における「en」の幅に相当し、  は「em」の幅に相当します。em は現在のフォントサイズと同じ幅なので、font-size が 16px なら   も 16px 分の空白になります。
<p>A B C</p>A と B の間が en 幅、B と C の間が em 幅で表示されます。文章の字下げやラベルの位置揃えなど、微妙な空白調整をしたいときに役立ちます。
さらに細かいスペース文字
Unicode にはもっと細かい幅のスペースも定義されており、HTML の数値参照で使用できます。
| 数値参照 | 名前 | 幅の目安 |
|---|---|---|
|   | Thin Space | em の約 1/6 |
|   | Hair Space | 最も狭い空白 |
|   | Figure Space | 数字 1 文字分 |
Thin Space は括弧の内側やスラッシュの前後など、わずかな余白がほしい場面で使われることがあります。Figure Space は数字と同じ幅を持つため、数値を縦に揃えたいときに便利です。
ただし、これらの細かいスペースはブラウザやフォントによって表示が異なる場合があるため、一般的な Web 制作では 、 、  の 3 つを押さえておけば十分でしょう。
CSS で空白を制御する方法
エンティティを並べて空白を作るのは手軽ですが、レイアウトの調整には CSS を使うほうが適切です。
手軽だが、幅の微調整が難しい。数値と単位の間など、意味的に改行を防ぎたい場面に向いている。
margin、padding、text-indent などで正確な幅を指定できる。レイアウト目的の空白にはこちらが適切。
たとえば段落の字下げは   を先頭に置くよりも、text-indent を使うほうが保守性に優れています。
<p class="indent">これは text-indent で字下げした段落です。エンティティを使わなくても、CSS だけで先頭の空白を制御できます。</p>
<p class="entity"> これは &emsp; で字下げした段落です。見た目は似ていますが、幅の調整がしにくくなります。</p>.indent {
text-indent: 1em;
margin-bottom: 8px;
}
.entity {
margin-bottom: 8px;
}
p {
font-size: 15px;
line-height: 1.6;
}また、ソースコード上の空白をそのまま表示したい場合は white-space プロパティが使えます。
pre {
white-space: pre;
}white-space: pre を指定すると、HTML のホワイトスペース折りたたみが無効になり、ソースに書いたスペースや改行がそのまま反映されます。<pre> タグにはこの指定がデフォルトで適用されています。
使い分けのまとめ
目的に応じて適切な方法を選ぶことが大切です。
数値と単位（100 km）や人名（山田 太郎）など、途中で切れると読みにくい箇所に を使います。
 （半角幅）や  （全角幅）を使えば、決まった幅の空白を挿入できます。
margin、padding、text-indent など CSS のプロパティを使います。見た目の調整にエンティティを並べるのは避けましょう。
white-space: pre や <pre> タグを使います。コードブロックの表示に適しています。
スペースのエンティティは便利ですが、レイアウト目的で を大量に並べるのはアンチパターンとされています。意味的な空白にはエンティティを、見た目の調整には CSS を、という使い分けを意識すると、保守しやすい HTML が書けるようになります。
