初心者向け！HTMLで空白やスペースを入れる方法をご紹介

HTMLでコードを書いている時、空白を入れたいのにうまく入れられなくて困ったことはありませんか？

実は、空白やスペースを入れるにはいくつかの方法があるんです。

そこで今回は、

・半角スペースは無効になる
・HTMLで空白を入れる方法
・CSSで空白を入れる方法

をご紹介します。

思い通りに空白が入れられなくて困っている方は、ぜひ参考にしてみてください。

半角スペースは空白が無効になってしまう

HTMLで文章中に空白を入れたくなった時、空けたいスペース分だけ半角スペースを入力したことがあるかもしれません。

ブラウザではどのように表示されるのか、試しに半角スペースを3つ入力してみましょう。

HTML

表示イメージ

半角スペースを複数入力したのに、1つ分しかスペースが空いていませんね。

このようにいくつ半角スペースを入力しても、ブラウザ上では半角スペース1つ分しか表示されないのです。

HTMLで空白やスペースを入れる方法3つ

では、文章の間に半角スペース1つ分よりも多くの空白やスペースを開けたい場合、どうすればいいでしょうか？その方法を3つご紹介します。

特殊文字を使って空白を入れる

半角スペースを繰り返し入力したい場合は、「 」という特殊記号を使いましょう。「 」を入力した回数だけ、空白が表示されます。

試しに「 」を1回入力した場合と3回入力した場合を比べてみましょう。

HTML

表示イメージ

HTML

表示イメージ

このように、「 」を入力した回数だけ空白が反映されていますね。

全角スペースを使って空白を入れる

半角スペースはいくつ入力してもブラウザ上に表示されませんでしたが、全角スペースを使うと入力した個数分だけブラウザに反映されます。

試しに全角スペース3つを入力してみましょう。

HTML

表示イメージ

ちゃんと文字と文字の間が全角スペース3つ分空いていますね。このように、全角スペースは入力した数だけ画面に反映されるため、感覚的にわかりやすいです。

空白を空けたい分だけスペースキーを押せばいいので、とても簡単な方法ですね。

ただし、後から見た時にどれだけスペースを空けたのかわからなくなってしまいます。意図して入れたものなのか間違って入れたものなのかも判断もしづらいです。

さらに最近ではPCやスマートフォンなど、Webサイトを閲覧するユーザーの環境は様々。見る側の環境によって、全角スペースで確保される空白の幅も異なってきます。

このように、全角スペースで空白を入れる方法はお手軽である反面、管理する時や閲覧するユーザーにとってはあまりいい手段とは言えません。

preタグを使って空白を入れる

<pre>タグを使うと、囲まれた部分に含まれる空白がそのままブラウザに表示されます。半角スペースや改行なども入力したものがそのまま反映されます。

例えば<pre>タグを使った場合、

HTML

表示イメージ

このようにスペースや改行がそのまま反映されます。

ちなみに、<pre>タグは「preformatted text」の略で、「フォーマット（整形）済みのテキスト」という意味になります。

そのため、HTMLソースやプログラムのソースコードをそのまま表示する目的で使われることが多く、使用頻度は低いかもしれません。

CSSを使って空白を入れる方法

ここまでHTMLのみで空白やスペースを入れる方法をご紹介しました。

ただし見た目を調整するという意味で空白を空けたい場合、最もおすすめなのはCSSを使う方法です。

HTMLだけで空白を入れる方法に比べると手間がかかりますが、空白の幅を細かく自由に設定でき、あらゆる環境でも同じように表示できるというメリットがあります。

では実際にどのような表示になるか見てみましょう。

HTML

CSS

表示イメージ

このように、空白を入れたい場所に好きなだけスペースを入れられます。

同じスタイル名を設定しておけば、スペースを空けたい場所の空白を一度に変更することもできます。

まとめ

以上、HTMLで空白を入れる方法について、

・半角スペースはいくつ入力しても1つ分しか反映されない
・HTMLだけで空白を入れる方法3つ
・CSSを使って空白を入れる方法

をご紹介しました。

HTMLでコードを書く中で空白がうまく入れられなくて困った時は、ぜひ参考にしてみてください。