HTMLで空白を入力するにはどうすればいいですか？

HTMLで空白を入力するには？

HTMLで空白を入力するには？

HTMLで文章を作成する際、スペースキーを押して空白を入力しても、ブラウザ上では1つ分の空白として表示されます。 これはHTMLが連続する空白文字を1つにまとめるという性質を持つためです。 では、HTMLで意図した数の空白を入力するにはどうすれば良いのでしょうか？

HTMLで空白を入力する方法

HTMLで空白を入力するには、主に以下の3つの方法があります。

1.   (ノンブレークスペース)

  は、HTMLの特殊文字コードで、「ノンブレークスペース」を意味します。 これは、通常の半角スペースとは異なり、ブラウザ上で空白として表示され、改行されません。 

<p>この単語と この単語はくっつきます。</p>
表示例：

この単語と この単語はくっつきます。

2. (Unicode文字参照)

は、Unicode文字参照を使用して半角スペースを表現する方法です。   と同様に、ブラウザ上で空白として表示されます。 

<p>この単語と この単語はくっつきます。</p>
表示例：

この単語と この単語はくっつきます。

3. (preタグ)

 タグは、HTMLの中で記述した空白や改行をそのままブラウザに表示したい場合に使用します。
 プログラムのソースコードなどを表示する際に便利です。



<pre>
この    ように
空白    を
        自由に
        入力できます。
</pre>



表示例：


この    ように
空白    を
        自由に
        入力できます。




空白文字の違い


| 方法             | 記述   | 特徴                                    |
|--------------------|--------|-----------------------------------------|
|              |   | 半角スペース、改行されない               |
|             |   | 半角スペース、改行されない               |
| 
タグ内の空白 |        | 入力した空白や改行がそのまま表示される |


まとめ


HTMLで空白を入力するには、  や   、
タグを使用する方法があります。 
状況に応じて使い分けることで、思い通りのレイアウトを実現することができます。

## 関連記事

- [HTMLの特殊文字](https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started#%E7%89%B0%E5%BD%A2%E3%81%A8%E7%89%B9%E6%AE%8A%E6%96%87%E5%AD%97) (MDN Web Docs)

## HTML空白入力に関するQ&A

**Q1.   と   の違いは何ですか？**

**A1.** 表示結果はどちらも同じですが、 は文字実体参照、 は文字数値参照という違いがあります。
      文字実体参照は、よく使われる特殊文字に名前をつけて参照する方式で、文字数値参照は、文字コードを直接指定する方式です。

**Q2. preタグを使うデメリットはありますか？**

**A2.** preタグを使用すると、その中の文字は等幅フォントで表示されます。
      また、デフォルトでは、preタグ内の長い文章は折り返されずに、はみ出して表示されてしまいます。
      折り返したい場合は、CSSで`white-space: pre-wrap;`を指定する必要があります。

**Q3. スマホサイトで空白を調整するには？**

**A3.** スマホサイトでは、PCサイトと比べて画面サイズが小さいため、空白の調整が重要になります。
         や 
タグで空白を調整するだけでなく、CSSの `margin` や `padding` を活用して、
      要素間の余白を調整するのが効果的です。


その他の参考記事:css 吹き出し ジェネレーター