【初心者向け】HTMLで半角スペースを入れる方法

こんなときに使う、半角スペース

半角スペースはこんなときに使えます。

長い文章を書くときの字下げなどの文章の調整に

話題が変わるとき、段落を変えるときにスペースで余白を作る方法があります。

わかりやすいように、半角スペースを❚で表しています

テキストのデザインの微調整に

文章中、強調したい部分にスペースを開けて表現する方法もあります。

わかりやすいように、半角スペースを❚で表しています

折り返したくない単語の間のスペースに

次項で紹介する特殊文字、 はNon breaking spaceの略で、日本語でいうと改行なしスペース。英単語では複数単語で一つの言葉を表す場合に、文章中で改行してほしくない場合が出てきます。このときに、 を使っておくとそれ以外の部分でHTMLの文章が改行されるというわけです。実はこれが本来の使い方なんです。もちろん、日本語でもこの用途で使用できます。

半角スペースに を使用していない場合

半角スペースに を使用した場合

特殊文字を使って半角スペースを入れる方法

特殊文字とは？

こちらが、半角スペースをHTMLに表示させる特殊文字(エスケープシーケンスとも言います)のコードです。

&から;まで6文字すべて必要です。特に;はよく書き忘れてしまいますので注意してくださいね。

半角スペースの特殊文字のコード

実は他にも同様に、スペースを入力するための特殊文字があります。少しずつ用途が違いますので、必要な場合は使い分けてくださいね。

特殊文字で半角スペースを連続で入力する方法

通常、連続して半角スペースを入力すると、HTMLで表示した際は複数の半角スペースは消えてしまいます。

サンプルコード

わかりやすいように、半角スペースを❚で表しています

表示結果

複数の半角スペースを連続で入力したい場合も、特殊文字を使用していれば反映されます。

サンプルコード

表示結果

わかりやすいように、半角スペースを❚で表しています

まとめ

HTMLには特殊文字というものがある、というのだけでも覚えておけば、&のついた謎コードがHTMLに出てきても、もう怖がらなくて大丈夫ですね！半角スペースを使って、思ったとおりのデザインを実現してください！