初心者向け！HTMLで空白やスペースを入れる方法をご紹介 byウェブカツ

HTMLでコードを書いている時、空白を入れたいのにうまく入れられなくて困ったことはないだろうか。

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

そこで今回は、

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

を紹介する。

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

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

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

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

HTML

html

<p>この文章の間に 半角スペース3つを入れました</p>

表示イメージ

この文章の間に 半角スペース3つを入れました

半角スペースを複数入力したのに、1つ分しかスペースが空いていないのがわかる。

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

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

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

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

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

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

HTML

html

<p>この文章の間に&nbsp;半角スペース1つを入れました</p>

表示イメージ

この文章の間に 半角スペース1つを入れました

 

HTML

html

<p>この文章の間に&nbsp;&nbsp;&nbsp;半角スペース3つを入れました</p>

表示イメージ

この文章の間に   半角スペース3つを入れました

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

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

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

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

HTML

html

<p>この文章の間に　　　全角スペース3つを入れました</p>

表示イメージ

この文章の間に　　　全角スペース3つを入れました

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

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

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

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

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

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

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

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

HTML

html

<pre>
この文章の間に 半角スペース3つを入れました
この文章の間に　　　全角スペース3つを入れました
</pre>

表示イメージ

この文章の間に   半角スペース3つを入れました
この文章の間に　　　全角スペース3つを入れました

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

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

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

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

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

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

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

では実際にどのような表示になるだろうか。

HTML

html

<p>この後に<span class="space">スペースを空けたい</span></p>

CSS

css

.space{
margin-left:20px;
}

表示イメージ

この後に　スペースを空けたい

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

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

まとめ

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

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

を紹介した。

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

---

かずきち

プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。

【ウェブカツ公式WEBサイト】
https://webukatu.com/