この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:5
ページ更新者:爽健
更新日時:2026-06-11 07:07:02

タイトル: 空白(スペース)の入力方法
SEOタイトル: HTML 空白 (スペース) 入力完全ガイド — nbsp/CSS white-space/pre タグ

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li>HTML は<strong>連続する空白を 1 つに圧縮</strong>する。半角スペースを並べても 1 つに見える</li><li>空白を保持するには: <strong>&nbsp;</strong> / <strong><pre></strong> / <strong>CSS white-space: pre</strong></li><li>幅違いの空白: <strong>&ensp;</strong> (en) / <strong>&emsp;</strong> (em) / <strong>&thinsp;</strong> (細)</li><li>改行も同様に圧縮される → <strong><br></strong> / <strong>white-space: pre-wrap</strong></li><li>推奨は CSS で。整形のために <code>&nbsp;</code> 連打はアクセシビリティ的に NG</li></ul></td></tr></table>
<h2>HTML の空白圧縮ルール</h2>

<p>HTML パーサは<strong>連続する空白文字 (スペース / タブ / 改行)</strong> を 1 つの半角スペースに圧縮します。これは仕様 (CSS の <code>white-space: normal</code>) によるもの:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- ❌ ソース上で 5 つスペースを入れても -->
<p>Hello     World</p>
<!-- 表示は: "Hello World" (1 つに) -->

<!-- 改行も圧縮 -->
<p>Hello
World</p>
<!-- 表示は: "Hello World" --></code></pre>
<h2>方法1: &nbsp; (Non-Breaking Space)</h2>

<p>もっとも基本。<strong>圧縮されず、改行もされない</strong>半角スペース:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 連続スペース表現 -->
<p>Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;World</p>
<!-- 表示: "Hello     World" (5 つのスペース) -->

<!-- 行頭インデント -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;インデント文字</p>

<!-- 単位や数値の改行禁止 -->
<p>合計&nbsp;1,000&nbsp;円</p>
<!-- 「1,000」と「円」の間で改行されない --></code></pre>
<h2>各種空白文字</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>エンティティ</th><th>名前</th><th>幅</th><th>用途</th></tr></thead>
<tbody>
<tr><td><code>&nbsp;</code></td><td>Non-Breaking Space</td><td>通常の半角スペース幅 (U+00A0)</td><td>改行禁止スペース</td></tr>
<tr><td><code>&ensp;</code></td><td>En Space</td><td>1/2 em (U+2002)</td><td>欧文の中スペース</td></tr>
<tr><td><code>&emsp;</code></td><td>Em Space</td><td>1 em (U+2003)</td><td>欧文の広いスペース</td></tr>
<tr><td><code>&thinsp;</code></td><td>Thin Space</td><td>1/6 em (U+2009)</td><td>細い区切り</td></tr>
<tr><td><code>&hairsp;</code></td><td>Hair Space</td><td>極細 (U+200A)</td><td>装飾的に狭く</td></tr>
<tr><td><code>&zwsp;</code></td><td>Zero-Width Space</td><td>0 (U+200B)</td><td>改行可ポイントを作る (見えない)</td></tr>
<tr><td><code>&#12288;</code> または「　」</td><td>Ideographic Space</td><td>全角 1 文字 (U+3000)</td><td>日本語の全角スペース</td></tr>
</tbody>
</table>

<h2>方法2: <pre> タグ</h2>

<p><code><pre></code> 内では<strong>空白も改行もそのまま保持</strong>されます。コード片や ASCII アート向け:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><pre>
function hello() {
    if (cond) {
        return    "many   spaces";
    }
}
</pre>
<!-- インデントもスペースも改行もすべて保持 --></code></pre>
<h2>方法3: CSS white-space</h2>

