【2026年8月最新】HTMLで文章中にスペース（空白文字）を入れる3つの方法｜全角半角・ ・preタグの使い分け

「HTMLで文章の途中にスペースを入れたのに、ブラウザで表示すると勝手に詰められてしまう」——ブログ記事やWordPressの固定ページを自分で編集している方なら、一度はこの現象に遭遇したことがあるはずです。

結論から言うと、これは不具合ではなくHTMLの仕様です。HTMLは「連続する空白文字（半角スペース・改行・タブ）をすべて1つの半角スペースにまとめて表示する」というルールを持っており、これを知らずにスペースキーを連打しても、ブラウザ上では反映されません。

この記事では、HTMLで文章中にスペース（空白文字）を思い通りに入れる3つの方法——全角・半角スペースの直接入力、 などの特殊文字コード、<pre>タグやCSSのwhite-spaceプロパティ——を、非エンジニアの経営者・管理職の方にもわかる言葉で解説します。後半では、こうした細かい表示調整そのものを覚えなくても、Claude Codeに指示するだけでWordPress編集が完結する方法もあわせて紹介します。

代表菅澤

スペース1つの表示崩れは些細に見えて、実は「HTMLがどういうルールで文章を組み立てているか」を理解する良い入り口です。うちの会社でもブログやLPの文言調整で毎週のように向き合っているテーマなので、今日はまとめて整理します。

AI鬼管理山崎

今日は「なぜスペースが消えるのか」という仕組みの部分から、3つの解決方法、そして最後には非エンジニアの方が実際にどうやってこの知識をAIへの指示に活かすかまで踏み込みます。最後まで読めば、ご自身でコードを書かなくても、表示崩れの指示が的確に出せるようになります。

01 WHY SPACE DISAPPEARS HTMLで入力したスペースが消える理由 「空白文字の折りたたみ」という仕様を理解する

まず、なぜスペースキーを連打しても反映されないのかという仕組みから見ていきましょう。HTMLには「連続する空白文字（半角スペース・改行・タブ）は、ブラウザの描画時にすべて1個の半角スペースにまとめられる」というルールがあります。これを専門的にはホワイトスペースの折りたたみ（whitespace collapsing）と呼びます。

<p>今日は  とても    良い天気です。</p>

<!-- ブラウザでの表示 -->
今日は とても 良い天気です。

上のコード例では、「今日は」と「とても」の間に半角スペースを2つ、「とても」と「良い天気」の間に半角スペースを4つ入力していますが、ブラウザで表示するとどちらも半角スペース1個分にまとめられてしまいます。これは特定のブラウザのバグではなく、すべてのブラウザに共通するHTMLの仕様です。

1-1. なぜこのような仕様になっているのか

この仕様は、HTMLファイルのソースコードの見た目（インデントや改行）と、ブラウザ上での表示を切り離すために設けられています。HTMLはもともと「文章の構造」を記述する言語であり、開発者がソースコードを読みやすく整形するために入れた改行やスペースが、そのまま画面表示に反映されてしまうと、意図しない余白が大量に発生してレイアウトが崩れてしまいます。

つまり、HTMLは「見た目の整形はCSS側の役割」「HTML側は文章の意味・構造を伝える役割」という役割分担を前提に設計されています。文章中に意図的にスペースを入れたい場合は、この役割分担のルールに沿った書き方をする必要がある、というのがこの記事の3つの方法につながる背景です。

AI鬼管理山崎

この仕様を知らないまま「なぜかスペースが反映されない」と何度もスペースキーを押し直している方をよく見かけます。原因が分かれば、あとは目的に合った方法を選ぶだけです。

02 METHOD 1 方法1: 全角・半角スペースを直接入力する 最も手軽だが、挙動の違いを理解しておく

最初に紹介するのは、キーボードから全角スペースまたは半角スペースを直接入力する方法です。特別なコードを覚える必要がなく、最も手軽な方法ですが、それぞれ挙動が異なるため注意が必要です。

2-1. 全角スペースの挙動

<p>今なら　　　期間限定で全品50%オフです。</p>

