空白文字とは？適切な使い方など徹底解説！

空白文字とは、文字と文字の間や、行頭などに余白を入力するための文字のことです。
この空白文字は、キーボードでスペースキーやTabキーを打ち込んだり、文字実体参照の専用コードをHTMLでマークアップすることで表示できます。

空白文字をうまく使用すれば、コンテンツが読みやすくなります。
そうなれば、ユーザビリティが向上して、Googleに評価されやすくなるので、その分SEO効果も期待できるでしょう。

この点踏まえて、今回は、空白文字の定義や使い方ついて中心に、初心者にもわかりやすくポイントをまとめてご説明したいと思います。

空白文字とは？

空白文字とは、文字と文字の間や、行頭などに余白を入力するための文字のことです。
この空白文字は、キーボードでスペースキーやTabキーを打ち込んだり、文字実体参照の専用コードをHTMLでマークアップすることで表示できます。

ちなみに、文章と文章（段落）の間隔をあける際は、一般的に空白文字を使用しません。
例えば、BRタグを使った改行スペースで、空白行を挿入することができます。 もしくは、Pタグでマークアップした文章に、cssのmarginやpaddingを効かせて、文章と文章の間隔を調整します。

このように、空白文字は、場面に応じて使い分けることが一般的となります。

• 文字実体参照（特殊文字・記号・文字コード）の空白文字について

文字実体参照（特殊文字・記号・文字コード）の空白文字について

文字実体参照（特殊文字・記号・文字コード）の空白文字には、以下のようなものがあります。

•   ⇒ 無視・改行されない空白（スペースキーの半角スペースと同じ広さ）
•   ⇒ 「 」より少し広い空白スペース
•   ⇒ 「 」より広い空白スペース
•   ⇒ 「 」より狭い空白スペース

HTMLの特殊文字コード「 」は、文字実体参照であり、一般的に半角スペースの表示に使われることが多いようです。

スペースキーを使った半角スペースは、無視されたり、打ち込んだ分表示されません。
なので、文字実体参照「 」で空白（半角スペース）を表示しましょう。

空白文字の使い方について

空白文字を使うには、単純にスペースキーでスペースを入れます。
また、文字実体参照を使うことでも、空白文字を挿入することができます。
ですが、半角スペースと全角スペースをそれぞれ複数回打ち込んだ時に、ブラウザ上での表示が異なったりします。

なので、空白文字の表示方法をうまく使い分けて、思い通りに表示できるようにあらかじめポイントを押さえましょう。

• スペースキーで全角スペースを入れる
• 文字実体参照「 」を使用して半角スペースを入れる
• 空白（スペース）の幅を調整する
• 空白行を挿入する（改行スペースを入れる）
• 空白（スペース）を詰める

スペースキーで全角スペースを入れる

スペースキーで全角の空白を入れることで、打ち込んだ分そのままブラウザに反映されて表示されます。

htmlマークアップ例：

文字実体参照「 」を使用して半角スペースを入れる

半角スペースの場合は全角とは違い、スペースキーで打ち込んでも無視されるので、文字実体参照「 」を使用して空白を表示しましょう。

htmlマークアップ例：

また、htmlの半角スペースを連続（複数）させるには、通常cssで値を設定する方法が一般的ですが、以下のように文字実体参照「 」を利用することで取り急ぎ修正する場合などに使うと良いかもしれません。

htmlマークアップ例：

point!!このように全角スぺースは、スペースキーを打ち込んだ分だけそのまま空白表示されますが、半角スペースの場合、打ち込んだ分だけ表示されないため文字実体参照「 」を利用して空白を表示します。

スペースの幅を調整する

htmlで空白（スペース）の幅を調整するには、以下のような方法があります。

• スペースキーで全角スペースを複数回打ち込む
• 文字実体参照の空白文字を複数回マークアップする

スペースキーで全角スペースを複数回打ち込む

