HTMLでスペース（空白）を作成する方法6選！サンプルコード付き！

こんにちは！
HTMLでスペース(空白）を空けたいけど、思うようにスペースを空ける事ができずに、困った事はありませんか？実は、wordなどのテキストファイルでスペースを作成する方法と、HTMLでスペースを作成する方法はルールが違います。
今回は、HTMLで具体的にスペースを作成方法を6つと、それぞれのメリット・デメリットを詳しく解説していきます。

1.HTMLでスペースを作成する具体的な方法6選

それではさっそく、HTMLでスペースを作成する方法を紹介していきますが、長くなりますので、冒頭で各方法を簡単に説明します。

方法1:全角スペースでスペースを作成する方法
全角スペースでスペースを作成します。
全角スペース1個分で、全角スペース1個分のスペースを空ける事ができます。
wordなどのテキストファイルと同じ方法で、簡単に作成できますが、HTMLではデメリットもあるので非推奨となっています。

方法2:半角でスペース作成する方法
半角スペースでスペースを作成します。
半角スペース1個分で、半角スペース1個分のスペースを空ける事ができます。
wordなどのテキストファイルと同じですが、HTMLでは半角スペースを何回打っても、半角1個分のスペースしか空ける事ができません、こちらも非推奨となっています。

方法3:特殊文字でスペースを作成する方法
特殊文字を使用して、スペースを作成する事ができます。
視覚的でわかりやすく、スペース1個分の空白を作成するのにお勧めです。

方法4:CSSスペースを作成する方法
※一番お勧めの方法です。迷ったらこちらの方法だけを見てください。
スペースの幅をpx.em単位で指定できるので、web制作の現場でもっとも使われています。

方法5:preタグでスペースを作成する方法
preタグでスペースを作成する方法です。
preタグで囲んだ中は、wordなどのテキストファイルと同じように、スペースがそのまま反映されます。

方法6:改行をしスペースを作成する方法。
改行を行うことで、半角スペースを作成する事ができます。

それでは上記6点を詳しく解説していきます。

1-1.方法１：全角スペースでスペースを作成する方法

サンプルコード表示結果

HTMLサンプルコード

<p>おはよう　こんにちは　　こんばんは</p>

※解説
おはようの右隣に全角スペース1個分、こんにちはの右隣に全角スペース2個分のスペースを空ける事ができました。
簡単にできますね！表示はできますが、なるべく避けた方が良いやり方です。
理由は、
●他の人がコードをみた時に、そのスペースが意図して入れられたものなのか、間違えてスペースを入れてしまったのかを、全角だけでは判断できない。
●コードを見ても全角スペース何個分のスペースが空けられているのかがわかりずらい。
●全角1個単位からの指定となり、px.em単位のスペース幅の調整ができない。

○全角スペースでスペースを作成するメリット・デメリット

●メリット
・簡単にスペースを作成できる。
・wordと同じように全角スペース1個分に対して、全角スペース1個分のスペースを作成できるのでわかりやすい。

●デメリット
・他の人がコードをみた時に、そのスペースが意図して入れられたものなのか、間違えてスペースを入れてしまったのかを、全角だけでは判断できない。
・コードを見ても全角スペース何個分のスペースが空けられているのかがわりずらい。
・全角スペース1個単位からの指定となり、px.em単位のスペース幅の調整ができない。

1-2.方法2:半角スペースでスペースを作成する方法

サンプルコード表示結果

HTMLサンプルコード

<p>おはよう こんにちは            こんばんは</p>

※解説
こんにちはの右隣は、10個分の半角スペースを空けているにもかかわらず、表示は、半角スペース1個分のスペースのみしか空いておりません。
半角スペースを何回入力しても、1回分のスペースしか空ける事ができません。
また、他の人がコードをみた時に、そのスペースが意図して入れられたものなのか、間違えてスペースを入れてしまったのかを、判断する事ができないので、極力使用しない様にしましょう。

半角スペースでスペースを作成するメリット・デメリット

●メリット
・簡単にスペースを作成できる。

●デメリット
・半角スペースは、何回入力しても半角スペース1個分のスペースしか空ける事ができない。
・他の人がコードをみた時に、そのスペースが意図して入れられたものなのか、間違えてスペースを入れてしまったのかを、判断できない。

1-3.方法2：特殊文字でスペースを作る方法

特殊文字4点

サンプルコード表示結果

HTMLサンプルコード

<p>おはよう&nbsp;こんにちは</p>
<p>おはよう&ensp;こんにちは</p>
<p>おはよう&emsp;こんにちは</p>
<p>おはよう&thinsp;こんにちは</p>

※解説
特殊文字を記入し、特殊文字に指定されたスペースを空ける事ができます。

特殊文字でスペースを作る、メリット・デメリット

●メリット
・どのようなスペースを、何個空けたいのか視覚的にわかりやすい。

●デメリット
・スペースを多く空けたい場合、コード量が多くなり見づらくなる。
・特殊文字を覚えておく、もしくは調べなければならない。

もし頻繁に特殊文字を使われる場合は、こちらをブックマークしておくと良いかもしれませんね！
　　https://pasomaki.com/html-space-special-char/ 　　

1-4.方法3 cssでスペースを作成する方法

●一番おすすめの方法です！
理由は、スペースの幅をpx.em単位で細かく指定できるので、web制作の現場でもっとも使われている為です。

サンプルコード表示結果

HTMLサンプルコード

<p><span class="mgr-10">おはよう</span>こんにちは</p>

CSSサンプルコード

.mgr-10 {
    margin-right: 10px;
    }

※解説
スペースを入れたいテキストを＜span＞タグで囲い、spanにクラスを付与し、margin-right: 10pxを指定します。
おはようの、右隣に10pxスペースを作制する事ができました。

○CSSでスペースを作る、メリット、デメリット

●メリット
・pxやem単位でスペースを指定できる為、web制作の現場でもっとも使われている。

●デメリット
・HTMLだけで完結しない。
・HTMLの該当箇所にspan,classを記述し、かつCSSファイルを編集する為作業が多い。

1-5.方法4 preタグでスペースを作成する方法

サンプルコード表示結果

HTMLサンプルコード

<pre>おはよう こんにちは         こんばんは
おはよう こんにちは         こんばんは
<pre>

※解説
＜pre＞〜＜/pre＞で囲むとHTMLで記述した、半角スペース、全角スペース、改行をそのままブラウザに反映させる事ができます。

○preタグでスペースを作る、メリット・デメリット

●メリット
・HTMLで記述した通りのブラウザ表示になるのでわかりやすい。

●デメリット
・preタグで囲う必要がある。
・レスポンシブで表示が崩れる事がある。

1-6.方法5 改行でスペースを作成する方法

改行する事で半角スペースを作成します。
サンプルコード表示結果

HTMLサンプルコード

<p>おはようこんにちは
こんばんは</p>

※解説
改行する事で、「こんにちは」の右隣に半角スペースを作り出す事ができています。

○改行でスペースを作る、メリット、デメリット

●メリット
・改行する事でスペースを作成するメリットはないが、改行すると「半角スペースが生まれてしまう」という事を知っておくと、意図しない半角スペースがある場合の原因に気づく事ができる。

●デメリット
・わざわざ改行をしないといけないので、コードがわかりずらくなる。

2.文字の間隔指定する方法

今回の「HTMLでスペースを空ける方法」とは少し意味合いが違いますが、良く使用されるので、紹介させて頂きます、興味のある方はご覧ください。

文字幅の間隔を指定できるCSSプロパティ「letter-spasing」です。
サンプルコード表示結果

HTMLサンプルコード

<p>おはようこんにちはこんばんは</p>

CSSサンプルコード

p {
   letter-spacing: 5px;
    }

※解説
文字幅の行間が広くなったのがわかると思います。
「letter-spasing」は、一部の文字のみでなく、文字の行間を全体的に広げたい場合に使用するcssのプロパティです。
よく使われるcssプロパティですので、ぜひ使用してみてください。

まとめ

最後にポイントをまとめます。
HTMLでスペースを空ける方法を6点、さらに文字の間隔を指定する方法を1点紹介しました。

①　方法1:全角でスペースを作成する
②　方法2:半角でスペース作成する
③　方法3:特殊文字でスペースを作成する
④　方法4:cssでスペースを作成する　※1番おすすめ
⑤　方法5:preタグでスペースを作成する
⑥　方法6:改行をしスペースを作成する
⑦　letter-spasingで文字の間隔指定する

いかがだったでしょうか？
今回はHTMLスペース（空白）について解説しました。簡単に作成する事ができます。
サンプルコードもありますので活用してみてくださいね！