HTMLで半角・全角スペース（空白文字[ 等]）を活用するための豆知識

htmlで半角・全角スペース（空白文字[ など]）を活用しながら、コンテンツを構築する方法があります。

スペースを使用することによって、ユーザーがコンテンツを読みやすくもなるかと思いますので適宜使用したいですよね？

それでは今回は、htmlで空白行を挿入（改行スペース）する方法や、全角や半角スペースの連続といったスペースを空ける方法ついてご説明したいと思います。

スペースを入れる

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

全角スペースの場合

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

htmlマークアップ例：

半角スペースの場合

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

htmlマークアップ例：

半角スペースの連続（複数）

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

htmlマークアップ例：

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

スペースの幅を調整する

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

スペースキーを使う

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

htmlマークアップ例：

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

文字実体参照を使う

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

htmlマークアップ例：

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

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

半角・全角スペース（空白文字）の文字実体参照[特殊文字・記号・文字コード]について

htmlで半角・全角スペース（空白文字）の文字実体参照[特殊文字・記号・文字コード]には、以下のようなものがあります。

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

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

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

htmlで空白行を挿入（改行スペース）

htmlで空白行を挿入（改行スペース）するには、「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タグ

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

htmlマークアップ例：

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

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

htmlマークアップ例：

全角スペースの問題

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

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

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

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

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

「margin／padding」を使う

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

css記述例：

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

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

まとめ

ということで今回はhtmlでスペースを表現するための方法についてご説明しましたが、基本はcssで余白を設定して、必要があれば半角・全角スペース（空白文字[ 等]）を使ってコンテンツを構築しましょう。

コンテンツの質を上げ、サイトの価値を高めながら、SEO対策で上位化を目指すことが重要です。

関連記事SEO対策とは？SEOの対策ポイントについて