ホームページ作成

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

特殊文字・記号の記述 (HTML)

更新日：2006年09月22日

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

西村文宏

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

空白1文字と「 」の違い

1つだけ記述する場合、普通にスペース（空白文字）を打った場合と「   」を使った場合とでは、表示のされ方は同じです。空白量が同じですから。
ただ、1点だけ異なる点があります。

HTMLでは、文章がウインドウの端やボックスの端に達すると、自動的に改行されますね。
でも、英語の場合は、英単語の途中では改行されません。単語単位で改行されます。単語の区切りとは「スペース(空白文字)」ですから、直前の空白文字の位置で改行されることになります。

ところが、「   」は、（「nb」が「non-breaking」の略であることからも分かるとおり）この位置での自動改行はされません。
空白量は通常のスペース（空白文字）と同じですが、表示領域の端に達したときの改行動作に違いがあります。

ですから、すべての空白文字を「   」に置き換えて英文を記述すると、まったく改行されない英文になってしまいます。
そんなことをする人はいないでしょうが、「   」と普通の空白との違いとして覚えておきましょう。

※なお、「   」以外の実体参照の空白文字（ &ensp;や&emsp;など）は、普通の空白と同じように自動改行の対象になります。（ただし、FirefoxなどのMozilla系のブラウザでは自動改行されません。）

おわりに

今回は、HTMLで使えるスペース（空白文字）についてご紹介しました。
ソースコードを表示する際のインデントの表現などに活用できるでしょう。
※余白の調整のためには使わないようにしましょう。余白の調整には、スタイルシートのmarginプロパティやpaddingプロパティを使う方が自由自在に調整できます。

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！