【初心者向け解説】htmlで半角スペースを入れる方法２選

htmlで半角スペースを入れても画面に反映されないよ～

HTMLの仕様で、連続する半角スペースは1つにまとめられちゃうんだ

半角スペースは、HTMLでテキストや要素の間にスペースを入れるための重要な要素です。
しかし、半角スペースを正しく入れる方法を知らないと、意図しない表示の問題が発生する可能性があります。
この記事では、HTMLで半角スペースを入れる方法や注意点について解説します。

HTMLの仕様と半角スペース

HTMLの仕様では、連続する半角スペースが1つにまとめられるという特徴があります。

これは、テキストの表示上の効率化や余分なスペースの削減を目的としています。
したがって、キーボードから入力した連続した半角スペースは、ブラウザによって表示されないように処理されることがあります。

例を見てみましょう。
下の例は、半角スペースをそれぞれ、１個と３個入れてみた例です。

コード

<p>半角 スペース１個</p>
<p>半角   スペース３個</p>

実際の表示

この通り半角スペース１個は表示されていますが、３個並べてもスペース１個分にまとめられてしまいました。

連続した半角スペースを入れる方法

特殊文字「 」を使用する

HTMLでは、特殊文字を表現するためにエンティティ参照を使用します。
「 」は半角スペースの代替として使用されます。

「 」を使用することで、連続した半角スペースを正確に表示することができます。

コード

<p>半角&nbsp;スペース１個</p>
<p>半角&nbsp;&nbsp;&nbsp;スペース３個</p>

実際の表示

以上のように連続した半角スペースを入れることができました。
ただ、htmlのコードが見づらくなってしまうという欠点はあります。

半角スペースが必要な箇所が少ない場合や、次に紹介するcssを使用する方法がめんどくさい場合は、こちらの方法で簡単にすましても良いでしょう。

CSSを使用した方法

次に紹介するのはCSSを使用する方法です。
こちらは、特に裏技というわけでもなく、普通にpaddingやmarginを使用してスペースを確保しようという訳です。

たしかに、「 」を使用する方法に比べてめんどくさいですが、この方法でスペースを入れるメリットとして、

• 「 」を使用するよりコードがスッキリする。
• デザイン通りのスペースを設定できる。

コード

<p><span class="mr-5">半角</span>スペース１個</p>
<p><span class="mr-15">半角</span>スペース３個</p>

<style>
.mr-5 {
   margin-right:5px;
}
.mr-15 {
   margin-right:15px;
}
</style>

実際の表示

「 」連打だと、細かくスペースが調整できませんが、cssなら好きにスペースを調整できますね。

まとめ

以上がhtmlで半角スペースを入れる方法でした。

半角スペースを正しく使用することで、テキストや要素のレイアウトをより正確に制御することができます。
エンティティ参照やCSSの活用を通じて、適切なスペースの挿入方法をマスターしましょう。