<!-- ブラウザでの表示（全角スペース3つ分がそのまま反映される） -->
今なら　　　期間限定で全品50%オフです。

日本語入力で変換できる全角スペース（　）は、実は先ほど説明した「ホワイトスペースの折りたたみ」の対象外です。全角スペースはブラウザから見ると「1文字分の記号」として扱われるため、入力した数だけそのまま表示されます。3つ連続で入力すれば、3文字分の余白がそのまま画面に反映されます。

2-2. 半角スペースの挙動

<p>今なら   期間限定で全品50%オフです。</p>

<!-- ブラウザでの表示（半角スペース3つが1つに折りたたまれる） -->
今なら 期間限定で全品50%オフです。

一方、半角スペース（ ）は先ほどの折りたたみ仕様の対象です。何個連続して入力しても、ブラウザ上では1個分としてしか表示されません。「半角スペースを何個も打ったのに反映されない」という現象の正体はこれです。

代表菅澤

「全角スペースを連打すれば余白は作れる」ということ自体は知っている方も多いのですが、スマホ表示で崩れる原因になりやすいので、私自身は本文中の細かい余白調整には基本的に使わないようにしています。

03 METHOD 2 方法2: 特殊文字コード（ 等）を使う 折りたたまれない空白を確実に指定する

2つ目の方法は、HTMLの特殊文字コード（HTMLエンティティ）を使う方法です。半角スペースが折りたたまれてしまう問題を根本的に回避できる、実務でもっとも使われる方法です。

3-1.  （ノーブレークスペース）

<p>今なら&nbsp;&nbsp;&nbsp;期間限定で全品50%オフです。</p>

<!-- ブラウザでの表示（3つ分の空白が保持される） -->
今なら   期間限定で全品50%オフです。

最もよく使われるのが です。これはノーブレークスペース（折り返し禁止スペース）と呼ばれる特殊な空白文字で、半角スペースと違って折りたたみの対象になりません。並べた数だけ、そのまま余白として反映されます。

3-2. 幅の異なる特殊文字コード

 以外にも、余白の幅が異なる特殊文字コードがいくつか用意されています。用途に応じて使い分けることで、より細かい調整が可能です。

例えば、見出しの中で単語同士の間隔を少し広めに取りたい場合は や 、逆に控えめな余白にしたい場合は を使うといった使い分けができます。

AI鬼管理山崎

 は「折りたたまれない半角スペース」と覚えると理解しやすいです。見た目は普通のスペースと同じですが、HTMLの中では別の記号として扱われている、というのがポイントです。

04 METHOD 3 方法3: preタグ・CSSのwhite-spaceプロパティを使う 改行やインデントごと、そのまま保持する方法

3つ目は、<pre>タグ、またはCSSのwhite-spaceプロパティを使う方法です。1文字単位のスペース調整ではなく、文章のレイアウト（改行・インデント）をソースコードの見た目のまま保持したい場合に使います。

4-1. preタグの挙動

<pre>これは1行目です。
    これは2行目でインデントされています。
これは3行目です。</pre>

<pre>タグ（preformatted textの略）で囲んだ範囲は、ホワイトスペースの折りたたみが適用されなくなります。ソースコード内で入力した改行・スペース・タブが、そのままブラウザの表示に反映されるため、プログラムのコード例や、整形済みのテキストを掲載したいときによく使われます。

4-2. CSSのwhite-spaceプロパティで柔軟に制御する

preタグを使わずに、通常のpタグやdivタグのままホワイトスペースの扱いを変えたい場合は、CSSのwhite-spaceプロパティが使えます。

.keep-space {
  white-space: pre-wrap;
}

<p class="keep-space">今日は  とても    良い天気です。</p>

white-space: pre-wrap;を指定すると、preタグのように改行・スペースをそのまま保持しつつ、画面幅に応じて自動で折り返しも行われます。preタグと違って等幅フォントに変わらないため、通常の文章の中で「入力したスペースをそのまま反映したい」場合に扱いやすい方法です。

代表菅澤

