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



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

HTMLでも文章を書くときに、 空白 (スペース) が「思い通りにいかない!」と困ったことも多いのでは?書き方を紹介しますので、ぜひ使ってくださいね!

目次
  1. HTMLのスペースとは?
  2. HTMLでスペース(空白)を入れる方法
  3. 日本語全角で空白を入れる方法
  4. 特殊文字を使う方法
  5. pre タグを使用する方法
  6. スペースを連続していれる方法
  7. まとめ

HTMLのスペースとは?

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

HTMLファイル
ABCDEFG▮▮▮▮HIJK▮▮▮▮▮LMN
ブラウザ
ABCDEFGHIJKLMN

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

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

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

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

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

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

HTMLファイル
あいうえおか■■■■きくけこ■■■■■さしす
ブラウザ
あいうえおか■■■■きくけこ■■■■■さしす

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

特殊文字を使う方法

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

 

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

HTMLファイル
ABCD EFG    HIJK     LMN
ブラウザ
ABCDEFG▮▮▮▮HIJK▮▮▮▮▮LMN

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

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

特殊文字 表示サンプル 説明
  普通の 半角スペース 半角スペース(改行しない)
  広めの スペース 広め
  全角幅 スペース もっと広い
  せまい スペース 狭い

pre タグを使用する方法

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

<pre> 〜 </pre>
HTMLファイル
<pre>
ABCDEFG▮▮▮▮HIJK▮▮▮▮▮LMN
</pre>
ブラウザ
ABCDEFG▮▮▮▮HIJK▮▮▮▮▮LMN

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

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

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

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

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

まとめ

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

のりぴよ
この記事を書いた人
のりぴよ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp