HTMLコードに記述した半角スペースが、Webページ上で表示されなくて困った経験はありませんか？そこで本記事では、HTMLで半角スペースが無効化される理由やスペースを表示する方法について解説しています。
サイト制作に携わるのであれば、一度は経験するトラブルなので、この機会にぜひ理解してしまいましょう。
目次
HTMLで半角スペースは無効になる
HTMLでは、文頭に入力した半角スペースがブラウザの表示上は無効になります。半角スペースの数も関係ありません。
そこで、なぜ半角スペースが無効になるのか、理由について紹介していきましょう。
半角スペースが無効になる理由
HTMLの半角スペースがブラウザ上で無効になる理由は、コード中のインデントを表示させないためです。
HTMLコーディングでは、コードを見やすくするために空白スペースでインデント（字下げ）するのが一般的です。しかし、コードを可読性を高めるために入れた空白スペースをブラウザ出力すると、表示が崩れてしまいます。
そのため、ブラウザが出力する表示結果では、HTMLタグ前後の半角スペースを全て無視します。
HTMLでスペースを入れる方法
HTMLで文頭の半角スペースが無視される理由は、理解してもらえたと思います。
それでは、実際にスペースをブラウザから表示させるには、どうすればいいのかについて、解説していきたいと思います。スペース表示させる方法は、主に3つあります。
- 特殊文字で半角スペースを記述する
- preタグを使う
- 全角スペースを使う
それぞれの方法について詳しく見ていきましょう。
特殊文字で半角スペースを入れる
ブラウザにスペースを出力させる方法で、最も一般的なのが、特殊文字を使う方法です。
HTMLで記号を使う場合、特殊文字という形式で書く必要があります。そして、スペースも特殊文字で書くことができます。半角スペースの場合、「 」と書きます。それでは、実際の表示結果を見てみましょう。
See the Pen
abZRreY by sho-go (@sho-go)
on CodePen.
上記のように表示結果にスペースを出力することができました。
ちなみに、「 」は正確には、「改行しないスペース」を意味します。英文を使うときに少し意味が変わってきますが、基本的に半角スペースを扱う特殊文字だと思って問題ありません。
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.
こちらについても、特殊文字である「 」を使って対応しましょう。改行はbrタグを使うと良いでしょう。preタグに関しては、文字の間の連続スペースも改行もコードに書いたまま出力されるので、気にする必要はありません。
まとめ
今回は、HTMLコードでスペースを表示させる方法について解説してきました。スペースを表示させる方法はいくつかあるので、自分の使いやすい方法を選ぶと良いでしょう。
今回紹介した、半角スペースが無効になる理由や改行や連続した半角スペースの扱いなどは、HTMLコーディングの基本ともいえる考え方です。しっかりと理解して、今後のサイト制作に役立てましょう。