preタグはブログ記事でコードを紹介するときに欠かせない存在ですが、通常の文章の余白調整に使うと逆に崩れる原因になります。「コード表示にはpre、文章の余白調整には 」とすみ分けて覚えておくと迷いません。

05 BR VS SPACE 【要注意】改行タグ<br>との違い・3つの方法の使い分け 「スペースを入れたいだけ」なのか「改行させたいだけ」なのかを整理する

ここまで3つの方法を紹介しましたが、実際に相談を受ける中でよくあるのが「スペースを入れたいのか、改行させたいのか」を混同しているケースです。ここで整理しておきましょう。

<br>タグは、その名の通り改行（break）を挿入するためのタグであり、スペース（空白）を入れるタグではありません。「文章の間を空けたい」という要望が、実は「スペースで余白を空けたい」のか「行を変えたい」のかによって、使うべき方法はまったく異なります。

<!-- スペースを入れたい場合 -->
<p>今なら&nbsp;&nbsp;期間限定です。</p>

<!-- 改行したい場合 -->
<p>今なら期間限定です。<br>ぜひこの機会にご検討ください。</p>

ここまでの3つの方法と改行タグを踏まえて、目的別の早見表を用意しました。迷ったときはこの表を参考にしてください。

AI鬼管理山崎

「スペースが入らない」という相談の半分近くは、実は「改行させたい」が正しい要望だったりします。目的を一度言葉にしてから方法を選ぶだけで、遠回りをせずに済みます。

06 GENAI CASE STUDY 【独自データ】GENAI社内でのWordPress編集実務 Claude CodeがHTMLの表示調整をどこまで肩代わりしているか

ここまでスペースの入れ方の基礎知識を解説してきましたが、正直なところ「ここまで覚えたのに、結局自分でコードを書くことはほとんどない」という経営者・管理職の方も多いはずです。弊社（株式会社GENAI）でも、こうした細かいHTMLの表示調整を人力でゼロから書く機会は年々減っており、Claude Codeに指示して修正してもらうスタイルが標準になっています。

6-1. 弊社のWeb編集・修正の実態

弊社のGENAI実運用データでは、「WordPress/LP制作、スクリプト書き捨て」の領域は都度数時間規模の削減が発生している業務のひとつです。以前であれば、「ここのスペースが思った通り表示されない」という小さな不具合でも、コードを開いて を入れるべきか全角スペースにすべきか調べながら書き換える——という作業に時間がかかっていました。現在は「この見出しの単語の間を、スマホで見ても崩れないように少し空けて」と日本語で指示するだけで、Claude Codeが状況に応じて やCSSの調整を選んで実装してくれます。

6-2. コード知識が「不要」ではなく「指示の精度」を上げる理由

ここで重要な注意点があります。スペースの入れ方の知識がまったく不要になったわけではない、という点です。むしろ、この記事で解説したような基礎知識を知っているかどうかで、AIへの指示の精度が大きく変わります。

例えば「ここのスペースがおかしい」という指示だけでも、Claude Codeは状況を判断して修正してくれます。しかし、全角スペースが折りたたまれない仕様や、 がスマホでも崩れにくいことを知っている人であれば、「スマホで見ても改行されないように で調整して」と一言添えることで、より的確に意図を伝えられます。コードを書けなくても、何が起きているかを理解していることが、AIを使いこなす上での差になる——これが弊社が非エンジニアの方にも基礎知識の習得をおすすめする理由です。

代表菅澤

正直に言うと、私自身は と全角スペースのどちらがどのブラウザでどう表示されるかを完璧には覚えていません。ただ「半角スペースは連打しても効かない」くらいの理解があるだけで、Claude Codeへの指示は驚くほどスムーズになります。

07 NO-CODE INSTRUCTION 非エンジニアが「書かず」に表示崩れを直す方法 Claude Codeへの伝え方のコツ

この章では、実際に非エンジニアの方がスペース・改行まわりの表示崩れをClaude Codeに任せるとき、どう指示すればスムーズに伝わるかを具体的に紹介します。

7-1. 「見たまま」を伝えるだけでよい

