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

HTMLでテキスト間の余白を微調整する場面は、文字の間隔を広げたりインデントを追加したりするなど、Webページ制作の過程で頻繁に発生します。ブラウザ上に意図した通り空白を表示させる手段でよく使われるのが「特殊文字の入力」で、レイアウトの崩れを防ぎながら空白を表現する仕組みです。

この記事では、HTMLで半角スペースを入れる基本的な使い方を解説していきます。複数の空白を正しく表示させるための特殊文字の違いや特定のタグを活用したテクニックなど、サンプルコード付きで解説していきますので、ぜひ参考にしてください。

HTMLのソースコード内でスペースキーを複数回入力しても、ブラウザの表示では1つの空白にまとめられてしまう仕様です。そのため、複数の半角スペースを思い通りに入力するには専用の手法を使います。

公式のドキュメントでは、次のように説明されています。

Sequences of white space are collapsed. Newline characters in the source are handled the same as other white spaces.

出典:MDN Web Docs

連続する余白を表示させるには、特殊文字による文字実体参照や特定のタグを活用するのが一般的です。ここからは、それぞれの記述方法と特徴を順番に解説していきます。

特殊文字（ ）を使う

HTML上で半角スペースの表示によく使われるのが、ノーブレークスペースと呼ばれる特殊文字です。通常の半角スペース（U+0020）とは異なるU+00A0の文字であり、本来の役割はその位置での改行を防ぐことにあります。

特殊文字を用いて半角スペースを挿入するコードは、以下の通りです。

<p>HTMLと&nbsp;&nbsp;&nbsp;CSS</p>

上記のコードでは、 を3回連続で記述し、テキスト間に3つ分の空白を意図的に作成しています。この位置で自動的な改行が発生することはありませんが、これは見た目の空白確保ではなく改行防止という本来の機能によるものです。

改行を防ぐ必要がない単純な余白調整の目的でこの特殊文字を多用すると、不要な改行不可箇所を作ってレイアウトが崩れる原因となるため注意が必要です。幅の確保だけが目的の場合は、CSSのwhite-spaceプロパティやレイアウト用CSSを優先して選びます。

他の文字実体参照を使う

ノーブレークスペース以外にも、フォントサイズを基準とした比率で空白の幅を指定できる文字実体参照が存在します。日本語の半角・全角文字幅を厳密に表すものではなく、目安となる比率で余白を調整する際に、使い分けるのが基本です。

幅の異なる文字実体参照を活用して空白を入れるコードは、以下の通りです。

<p>半角幅の&ensp;スペース</p>
<p>全角幅の&emsp;スペース</p>

上記のコードでは、 で概ね0.5em、 で概ね1emを基準とした幅の空白をそれぞれ挿入しています。フォントサイズに比例した余白ですが、実際の表示幅はフォントやCSSの設定によって、変わる点に注意が必要です。

これらの特殊な空白文字は、単語間の間隔を微調整したい場面で役立つ手法です。ただし、適切なマークアップを保つためには、テキストの意味的な区切りでのみ使用するのが望ましいでしょう。

preタグを使う

ソースコード内で入力したスペースや改行を、そのままブラウザ上に反映させたい場合は特定のタグで囲みます。このタグを使用すると、連続した半角スペースが1つの空白に圧縮される標準の仕様を無効化できます。

入力した空白をそのまま画面に表示させるコードは、以下の通りです。

<pre>
HTMLで    複数の    半角スペースを
そのまま    表示します。
</pre>

上記のコードでは、<pre>タグの内部に記述された空白や改行がブラウザの既定表示でそのまま保持されます。既定では等幅フォントが適用されますが、CSSでwhite-spaceやfont-familyを指定すると表示は上書きされるため、最終的な見た目は適用スタイルに依存する点に留意が必要です。

文章の途中でこのタグを使用すると、デザイン全体が不自然になる場合があります。そのため、通常のテキストの余白調整ではなく、ソースコードの提示など書式を保持したい場面に限定するのが適切な使い方と言えます。

HTMLでレイアウトを整える際は、半角スペースの連続入力ではなく、CSSを用いて適切な余白を設定するのが基本です。

余白を調整する各プロパティの違いは、以下の通りです。

それぞれの特徴を把握し、目的に応じてmargin・padding・white-spaceを適切に使い分けることで、意図した余白のレイアウトを実現できます。

CSSのmarginプロパティで調整する

要素の外側に余白を作りたい場合は、CSSのmarginプロパティを使用します。隣接する要素との間隔を広げる際に適した設定です。

marginプロパティの基本的な記述方法は、以下の通りです。

<style>
  .box {
    margin: 20px; /* 上下左右に20pxの余白を設定 */
  }
</style>

<div class="box">外側に余白ができます</div>

