【HTML】半角スペース(空白)を入れる方法をわかりやすく解説

HTMLコードに記述した半角スペースが、Webページ上で表示されなくて困った経験はありませんか?そこで本記事では、HTMLで半角スペースが無効化される理由やスペースを表示する方法について解説しています。

サイト制作に携わるのであれば、一度は経験するトラブルなので、この機会にぜひ理解してしまいましょう。

HTMLで半角スペースは無効になる

HTMLでは、文頭に入力した半角スペースがブラウザの表示上は無効になります。半角スペースの数も関係ありません。
そこで、なぜ半角スペースが無効になるのか、理由について紹介していきましょう。

半角スペースが無効になる理由

HTMLの半角スペースがブラウザ上で無効になる理由は、コード中のインデントを表示させないためです。

HTMLコーディングでは、コードを見やすくするために空白スペースでインデント(字下げ)するのが一般的です。しかし、コードを可読性を高めるために入れた空白スペースをブラウザ出力すると、表示が崩れてしまいます。

そのため、ブラウザが出力する表示結果では、HTMLタグ前後の半角スペースを全て無視します。

HTMLでスペースを入れる方法

HTMLで文頭の半角スペースが無視される理由は、理解してもらえたと思います。

それでは、実際にスペースをブラウザから表示させるには、どうすればいいのかについて、解説していきたいと思います。スペース表示させる方法は、主に3つあります。

  • 特殊文字で半角スペースを記述する
  • preタグを使う
  • 全角スペースを使う

それぞれの方法について詳しく見ていきましょう。

特殊文字で半角スペースを入れる

ブラウザにスペースを出力させる方法で、最も一般的なのが、特殊文字を使う方法です。

HTMLで記号を使う場合、特殊文字という形式で書く必要があります。そして、スペースも特殊文字で書くことができます。半角スペースの場合、「&nbsp」と書きます。それでは、実際の表示結果を見てみましょう。

See the Pen
abZRreY
by sho-go (@sho-go)
on CodePen.

上記のように表示結果にスペースを出力することができました。
ちなみに、「&nbsp」は正確には、「改行しないスペース」を意味します。英文を使うときに少し意味が変わってきますが、基本的に半角スペースを扱う特殊文字だと思って問題ありません。

preタグでスペースを入れる

HTMLでpreタグ内で使っている半角スペースに関しては、ブラウザにもそのまま反映されます。それでは、実際の表示結果を見てみましょう。

See the Pen
dyXgExQ
by sho-go (@sho-go)
on CodePen.

上記のように、コードに書いたスペースが、そのまま表示結果に出力されます。
しかし、preタグは使う機会の少ないタグなので、知っておく程度で良いでしょう。

全角スペースを入れる

ブラウザにスペースを出力させる方法で、最も簡単なのが、全角スペースを使う方法です。日本語入力である全角スペースは、ブラウザでもそのまま表示されます。

ただし、全角スペースは「非推奨」の方法です。コード上の全角スペースは、意図して入力されたものか、半角スペースのつもりで間違って入力されたものか、わかりにくいです。特に、複数人でコーディングする場合には、絶対に避けましょう。

HTMLの連続した半角スペースと改行の扱い

HTMLでは、コード上の文頭半角スペースは全て無視されますが、文字と文字の間にある連続した半角スペースの場合、スペース1つとして扱います。また、改行に関しても、回数に関わらず、スペース1つとして扱います。

それでは、実際の表示結果を見てみましょう。

See the Pen
RwRemXO
by sho-go (@sho-go)
on CodePen.


こちらについても、特殊文字である「&nbsp」を使って対応しましょう。改行はbrタグを使うと良いでしょう。preタグに関しては、文字の間の連続スペースも改行もコードに書いたまま出力されるので、気にする必要はありません。

まとめ

今回は、HTMLコードでスペースを表示させる方法について解説してきました。スペースを表示させる方法はいくつかあるので、自分の使いやすい方法を選ぶと良いでしょう。

今回紹介した、半角スペースが無効になる理由や改行や連続した半角スペースの扱いなどは、HTMLコーディングの基本ともいえる考え方です。しっかりと理解して、今後のサイト制作に役立てましょう。