HTMLで空白（スペース）を追加する3つの方法： 、preタグ、brタグの使い方

HTMLでコードを書いていると、スペースキーを連続で押して入力した余分な空白が、ブラウザ上の表示には反映されないことに気づくでしょう。これは、HTMLでは連続する半角スペースが1つにまとめられてしまうためです。

例を見てみましょう。

<p>April is the cruelest month,</p>
<p>April   is   the   cruelest   month,</p>

最初の<p>タグでは単語間にスペースが1つだけありますが、2つ目の<p>タグではスペースが3つ入っています。しかし、ブラウザで表示すると、どちらの行もまったく同じようにレンダリングされます。

April is the cruelest month,
April is the cruelest month,

この記事では、HTMLで余分な空白を追加するための3つの方法を解説します。

空白を追加できるHTMLタグ・特殊文字

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

テキストの前、間、後に空白を挿入したい場合は、特殊文字「&nbsp;」（ノーブレークスペース）を使います。この文字は通常の半角スペースと異なり、複数並べてもその分だけ空白が表示されるのが特徴です。実装例は以下のとおりです。

<p>i carry your heart with me(i carry it in my heart)</p>
<p>i carry your &nbsp; heart &nbsp; with me(i carry it in my heart)</p>

表示結果：

i carry your heart with me(i carry it in my heart)

i carry your  heart  with me(i carry it in my heart)

2. 整形済みテキスト要素（<pre>タグ）

<pre>タグは、整形済みテキスト（preformatted text）を表すHTMLタグです。このタグで囲んだ部分は、ソースコード内の空白や改行がそのまま保持され、等幅フォントで表示されます。例を見てみましょう。

    <p>I was a child and she was a child,
   In this kingdom by the sea,
But we loved with a love that was more than love—
   I and my Annabel Lee—</p>

    <pre>I was a child and she was a child,
   In this kingdom by the sea,
But we loved with a love that was more than love—
   I and my Annabel Lee—</pre>

表示結果：

I was a child and she was a child, In this kingdom by the sea, But we loved with a love that was more than love— I and my Annabel Lee—

I was a child and she was a child,

   In this kingdom by the sea,

But we loved with a love that was more than love—

   I and my Annabel Lee—

このように、<pre>タグを使えば、詩やコードなど、作者が意図した空白や改行のままテキストを表示できます。

3. 改行タグ（<br>タグ）

テキストの行と行の間に空白行を挿入したい場合は、改行タグ<br>が最適です。行間を空けて表示したい詩のようなテキストに特に便利です。実装例は以下のとおりです。

<p>so much depends
     upon

     a red wheel
     barrow

     glazed with rain
     water

     beside the white
     chickens</p>

<p>so much depends<br>
     upon<br>
     <br>
     a red wheel<br>
     barrow<br>
     <br>
     glazed with rain<br>
     water<br>
     <br>
     beside the white<br>
     chickens</p>

表示結果：

補足：CSSで余白を調整する方法

なお、要素間の視覚的な余白（マージンやパディング）を調整したい場合は、HTMLタグではなくCSSのmarginやpaddingプロパティを使うのが一般的です。また、white-spaceプロパティを「pre」や「pre-wrap」に設定すれば、<pre>タグと同様に空白や改行を保持できます。レイアウト制御はCSSに任せ、 や<br>は文章の意味的な区切りに使うのが、より良い設計とされています。

まとめ

この記事では、HTMLで空白を追加する3つの方法を紹介しました。

• &nbsp;（ノーブレークスペース）：テキスト内に追加の空白を挿入したいときに使う
• <pre>タグ：空白や改行をそのまま保持して表示したいときに使う
• <br>タグ：行間に空白行を作りたいときに使う

これからHTMLを学び始める方は、ぜひ関連ガイドも参考にしてください。「HTML学習ガイド：ハイパーテキストマークアップ言語の学び方」や「HTMLの習得に必要な期間はどのくらい？」といった記事が、学習の第一歩として役立ちます。