HTMLでスペース・空白を入れる4つの方法をご紹介！

例として半角スペースでスペースを空ける事をしてみます。「あいうえお」「かきくけこ」半の間に角スペースを6個入れてみます。

結果を見てみると、半角スペースを6個入れたにも関わらず、半角スペース1個分しかスペースが空いていませんね。

これはなぜかと言いますと、HTMLでは半角スペースでインデントをすることが多く、すべての半角スペースが有効になると、HTMLの表示が崩れてしまうため、このような仕様となっています。

ではHTMLで自分の思い通りにスペースをを開けたり、空白を挿入する方法はないのでしょうか？

実はHTMLで空白を挿入してスペースをあける方法はいくつかあり、そのやり方について今回ご紹介していきます。

それではHTMLでスペースを空ける方法を3つご紹介していきます。

半角スペースの代わりに空白を表す特殊文字を利用することでスペースを空けることができます。

スペースが空くようになる特殊文字をご紹介します。

では実際に使ってみましょう。

いかがでしょうか。特殊文字で空白を入れることができました。
（余談ですが、ガラケー時代にはCSSが効かず、スペースをあけるのによくこの方法で余白調整をしている時代がありました。）

半角スペースでは1つ分しか効きませんでしたが、実は全角スペースであれば複数の全角スペースを入れることで、ちゃんとその分スペースが空きます。

今回3つ全角スペースをいれてみましたが、ちゃんと3つ表示されていますね。

ただし全角スペースを使ってスペースをあける方法はどこに全角スペースがあるのか他のエンジニアからすると見分けることが難しく、そのため好ましくない方法とされています。

自分だけが扱うコードならいいかもしれませんが、チームで開発している場合は全角スペースは避けましょう。

次にpreタグを利用する方法です。preタグはpreタグで囲われた内容をそのまま表示するタグです。preタグの詳細を知りたい方は下記のリンクを見てみましょう。

preタグを使って半角スペース3個分あけてみましょう。

いかがでしょうか。ちゃんと半角スペースが3個分空いていますね！
preタグじゃないと、半角スペース1個のみですが、preタグを使うことで記述したスペースがそのまま表示されます。

さて、最後はCSSを使う方法になります。CSSでは余白を調整するmarginを使う方法と、文字の間隔を調整するletter-spacingをご紹介します。

余白を調整するCSSのプロパティの「margin」と「padding」を使って余白を空ける方法です。下記の例を見てみましょう。

marginとpaddingと右側（right）を指定して、10pxの余白をあけています。この方法を利用する場合は余白をあける文字通しが別のタグで指定する必要がある点に注意です。
（今回はspanタグを使っている）

文字間隔を調整するプロパティのletter-spacingを使って余白をあけてみましょう。

letter-spacingに10pxを指定しています。この場合文字と文字の間に10px分のスペースが生まれます。

このようにCSSのmargin、paddingやletter-spacingでもスペースを調整することが出来ます。

いかがでしたでしょうか。HTMLで空白を入れる必要がある場合は、空白タグを使う方法でも出来ますし、CSSで調整することも可能です。

デザインの問題はなるべくCSSで対処するのがセオリーとなります。もちろん特殊なケースもあるかと思いますので、ケースバイケースで対応しましょう！