上記のコードでは、marginプロパティに1つの数値だけを指定することによって、要素の上下左右に20pxの外側の余白を一括してまとめて設定しています。

上下方向だけ、あるいは左右方向だけのように、特定の方向を指定して余白を個別に設定することも可能なのが特徴です。

CSSのpaddingプロパティで調整する

要素の枠線から内側のコンテンツまでの間に余白を作りたい場合は、paddingプロパティを使用します。背景色を設定した要素の内側を広げたい場面でよく使われる指定です。

paddingプロパティの使い方は、以下の通りです。

<style>
  .box {
    padding: 15px; /* 内側に15pxの余白を設定 */
    background-color: #f0f0f0;
  }
</style>

<div class="box">内側に余白ができます</div>

上記のコードでは、paddingプロパティに1つの数値だけを指定し、要素の内側に15pxの余白を確保することによって、背景色とテキストとの間にゆとりのある見やすい空間を作り出しています。

marginプロパティと同様に、paddingプロパティも上下左右の余白量をそれぞれ個別に指定でき、細かなレイアウトの微調整に役立つ設定です。

CSSのwhite-spaceプロパティで調整する

HTMLファイル内で連続する半角スペースや改行をそのまま画面に反映させたい場合は、white-spaceプロパティを使用します。テキスト間の空白を柔軟に制御できる手法です。

white-spaceプロパティの設定方法は、以下の通りです。

<style>
  .text-space {
    white-space: pre-wrap;
  }
</style>

<p class="text-space">このテキスト内の    連続する半角スペースはそのまま表示されます。</p>

上記のコードでは、値にpre-wrapを指定して、連続する空白や改行を保持しつつ、必要に応じて自動で折り返しさせています。

半角スペースを本来の意図通りに表示させたい場合でも、 のような特殊文字を使わずにCSSだけで対応できるため、コードの見通しがよくなる点も便利です。

HTMLで連続した半角スペースが1つになるのはなぜですか？

HTMLのソースコード内で連続した半角スペースや改行を入力しても、ブラウザの描画時に1つの空白にまとめられる仕様があるためです。

この仕組みはホワイトスペースの圧縮と呼ばれており、意図した余白を作るにはCSSのwhite-spaceプロパティなどを使用します。

 の本来の意味は何ですか？

単なる半角スペースではなく、自動的な改行を防ぐ「ノーブレークスペース」と呼ばれる特殊文字であり、通常の半角スペース(U+0020)とは異なるU+00A0のコードポイントが割り当てられた文字です。

単語の途中で改行されるのを防ぐ目的で使うものであり、レイアウトの余白調整として連続して記述することは推奨されない実装方法と言えます。

ITやプログラミングに関するコラム

• 
  【Python】FastAPIで料金プラン見積もりシミュレーターを作ってみた
• 
  【Python】pandasとmatplotlibで在庫データのABC分析と構成比を可視化してみた
• 
  【Python】Flaskで社内FAQをカテゴリ検索できるWebアプリを作ってみた
• 
  【Python】argparseでJSON整形・構文検証・キー検索CLIを試してみた
• 
  【Python】NumPyとmatplotlibでモンテカルロ法による円周率推定と収束過程の可視化を試してみた
• 
  【Python】Playwrightでスクレイピングを試してみた
• 
  【CSS】notで複数の件を除外する方法
• 
  【Git】remote設定を変更する方法
• 
  【VBA】コメントアウトを設定する方法
• 
  x86とx64の違いを分かりやすく解説

ITやプログラミングに関するニュース

• 
  VercelがAI GatewayにSeedream 5.0 Proを追加、AI SDKのモデル指定で画像生成と編集が可能に
• 
  AWSがAmazon LocationのPlaces APIを強化、住所表記の指定と移動手段別の検索が可能に
• 
  VercelがトレースにTree・Waterfallビューを追加、ログ画面で処理の階層と所要時間を確認可能に
• 
  Googleがエージェント評価の再考を提唱、難易度を情報量で測るDiscovery Benchを解説
• 
  Google CloudがCloud Runサンドボックスを公開プレビューで提供、サービスヘルスは一般提供に
• 
  Google Cloud EMEAが英国金融の重要第三者に指定、イングランド銀行・PRA・FCAの直接監督下に
• 
  AWS DMS Schema ConversionがSQL Serverのオフライン変換に対応、ソースDBへ接続せずスキーマを変換可能に
• 
  EC2 G7インスタンスが米国東部（バージニア北部）で利用可能に、G6比でAI推論性能が最大4.6倍
• 
  SageMaker HyperPodが継続プロビジョニングでのAMIベース構成に対応、S3のスクリプト管理なしでSlurmクラスターを作成可能に
• 
  AWSがEMR on EKSでSparkトラブルシューティングエージェントに対応、失敗ジョブの原因分析を自然言語で依頼可能に