空白文字とは？コピペで使う簡単なやり方など徹底紹介！

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

一方、空白文字を不適切に扱えば、コンテンツが認識しづらくなります。
具体的には、単語の間や文節のたびに文字実体参照コードの「 」で半角スペースを挿入したり、全角スペースを挿入します。
この場合、ユーザーがスムーズに文章を読めなかったり、検索エンジンがタイトル名や文章内のキーワード、文脈を誤って認識する可能性が高まります。
結果、コンテンツの品質が下がるので、Googleから評価されづらくなるというわけです。

こうした良くない状況を回避する為に、空白文字を適切に使って、コンテンツの品質を保ちましょう。

この点踏まえて、今回は、空白文字の定義やコピペ用、具体的な使い方など中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。

空白文字とは？

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

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

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

文字実体参照（特殊文字・記号・文字コード）の空白文字の種類

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

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

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

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

空白文字一覧【コピペ用】

空白文字が今すぐに使えるように一覧表示してます。
お好みのパターンの空白文字をコピペ（コピー＆ペースト）してお使いください。

半角スペースの空白文字一覧

半角スペースの空白文字は、スペースキーで打ち込んでも無視されたり、打ち込んだ分表示されません。
なので、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対策で上位化を目指すことが重要です。