Claude Codeへの指示は、専門用語を使う必要はありません。「見たままの状態」と「なってほしい状態」を伝えるだけで、多くの場合は意図通りに動きます。

特に4つ目の例のような「コードのサンプルを載せたら改行がぐちゃぐちゃになった」という現象は、まさに本記事の4章で解説したpreタグ・white-spaceプロパティの使い分けによって解決できる典型的な不具合です。専門用語を知らなくても、起きている現象をそのまま言葉にすることで、Claude Codeは正確に原因を特定し、適切な方法に修正してくれます。

7-2. 修正前に確認してもらう習慣をつける

AIに修正を任せる際は、いきなり本番環境に反映させるのではなく、「まずどう直すつもりか説明して」と一度確認を挟む習慣をつけることを推奨します。特に記事全体にわたるスペースの一括調整は、意図しない範囲まで変わってしまうことがあるため、修正内容を目視確認してから反映するプロセスが安全です。

弊社のGENAI実運用データでも、営業資料の週20時間から週2時間への削減、経理業務の月40時間から月5時間への削減など、業務全体でClaude Codeの活用が進んでいますが、共通しているのは「最終的な確認は人間が行う」という運用ルールです。Web編集・修正の領域も例外ではなく、AIに任せる範囲と人間が確認する範囲を明確に分けることが、安全な活用の前提になります。

AI鬼管理山崎

弊社に相談に来る経営者の方の多くは「コードが書けないから自社サイトは外注するしかない」と思い込んでいます。しかし実際には、この記事レベルの基礎知識とAIへの指示さえあれば、内製化できる範囲は想像以上に広いです。

08 CONCLUSION まとめ ── スペースの仕様を理解すれば、AIへの指示も的確になる 完璧に覚えるより「なぜ消えるのか」という仕組みを知ることが重要

この記事では、HTMLで文章中にスペースが思い通り表示されない理由、全角・半角スペースの直接入力、 等の特殊文字コード、preタグ・CSSのwhite-spaceプロパティという3つの解決方法、改行タグ<br>との違い、そして弊社GENAIの実運用データをもとにしたClaude Codeとの付き合い方までを解説しました。最後にポイントを振り返ります。

最も伝えたいメッセージは、「スペースの入れ方を完璧に覚える必要はないが、『なぜ消えるのか』という仕組みを知っているとAIとの仕事の質が変わる」ということです。「連続する半角スペースは折りたたまれる」という仕様だけ理解していれば、Claude Codeへの指示は驚くほど的確になります。

弊社では、こうした基礎知識と実際のAI活用をセットで身につけていただく形で、Webサイト運営やコード修正の内製化を支援しています。「コードは書けないが、AIに正しく指示を出せるようになりたい」という方は、ぜひ以下からお気軽にご相談ください。

代表菅澤

弊社では「AI鬼管理」というサービスで、Claude Codeを使った業務自動化・Web運用の設計から伴走まで支援しています。コードが書けなくても、正しい指示の出し方さえ身につければサイト運用は十分に内製化できます。無料相談で具体的にお答えしますので、お気軽にどうぞ。

AI鬼管理山崎

スペース1つの表示崩れをとっても、「なんとなく」から「仕組みを理解した上でAIに任せる」に変わるだけで、修正のスピードも精度も上がります。ぜひ今日から、AIへの指示に一歩踏み込んだ言葉を添えてみてください。

コードを書かずにWebサイト改善を進めたい方へ

HTMLの表示調整のような基礎知識と、Claude Codeへの指示の出し方をセットで身につけたい方へ。
弊社の実運用ノウハウをもとに、個別に導入設計のご相談を承ります。

AI鬼管理山崎

「自社サイトの細かい修正を、いちいち外注せずに社内で回せるようになりたい」という方に最適です。まずは無料相談で、あなたの業務の中で最もインパクトが大きい適用領域を一緒に見つけましょう。

ここから先の進め方は、大きく2つあります。

自社で回せるようになりたい方は、AI鬼管理でClaude Code／Codexの使い方から業務設計・社内定着まで伴走を受けながら、社内に仕組みを作る道があります。