<p>CSS で空白の扱いを制御するのが現代的な解決法:</p>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>white-space 値</th><th>連続空白</th><th>改行</th><th>自動折り返し</th></tr></thead>
<tbody>
<tr><td><code>normal</code> (既定)</td><td>圧縮</td><td>圧縮</td><td>する</td></tr>
<tr><td><code>nowrap</code></td><td>圧縮</td><td>圧縮</td><td>しない (1 行に固定)</td></tr>
<tr><td><code>pre</code></td><td>保持</td><td>保持</td><td>しない</td></tr>
<tr><td><code>pre-wrap</code></td><td>保持</td><td>保持</td><td>する ★ 推奨</td></tr>
<tr><td><code>pre-line</code></td><td>圧縮</td><td>保持</td><td>する</td></tr>
<tr><td><code>break-spaces</code></td><td>保持</td><td>保持</td><td>する (行末空白も改行可)</td></tr>
</tbody>
</table>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">/* テキストエリアやコードブロックでよく使う */
.code {
  white-space: pre-wrap;     /* 改行 + 空白保持、行末で折り返す */
  font-family: monospace;
}

/* タグ風表示で改行禁止 */
.tag {
  white-space: nowrap;
  display: inline-block;
  padding: 2px 8px;
}

/* チャット風 (改行は保持、空白は圧縮) */
.message {
  white-space: pre-line;
}</code></pre>
<h2>JavaScript での空白挿入</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">// textContent はそのまま表示 (HTML エンティティは効かない)
el.textContent = &apos;a   b&apos;;   // 表示: "a b" (圧縮される)

// innerHTML なら HTML エンティティが効く
el.innerHTML = &apos;a&nbsp;&nbsp;&nbsp;b&apos;;  // "a   b"

// Unicode で直接書く
el.textContent = &apos;a   b&apos;;  // U+00A0 を直接

// 全角スペース
el.textContent = &apos;a　　b&apos;;  // "a　　b"

// 改行
el.textContent = &apos;line 1\nline 2&apos;;   // textContent では \n が改行扱いされない
// → CSS で white-space: pre or el.innerHTML = &apos;line 1<br>line 2&apos;</code></pre>
<h2>用途別のおすすめ</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e8f5e9"><th>やりたいこと</th><th>推奨</th><th>避けるべき</th></tr></thead>
<tbody>
<tr><td>余白を作りたい (装飾)</td><td>CSS <code>padding</code> / <code>margin</code></td><td>&nbsp; 連打</td></tr>
<tr><td>テーブルや桁揃え</td><td>CSS Grid / table</td><td>&nbsp; 連打</td></tr>
<tr><td>「1,000 円」を改行させない</td><td><code>&nbsp;</code> 1 個 or <code>white-space: nowrap</code></td><td>—</td></tr>
<tr><td>コードを表示</td><td><code><pre><code></code></td><td>—</td></tr>
<tr><td>ユーザ入力をそのまま表示</td><td><code>white-space: pre-wrap</code></td><td>innerHTML (XSS リスク)</td></tr>
<tr><td>長い単語の折り返し</td><td><code>word-break: break-word</code></td><td>—</td></tr>
</tbody>
</table>

<h2>アクセシビリティ・SEO 上の注意</h2>

<ul>
<li><strong>&nbsp; を装飾目的で多用しない</strong> — スクリーンリーダーが余分に読み上げる、検索エンジンも単語分割に失敗する</li>
<li>段落の余白は CSS <code>margin</code> / <code>padding</code> で表現</li>
<li>桁揃えは表 (<code>table</code> / CSS Grid) で表現</li>
<li>「ふ　り　が　な」のような装飾は<strong>letter-spacing</strong> で</li>
</ul>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">/* 文字間隔を空ける (空白を入れない) */
.spaced {
  letter-spacing: 0.5em;
}

/* インデント */
.indent {
  text-indent: 2em;
}</code></pre>
<h2>FAQ</h2>

<p><strong>Q: 全角スペースと nbsp の違いは?</strong><br />
A: <code>&nbsp;</code> は半角幅のスペース、全角スペース (U+3000、「　」) は全角文字幅。日本語文中の見栄えなら全角スペースの方が自然なケースが多い。</p>

<p><strong>Q: 半角スペースを直接書いても表示される場合がある</strong><br />
A: <code><textarea></code> や <code><pre></code> 内、または CSS <code>white-space: pre/pre-wrap</code> 適用済要素では保持されます。</p>

<p><strong>Q: 改行を半角スペースに置き換えるには?</strong><br />
A: JavaScript で <code>str.replace(/\n+/g, ' ')</code> / CSS では <code>white-space: normal</code> がデフォルトでそうなる。</p>