HTML内で用いる実体参照による「空白(スペース)」の種類。

HTML内で記号などを用いるとき、使用されるのが「実体参照」と呼ばれるもの。

例えば、「ダブルクオテーション」を表現するに当たり、直接「"」と記述できない場合、「"」という記号を書いてあげることで置換してくれます。

今回は「空白(スペース)」を表現するための実体参照について見てみます。

半角スペースの表現色々

半角スペースをHTML内で表現する際に何も考えずに行うと、ソース上で2つ以上連続させても、1つ分しか空白が空かないはずです。

そんなときに「実体参照」を用います。

 
no-break space
通常の空白(半角スペース)と同じサイズ。
 
en space
"n"字幅の空白
 
em space
"m"字幅の空白( の2倍)

個別に見ていきます。

半角スペースを表現する「 」

まずは半角スペース1つ分を作る際の実体参照。

2つ分「  」のスペースです。

実際に書いてみるとこんな感じですね。

2つ分「  」のスペースです。

"n"字幅の空白「 」

次は、少し間隔の広いスペースを空ける場合に利用する実体参照「 」です。

これは"n"字幅の分だけ空白を空けてくれます。

「n」の字の幅の分だけ 空きます。

実際にやってみるとこんな感じです。

「n」の字の幅の分だけ 空きます。

"m"字幅の空白「 」

次はさらに幅が広がり、"m"字の分だけスペースが作られます。

「m」の字の幅の分だけ 空きます。

こんな感じになります。

「m」の字の幅の分だけ 空きます。

「全角のスペース」分と捉えてもOKです。

「 」の注意点『改行されない』

半角スペース1つ分の余白を持たせる実体参照「 」ですが、1つ注意点があります。

というのが、スペースが途中にない連続した半角英数字の場合、HTMLの仕様上、ボックスからはみ出た際も改行されないのですが、「 」をスペースとして利用した際も、略さずに表記した「no-break space」の通り、改行されないことになります。

めったに困る現象ではないと思いますが、念のため確認しておきましょう。

関連するWeb制作・開発Tips

関連リンク