HTMLスペースの入れ方7選｜目的別の使い方をかんたん解説

HTMLのスペース調整で、このような悩みを抱えていませんか。

実は、HTMLの基本ルールといくつかのCSSを知るだけで、スペースを自由に調整できるようになります。

本記事では、スペースが意図した通りに表示されない理由から7つの解決策まで解説しています。スペースの使い方で迷いたくない方は、ぜひ最後まで読んでみてください。

HTMLスペースの基本ルール

スペースの入れ方を学ぶ前に、以下の2つの基本ルールを知っておく必要があります。

• 連続した半角スペースは1つにまとめられる
• レイアウト目的での全角スペースは使わない

HTMLのスペースを意図した通りに表示させるためにも、しっかりとおさえておきましょう。

連続した半角スペースは1つにまとめられる

HTMLファイル上で半角スペースを連続して入力しても、ブラウザの画面上では「1つ分の半角スペース」として表示されます。

「空白文字の統合（white space collapsing）」という仕様があり、スペースを連続で入力しても1つ分のスペースとして扱われるからです。

スペースが1つにまとめられるのはHTMLの仕様であり、バグではありません。コーディングの際にインデントや改行を入れても、実際の表示が崩れないように配慮されています。

レイアウト目的での全角スペースは使わない

見た目を整えるために、全角スペースを使うのは避けましょう。

全角スペースによる余白調整は手軽ですが、Web制作の現場では問題を引き起こす可能性があるため、おすすめされていません。

主な理由は、以下の3つです。

• バグの原因になる
• Webサイトの評価が下がる
• 音声読み上げ機能が誤読する

ソースコード上では半角と全角の区別がつきにくくバグの原因になるほか、検索エンジンが単語を誤認識してしまうケースがあります。

たとえば、「東　京」のようにスペースがあると、「東京」という1つの単語ではなく、「東」と「京」の2語だと判断されてしまいます。

正しく伝わらないことでミスが起きやすくなるため、レイアウトに全角スペースを使うのは避けましょう。

目的別｜HTMLでスペースを入れる方法と使い分け

ここからは「何をしたいのか」という以下の目的別に、スペースの入れ方と使い分けを解説します。

• 文字間のスペースを調整する
• 改行や連続したスペースをそのまま表示させる
• 要素の周りの余白（スペース）を作る
• 要素間の均等なスペースを調整する

文字間に少しだけスペースを入れたい場合と、サイト全体のレイアウトとして余白を作りたい場合では、スペースの入れ方が異なります。

それぞれの方法の特徴を知り、適切な場面で使えるようになりましょう。

文字間のスペースを調整する

文字間のスペースを調整する2つの方法を紹介します。

• 特殊文字を使う
• CSSのletter-spacingを使う

文章の見出しやキャッチコピーなどで、文字の間隔を調整するだけで、デザインの印象が大きく変わることがあります。

それぞれの方法の得意なこと、不得意なことを理解して使い分けましょう。

特殊文字を使う

特殊文字を使うと、HTMLのテキスト内に直接記述ができて、部分的な調整が簡単にできます。

特殊文字は、HTMLに直接打ち込んでも表示できない記号やスペースを指定する文字です。

たとえば「<」や「>」をそのまま書くとタグとして認識されてしまうため、&lt; や &gt; と書いて表示します。

スペースを表す文字を以下にまとめました。

&thinsp;は、半角よりも狭いスペースを表示します。たとえば、以下のように数式を読みやすくするときに役立ちます。

コピー<p>2025/09/27と書くと数字が詰まって見えますが<br>
「2025&thinsp;/&thinsp;09&thinsp;/&thinsp;27」と特殊文字を使うと読みやすくなります。</p>

&nbsp;は、「Non-Breaking Space（改行しないスペース）」の略です。たとえば、100&nbsp;kmと書くと、「100」と「km」が改行によって分かれてしまうことを防げます。

&ensp;と&emsp;は、文字幅を基準にしたスペースで、文章の見た目を整えたいときに便利です。

CSSのletter-spacingを使う

文字の間隔を整えたいときは、CSSのletter-spacingの使用がおすすめです。

letter-spacingならテキスト全体の文字間を均等にでき、pxやemといった単位で細かく調整できます。

特殊文字の&nbsp;のように手作業で入れる方法とは違い、CSSで指定すればデザインの意図がコード上で明確になり、あとからの修正や管理もスムーズです。

以下の例を見てみましょう。

コピー<h2 class="title">見出しの文字間を調整</h2>

コピー.title {
letter-spacing: 2px;
}

letter-spacingは文字間隔を均一に広げたり狭めたりできるプロパティです。見出しを強調したり、読みやすさを高めたいときに使用します。

改行や連続したスペースをそのまま表示させる

入力した通りのスペースを表示させる2つの方法を紹介します。

• HTMLのpreタグを使う
• CSSのwhite-spaceプロパティを使う

それぞれ順番に見てみましょう。

HTMLのpreタグを使う

HTMLのpreタグは、入力した通りのスペース、タブ、改行を維持したままブラウザに表示できるタグです。

たとえば、Webサイトにコードを掲載したいときや、ソースファイルに書いたインデントや改行をそのままの形で画面に表示させたいときに使用します。

使い方を見てみましょう。

