HTML / 連続した空白を入れる方法：NBSPとwhite-space

HTML で複数のスペースを表示するには、短い連続の場合は   を使用し、テキスト内のスペースや改行を保持する場合は CSS white-space: pre-wrap を使用します。注意して選んでください：  はその位置で通常の折り返しも防ぎます。ボタンやナビゲーション項目の間隔には、CSS gap または margin を使用します。

連続した空白が一つに見える理由

通常のwhite-space: normal設定では、単語の間にある連続した通常スペースやタブは表示上で折りたたまれます。HTMLソースのインデントや改行は、視覚的な間隔を直接定義するものではありません。ソースの改行が必ずしも1つの可視スペースに変わるわけではなく、その扱いは言語や文脈によって異なる場合があります。

この完全な例をテキストエディタに貼り付け、UTF-8でspaces.htmlとして保存し、ブラウザでファイルを開いてください。ライブラリやサーバーは不要です。編集後、保存してブラウザを再読み込みしてください。サンプルの単語はラテン文字を使用しているため、違いを簡単に比較できます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTMLの空白を比較</title>
  <style>
    body { font-family: sans-serif; max-width: 42rem; margin: 1rem auto; padding: 0 1rem; }
    .sample { border: 1px solid #777; padding: .5rem; max-width: 18rem; }
    .preserve { white-space: pre-wrap; }
    .keep { white-space: pre; overflow-x: auto; }
    .lines { white-space: pre-line; }
    .actions { display: flex; flex-wrap: wrap; gap: 1rem; }
  </style>
</head>
<body>
  <h1>HTMLの空白を比較</h1>
  <h2>normal</h2>
  <p class="sample">Alpha   Beta       Gamma</p>
  <h2>&amp;nbsp;</h2>
  <p class="sample">Alpha&nbsp;&nbsp;&nbsp;Beta</p>
  <p class="sample">10&nbsp;kg</p>
  <h2>pre-wrap</h2>
  <p class="sample preserve">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>pre</h2>
  <p class="sample keep">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>pre-line</h2>
  <p class="sample lines">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>gap</h2>
  <div class="actions"><button type="button">A</button><button type="button">B</button></div>
</body>
</html>

normal 段落では、ソースには Alpha、Beta、Gamma の間に三つのスペースと七つのスペースがありますが、各シーケンスは通常は一つのスペースとして表示されます。開発者ツールで段落を選択し、計算された white-space の値を確認してください。これは、レンダリング時にホワイトスペースが折りたたまれることとソース内の文字を区別します。

改行されない空白文字を入れる

  は、非改行スペース（U+00A0）の HTML 文字参照です。これを三回書くと、連続する通常のスペースのように折りたたまれない三つの文字が挿入されます。また、数値とその単位を一緒に保持することもできます。

<p>Alpha&nbsp;&nbsp;&nbsp;Beta</p>
<p>10&nbsp;kg</p>

最初の段落では、Alpha と Beta の間に 3 つのノンブレークスペースを配置します。2 番目の段落では、10 kg が数字と単位の間で通常の改行を防ぎます。実際の幅はフォントとフォントサイズによって異なります。3 つのスペースはピクセル単位で固定された幅を持つわけではありません。

多くのノンブレークスペースで文全体をつなぐと、折り返しの機会が減り、狭い画面でははみ出すことがあります。コピーされたテキストには通常のスペース U+0020 とは異なる文字も含まれており、検索や文字列比較に影響を与える可能性があります。コンテンツを揃えるためやインデントを作るためにこれらの文字を繰り返し使用することは避けてください。

white-spaceで空白と改行を保持する

繰り返されたスペースや明示的な改行がテキストの意味的に重要な部分である場合、その要素に white-space: pre-wrap を適用します。これにより、利用可能な幅に合わせて追加の折り返しを許可しながら、両方を保持することができます。これにより、長い連続した URL や単語がボックス内に収まることが保証されるわけではありません。

完全な例では、pre-wrap と pre の両方が「Alpha」と「Beta」の間の3つのスペースと「Gamma」の前の改行を保持します。ウィンドウを狭めると、pre-wrap は追加の折り返しを許可しますが、pre は許可しません。例では、後者を横スクロール可能にするために overflow-x: auto を使用しています。pre-line では、明示的な改行は保持されますが、単語間の連続するスペースは一つにまとめられます。

この表は一般的なテキスト処理の違いをまとめたものです。タブ幅や行末のスペースなどの詳細が同じように振る舞うことを意味するものではありません。継承された値やその他のCSSルールも確認してください。W3Cのwhite-spaceの定義

要素間の間隔はCSSで調整する

2つのボタンを分けるには、親要素をフレックスコンテナにして、テキストスペースを追加する代わりにgapを設定します。要素外の間隔にはmarginを、境界線と内容の間にはpaddingを使用します。スペース文字は内容に属し、CSSの間隔はレイアウトを制御します。

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

完全な例では、AボタンとBボタンはgap: 1remによって分けられています。remはルート要素のフォントサイズに基づくため、常に16ピクセルとは限りません。幅が不足している場合、flex-wrap: wrapを使うとボタンが次の行に移動します。他のすべては変更せず、gapだけを0に設定し、結果を比較して1remに戻します。

結果が異なる場合の確認事項

1. もし文字通りのテキスト   が表示されたら、HTML を編集していることを確認してください。ビジュアルエディタにテキストとして貼り付ける、または   のように二重にエスケープすると、スペースにならなくなります。
2. スペースや改行が消える場合は、段落の計算済み white-space 値を確認し、CSS セレクターが一致しているか確認してください。pre-wrap 要素内のソースインデントも表示されることがあるので、意図しない空白は削除してください。
3. モバイルでコンテンツがはみ出す場合は、ウィンドウを狭くして、連続するノンブレークスペースや pre の設定を確認してください。目的に応じて、それらを通常のスペースに置き換えるか、pre-wrap を使用してください。変更後は、幅を広げた状態でも再度確認してください。

説明文で表記   を空白に変換せず文字として表示するには、HTML ソースに   と書きます。標準では、文字参照とそれに対応する文字の一覧が記載されています。WHATWG HTML 文字参照一覧