全角文字に限定されますが、スペースキーを打ち込んで、htmlで空白（スペース）幅を調整する。

htmlマークアップ例：

スペースキーで全角スペース6回打ち込むとこのくらいの幅に調整できます。

文字実体参照の空白文字を複数回マークアップする

文字実体参照については後述しますが、「 」「 」「 」「 」を使用して半角スペースを表現し、htmlで空白（スペース）の幅を調整する方法があります。

htmlマークアップ例：

文字実体参照の「 」を4回マークアップすると、スペースキーで半角スペース4回打ち込んだ幅に調整できます。

先述しましたが、スペースキーで半角スペースを使うと、無視されたり、打ち込んだ分反映されないため、文字実体参照の「 」を活用します。

空白行を挿入する（改行スペースを入れる）

空白行を挿入（改行スペース）するには、HTMLタグの「BRタグ」か「cssのmargin／padding」を使って表現することが可能です。

• BRタグを使う
• cssのプロパティ「margin／padding」を使う
• 空白行の高さを調整する

BRタグを使う

BRタグで改行することで、空白行が挿入されます。

htmlマークアップ例：

cssのプロパティ「margin／padding」を使う

また、改行ではなくcssのプロパティ「margin」もしくは「padding」で上下に余白スペースを指定し、htmlで空白行を表現することも可能です。

htmlマークアップ例：

marginプロパティで上下の余白スペースを表現するには、「margin-top」「margin-bottom」を使い、paddingの場合は「padding-top」「padding-bottom」を使います。

余白は「margin:10px 2px 5px 4px; /*上 右 下 左*/」のようにまとめて指定することもできます。
また、「margin:10px 5px; /*上下 左右*/」といったように上下、左右と同じ数字を指定する場合は省略することもできます。

空白行の高さを調整する

htmlで空白行を挿入（改行スペース）して高さを調整するには、BRタグで複数改行したり、cssのmargin／paddingで高さを調節します。

• BRタグで複数改行する
• cssのプロパティ「margin／padding」で高さを調整する

BRタグで複数改行する

BRタグで複数改行することで、空白行が挿入され、その改行の数に応じて高さを調整することができます。

htmlマークアップ例：

cssのプロパティ「margin／padding」で高さを調整する

cssのプロパティ「margin」もしくは「padding」で上下に余白スペースを指定し、空白行を表現することで、高さの調整が可能です。

htmlマークアップ例：

空白（スペース）を詰める・削除する

htmlで空白（スペース）を詰める・削除するには、以下のような方法があります。

• cssのプロパティ「margin／padding」で0値を指定する

cssのプロパティ「margin／padding」で0値を指定する

cssのプロパティのmargin／paddingで0値を指定し、空白（スペース）を詰める・削除する。

css記述例：

bodyタグに、margin／paddingに0値をしてする方法はよく使われる手法です。
これはブラウザによって仕様が異なり余白にばらつきをなくすために指定するものが一般的です。

もう少し言うと、htmlの全角スペースの問題として浮き上がるのが、ブラウザによって表示のされ方が異なるという点です。

例えば、widthで横幅指定したコンテンツに全角スペースを複数入れると、10個目や11個目のスペースで折り返されたりと、ブラウザごとに異なった表示が発生します。
また、末尾に全角スペースを入れた場合も、IEブラウザのみで異なる表示が発生するようです。

このような問題は、cssの「margin／padding」プロパティを活用し、スペース（余白空白）を処理することで解消できるでしょう。

ちなみに、bodyタグ以外のhtmlタグでも、空白（スペース）を詰める・削除するときに「margin／paddingに0値指定」が有効なので、大いに活用しましょう。

まとめ

スペースをあけるときに、空白文字の多用は避けましょう。
基本はcssで余白を設定して、必要があれば空白文字を使ってコンテンツを構築することがおすすめです。

ユーザーにとって利便性の高いコンテンツに仕上げて、サイトの価値を高めながら、SEO対策で上位化を目指すことが重要です。