コピー<pre>
function hello() {
console.log("Hello, world!");
}
</pre>

preタグで囲むだけで、インデントが重要な意味を持つコードなどを、記述した通りの見た目でWebサイト上に表示できます。

CSSのwhite-spaceプロパティを使う

CSSのwhite-spaceプロパティでも、preタグとほぼ同じ表現が可能です。

white-spaceプロパティはpreタグとは異なり、HTMLの構造を変えずにCSSで制御できます。

white-spaceプロパティの主な値をまとめた表を見てみましょう。

入力した文字をそのまま表示したいときはpreかpre-wrap、折り返したくないときはnowrapというように、見せたいテキストの性質によって値を選びましょう。

要素の周りの余白を作る

要素の周りの余白は内側と外側で作り方が異なります。

• CSSのmarginで外側の余白を作る
• CSSのpaddingで内側の余白を作る

Webサイトのレイアウトでよく使用するため、ぜひチェックしてみてください。

CSSのmarginで外側の余白を作る

HTMLの要素同士の間隔を調整したいときは、marginプロパティを使用しましょう。

marginは要素の外側に余白を作るプロパティで、要素同士の距離を保つ役割があります。

指定方法は以下の通りです。

たとえば、見出しと段落の間に余白を入れたい場合は次のように記述します。

コピー<h2 class="title">見出し</h2>
<p>ここに本文が入ります。</p>

コピー.title {
margin-bottom: 20px;
}

titleクラスにmargin-bottom: 20px;を指定すると、h2見出しの下に20px分のスペースができます。

marginは要素の外側に余白を作るものです。内側の余白を作るpaddingと混同しないように注意しましょう。

CSSのpaddingで内側の余白を作る

要素の内側に余白を作りたいときは、paddingプロパティを使います。

paddingは文字や画像などのコンテンツと枠の間にできる余白を調整するためのものです。

指定方法は以下の通りです。

たとえば、ボタンのテキストを読みやすくするために、文字の周りに余白を入れる場合は次のように書きます。

コピー<a href="#" class="btn">購入する</a>

コピー.btn {
background: #007bff;
color: #fff;
padding: 10px 20px; /* テキストの上下に10px、左右に20pxの余白 */
display: inline-block;
text-decoration: none;
font-weight: bold;
border-radius: 4px;
}

文字の周りに余白が入ることで、デザインがすっきりし、ボタンも押しやすくなる効果があります。

要素間の均等なスペースを調整する

FlexboxやGridなどのレイアウトで、要素間のスペースを均等に調整したいときはCSSのgapを使用します。

各要素にmarginを指定しても調整できますが、gapを使うと少ないコードできれいなレイアウトを作成できます。

カードレイアウトをコーディングする例を見てみましょう。

コピー<div class="card-container">
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
</div>

コピー.card-container {
display: flex;
gap: 20px; /* カード間のスペースを20pxに設定 */
}
.card {
border: 1px solid #ccc;
padding: 16px;
}

親要素にgapを記述するだけで、すべての子要素の間に均等な間隔が自動で設定されます。

画面サイズが変わっても均等な間隔が保たれるため、レイアウトが崩れにくくなります。

HTMLでスペースを使う際の注意点

HTMLで余白を作るときは、&nbsp; などの特殊文字を多用するのは避けましょう。

特殊文字で余白を調整すると、コードが複雑になり、修正やデザイン変更の際に大きな手間がかかることがあります。メンテナンス性が低下して作業効率も悪化するため、注意が必要です。

たとえば、ページ内の各所に&nbsp;を入れて余白を作ると、あとから余白の大きさを変更したいときに、すべての箇所を探して書き換える必要が出てきます。

一方で、CSSでmarginやpaddingを使って余白を設定すれば、一か所の変更で全体の一括調整が可能です。さらに、ボタン用の余白として共通クラスをCSSで定義しておけば、新しいページでもすぐに再利用でき、デザインの一貫性も保てます。

「見た目の調整はCSS、意味や構造はHTML」という役割を明確に分けることが、Webサイトの品質と効率的な運用を実現するためのポイントです。

まとめ：CSSを優先してスペースを調整しよう

HTMLのスペース調整では、「連続した半角スペースは1つにまとめられる」というルールと、HTMLとCSSの役割分担を理解することが大切です。

基本ルールを理解していないと、メンテナンス性の低いサイトになってしまいます。

管理しやすいWebサイトを制作するためにもCSSを優先し、目的に応じた方法でスペースを調整しましょう。

文字間の微調整にはletter-spacing、整形済みテキストにはpre タグ、そしてサイト全体のレイアウトに関わる余白にはmarginやpadding、gapを使用しましょう。

Web制作の基礎から応用までしっかり理解したい方には、デイトラWeb制作コースがおすすめです。

多くの卒業生が未経験からプロとして活躍しており、実務で役立つスキルを身につけられます。

Web制作を仕事にするならデイトラWeb制作コースがおすすめ

デイトラ情報局は、1日1題のステップでWebスキルを身につけられる”デイトラ”を運営しています。

デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。

HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、Web制作を網羅的に学べます。

また、中級・上級の最終課題はメンターによる課題レビューつきで品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的に分かります。

分からないことは、実務を経験しているメンター陣がDiscordによる公式サポートの質問部屋で丁寧に指導してくれます。

Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！