【HTML初心者向け】誰でも簡単にスペースを入れる３つの方法

HTMLのスペースとは？

文章の途中で単語を強調したり、段落のあと一文字開けたりなど、細やかな調整に便利なスペース。

わかりやすいように、半角スペースを▮としています

サンプルのようにHTMLファイル上で半角スペースを何個も入力しても、ブラウザで表示させると、書いた通りには反映されません。どうしたらいいのでしょうか？

HTMLでスペース(空白)を入れる方法

ねらった通りに空白を入れる方法がいくつかありますので、みていきましょう！

日本語全角で空白を入れる方法

これは最も簡単な方法です。半角スペースではなく、全角で空白を入れてみましょう。日本語の1文字と認識され、入力したぶんだけ空白が入ります。

ただし、日本語全角スペースはフォントやブラウザによって微妙に表示が異なる場合があります。全角スペースをデザインのために利用すると崩れてしまう可能性があるので、注意しましょう。

特殊文字を使う方法

特殊文字を使って半角スペースを表示する方法があります。

HTMLファイル中に と記述すると、半角スペースが挿入されます。&も;も必要なので、書き忘れないでくださいね！

半角スペースを入力したい半角スペースの数だけ、 を繰り返して書きます。

スペースを表示できる特殊文字には、他にもこのようなものがあります。

pre タグを使用する方法

preタグとは、このエリアには入力した文字をそのまま表示するというタグです。これを使ってスペースを表示する方法もあります。

囲むだけなので手軽ですね。プログラムコードなど複数の行でたくさんのスペースを使いたい文に向いていそうです。

スペースを連続していれる方法

これは、もうおわかりですね！スペースを連続で入力するには・・・

• preタグで文章を囲む
• 特殊文字を連続して記載する

こちらで実現できますね。

まとめ

必要な場所にスペースを使えるようになると、読みやすい・見やすいサイトに近づくことができますね。細やかな文章の調整に、今回の方法をぜひ使ってみてください！