※こちらの記事は、プロスタ編集部が学習者の多いHTMLの文法記事を公開することで、皆様の学習にお役に立ちたい意図で投稿しております。
参考サイト：【HTML入門】スペース(空白)を表示させる3つの方法

#【HTML入門】スペース(空白)を表示させる3つの方法

HTML上で空白や改行を入力したのに、思った通りにブラウザで表示されなかったことはありませんか。
例えば、

<html>
  <head>
    <title>プロスタ</title>
  </head>
  <body>
  プロスタは         
  プログラミング初心者が         自分に合った勉強法を見つけられるサイト   です。
  </body>
</html>

「プロスタはプログラミング初心者が自分に合った勉強法を見つけられるサイトです。」という文章を以上のようにHTML上に入力しても、下記のように表示されます。

プロスタはプログラミング初心者が自分に合った勉強法を見つけられるサイトです。

ブログ等とは異なり、HTML上に半角スペースや改行をいくら入力しても、ブラウザ上では空白が一つ分に詰められて表示されます。今回は、HTML上でスペースを詰めずに連続したスペースを空ける方法をご紹介します。

目次
1 特殊文字を用いた方法
2 preタグを使う方法
3 全角スペース

##特殊文字を用いた方法

連続でスペースを表示させる最も一般的なやり方が特殊文字を用いた方法です。半角スペースを連続で表示するには、「」という特殊文字を使います。特殊文字とは、HTMLに記述してもブラウザで直接表示することが出来ない文字や記号のことです。例えば、HTML上でpタグと表示したい時は、

と記述するとタグと解釈されてしまい上手く表示できないので、<を表す「<」と>を表す「>」を使って、「<p> 」と記述する必要があります。

HTML上の表示

<html>
  <head>
    <title>プロスタ</title>
  </head>
  <body>
  プロスタは&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;プログラミング初心者が自分に合った勉強法を見つけられるサイトです。
  </body>
</html>

ブラウザ上の表示

プロスタはプログラミング初心者が自分に合った勉強法を見つけられるサイトです。

の他にも空白を表す特殊文字があります。
・　通常の半角スペースと同じサイズの空白です。
・　半角スペースより少し広めの空白です。
・　半角スペースよりさらに広めの空白です。全角スペースとほぼ同じ幅です。
・　より狭い空白です。

##preタグを使う方法

preタグを使えば、HTMLに記述された半角スペースや改行などをブラウザにそのまま表示することができます。

HMTL上の表示

<html>
  <head>
    <title>プロスタ</title>
  </head>
  <body>
  <pre>
  プロスタは     プログラミング初心者が自分に合った勉強法を見つけられる      サイトです。</pre>
  </body>
</html>

ブラウザ上の表示

プロスタは　　　プログラミング初心者が自分に合った勉強法を見つけられる　　　　サイトです。

##全角スペース
半角スペースではなく、全角スペースを使って連続してスペースを空ける方法があります。日本語入力に切り替えた後、スペースキーを入力すれば、入力回数分だけそのまま空白が表示されます。

HTML上の表示

<html>
  <head>
    <title>プロスタ</title>
  </head>
  <body>
  プロスタは　　　プログラミング初心者が　　　　自分に合った勉強法を見つけられるサイトです。
  </body>
</html>

ブラウザ上の表示

プロスタは　　　プログラミング初心者が　　　　自分に合った勉強法を見つけられるサイトです。

いかがでしたか。今回は、①特殊文字②preタグ③全角スペースを使って連続でスペースを表示させる方法をご紹介しました。ぜひ、実際に記述してみてスペースを表示できるか確かめてみてください。