【初心者向け】HTMLでスペースを入れる方法｜ の使い方も解説
プログラミング
公開日: 2026/01/26
目次
※この記事にはプロモーションを含みます
はじめに
HTML では、入力した半角スペースがそのまま表示されないことが多く、意図したレイアウトや文章の見やすさに影響する場合があります。
特に初心者は「確かにスペースを入れたはずなのに、画面で見たら詰まっている」という疑問を持ちやすいポイントです。
本記事では、HTML がスペースをどのように扱うのかを理解したうえで、 の使い方や、pre タグ、CSS による制御まで、目的に応じて適切に空白を表現する方法を解説します。
空白の使い方は、読みやすさやデザイン性に直結するため、正しく理解して扱うことが重要です。
HTML におけるスペースの基本
HTML で半角スペースが反映されない理由
HTML では、半角スペースや改行を複数入力しても、ブラウザが連続した空白を 1 つのスペースとしてまとめて処理 します。
これは、文章を整形する際に余分な空白が見た目に影響しないようにするための仕様です。
Hello World↓ 表示結果
Hello Worldこのように半角スペースをたくさん入れても表示結果は 1 個 となります。
この仕組みを理解していないと、意図したレイアウトが崩れたように見える原因となります。
スペースを作る方法
特殊文字の役割と使い方
Web ページでは、通常の文字や記号だけでなく「 特殊文字 （特殊記号）」を使って、特定の記号や空白などを正確に表示することができます。
こうした特殊文字は、HTML の中でそのまま記述して使えます。
たとえば、コピーライト記号（©）や商標（™）、矢印（→）なども HTML では「特殊文字（エンティティ）」として表現します。
特殊文字の中でも、 空白を挿入するための特殊文字 として代表的なものが です。
とは
は 改行されない空白（Non-Breaking Space） を意味します。
半角スペースでは表示されない場合に、確実に空白を挿入できます。
Hello World↓ 表示結果
Hello World他の空白指定との違い
| 記述 | 大きさのイメージ | 用途例 |
|---|---|---|
| 半角スペース 1 つ程度 | 文章のわずかな空白調整 |
  | 半角スペース 2 つ程度 | 見出しなどでやや広い空白を入れたい場合 |
  | 全角 1 文字分程度 | レイアウトでしっかり空白を取りたい場合 |
目的に応じて使い分ける ことで、見栄えが大きく変わります。
コードで空白を保持する方法
pre タグを使う方法
<pre> タグは、入力した 改行・スペースをそのまま表示するタグ です。
コードのサンプル表示などに向いています。
<pre>
Hello World
</pre>↓表示結果
Hello WorldCSS で空白を制御する方法
CSS の white-space プロパティを使うと、空白の扱い方を柔軟に設定できます。
| プロパティ値 | 内容 |
|---|---|
| normal | 連続スペースを 1 つにまとめる（通常） |
| pre | 入力した通りに表示 |
| nowrap | 改行せずに表示 |
下記のように使います。
<p class="text">Hello World</p>.text {
white-space: pre;
}↓ 表示結果
Hello World実用例：文章・レイアウトでの空白調整
文章内のスペースを調整する際のポイント
文章が詰まり過ぎると読みづらくなります。
文中で意味のまとまりを示すために を適切に使うことで、理解しやすい文章になります。
氏名: 山田太郎
レイアウトとして余白を使う場合
レイアウト上の余白を作りたい場合は、HTML で空白を入れるのではなく CSS で margin や padding を設定することが基本です。
- margin（マージン）：要素の 外側 にできる余白で、他の要素との間隔を調整します。
- padding（パディング）：要素の 内側 にできる余白で、内容と枠との間隔を調整します。
よくあるミスと注意点
空白を入れすぎると読みにくくなる問題
文章やレイアウトで空白を多用しすぎると、全体が間延びしてしまい、視線の動きが悪くなる場合があります。
意図的に空白を使うことは重要ですが、 過剰な空白は可読性を損なう点に注意 が必要です。
可読性とデザインをバランス良く保つ方法
・文章中の空白 →
・レイアウトの余白 → CSS
と役割を分けることで、見た目と構造が整理された読みやすいページになります。
まとめ
HTML では、 半角スペースが複数入力されてもそのまま表示されない ため、意図した空白を作るには 、 、 、pre タグ、CSS などの適切な手法を理解して使い分ける必要があります。
文章内の空白とレイアウトとしての余白は役割が異なり、それぞれに適した方法を選ぶことが、読みやすさとデザイン性の両立につながります。
こうした HTML や CSS の正しい使い方を学びたい方には、プログラミングを基礎から学べる WEBMASTERS がおすすめです。
現役エンジニアが伴走しながら、実践的なスキルを習得できるため、初心者でも挫折せずに学習を進めることができます。
