HTMLで空白(スペース)を表示する方法

Webページ(HTML)を勉強したての頃、簡単なタグなどしか扱えなくて文書中の空白(スペース)を特殊記号で連発していた時期がありました(笑)

数年経った今では全然使わなくなっていたんですが、つい最近使う機会があったのですが、あんなにも使っていたのに記号を全く思い出せませんでした。。

なので、自分の備忘用+HTML初心者の方向けに残しておこうかと思います。

空白(スペース)を表示する3つの方法

  1. 半角・全角スペースを使って表示
  2. 特殊文字を使って表示
  3. Preタグを使って表示

半角・全角スペースを使って表示

これはもう説明も不要かもしれませんが、スペースキーを入力して空白(スペース)を表示する方法です。全角スペースは入力した分だけ、空白(スペース)が表示されます。

半角スペースの決まりごと
・半角スペースは、複数入力しても1つ分の半角スペースしか表示されません。

特殊文字を使って表示

次のように特殊文字を使うことで空白(スペース)を表現できます。

  通常の半角スペースと同じサイズの空白(スペース)です。
  半角スペースより少し広い空白(スペース)です。
   よりさらに広い空白(スペース)です。
全角スペースとほぼ同じサイズです。
   よりも狭い空白(スペース)です。

See the Pen
OdXWeO
by ふくねこ (@fukuneko7777)
on CodePen.

Preタグを使って表示

preタグというものを使うと、HTMLに記述した半角スペースや改行などをそのままブラウザに表示できます。

See the Pen
exzvjp
by ふくねこ (@fukuneko7777)
on CodePen.

まとめ

あまり使用頻度は高くないと思いますので、HTML初心者の方は記号で空白(スペース)を表示できるっていうことだけを頭の片隅にでも覚えておく程度でOKだと思います。