覚えるより任せたい方は、AIBPO by AI鬼管理でこの記事のような定型業務を丸ごと預ける道があります。総額はいまの業務コストの50%が目安、月額基本料は0円です。

どちらが合うかは、業務量と社内体制次第です。無料相談・無料適合診断で、貴社の場合はどちらが向くかからご相談いただけます。

NEXT STEP

この記事の内容を、あなたのビジネスで
実践してみませんか？

AI活用を自社で回せるようになりたい方へ

AI鬼管理

Claude Code・Cowork導入支援から業務設計・社内浸透まで実践ベースで伴走。「自社で回せる組織」を90日で作る経営者向けトレーニング。

AI鬼管理を詳しく見る →

業務を丸ごと任せたい方へ

AIBPO by AI鬼管理

請求処理・データ入力・問い合わせ対応などの定型業務を、AI×人の品質管理体制で丸ごと代行。いまのコストの50%目安で、日々は成果物を承認するだけ。

AIBPOを詳しく見る →

よくある質問

Q. HTMLで半角スペースを連続して入力しても反映されないのはなぜですか？

A. HTMLには連続する空白文字（半角スペース・改行・タブ）を1個の半角スペースにまとめて表示する「ホワイトスペースの折りたたみ」という仕様があるためです。何個入力しても、ブラウザ上では1個分としてしか表示されません。

Q. 全角スペースと 、どちらを使うのがおすすめですか？

A. どちらも折りたたまれずに表示される点は同じですが、実務では の方が一般的です。全角スペースはスマートフォンなど画面幅が狭い環境でレイアウトが崩れやすいのに対し、 はHTMLの標準的な記法として widely 使われており、CMS側との相性トラブルも起きにくいためです。

Q. preタグを使うと文章全体のフォントが変わってしまうのですが、直せますか？

A. preタグは既定で等幅フォントで表示される仕様のため、通常の文章と同じフォントのまま改行・スペースを保持したい場合は、preタグではなくCSSのwhite-space: pre-wrap;を使う方法をおすすめします。

Q. スペースを入れたつもりが、実際には改行させたかっただけということはよくありますか？

A. よくあります。「文章の間を空けたい」という要望が、実は行を変えたいだけのケースは非常に多いです。その場合は 等ではなく、改行専用の<br>タグを使うのが適切です。

Q. WordPressのブロックエディタでも同じ現象は起きますか？

A. 起きます。WordPressのブロックエディタも最終的にはHTMLとして出力されるため、この記事で解説したホワイトスペースの折りたたみの仕様がそのまま適用されます。ビジュアル編集画面でスペースを入れたつもりでも、公開後の表示で詰まって見える場合は、コードエディタ側で 等に置き換える必要があります。

Q. 非エンジニアでもClaude Codeでこうした表示崩れの修正は本当にできますか？

A. できます。「ここのスペースが公開後は詰まって見える」「この単語のところで意図しない改行が入る」といった日本語の指示だけで、Claude Codeが該当箇所を特定し、 やCSSのwhite-spaceプロパティなど適切な方法で修正します。この記事で紹介したような基礎知識があると、指示の精度がさらに上がります。

Q. 数値と単位の間（例: 10 km）で改行されてしまうのを防ぐ方法はありますか？

A. 数値と単位の間を （ノーブレークスペース）にすることで防げます。 は空白としての見た目を保ちながら、その前後で行が分割されないようにする効果も持っているため、単位や記号が離れた行に飛んでしまう見た目の崩れを防止できます。

監修 最終更新日: 2026年8月14日

菅澤 孝平 株式会社GENAI 代表取締役

• AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
• Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
• 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
• 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
• メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
• 明治大学政治経済学部卒

現在は AI鬼管理（Claude Code活用の伴走型パーソナルトレーニング）を主事業とし、経営者と二人三脚で「AIに業務を任せる仕組み」を実装。「実行を強制する環境」を AI で構築する手法を、自社の実運用知見をもとに発信している。

▸ 代表 菅澤孝平 のプロフィール詳細を見る