【連続使用NG】HTMLで半角スペース分の空白を作る方法を解説

2021.09.17
半角スペース html

HTMLでブラウザに表示されるテキストを入力している際、

「HTMLの文章中に半角スペースで空白を作りたい」

「半角スペースって連続して使用しても良いの?」

と思ったことはありませんか?

ブラウザで表示される文章を見やすくするのに、空白を作ることは必須です。

この記事では

  • HTMLで半角スペース入力するとどう反映されるのか
  • 特殊文字を使って半角スペース分の空白を作る方法
  • HTMLにおいて正しい空白の作り方

といったことがわかる内容になっています。

半角スペースを連続入力した場合の反映結果や、スペースや特殊文字を使う時の注意点なども解説しますので、ぜひ最後まで見てくださいね。

HTMLで「半角スペース」を入力した場合どう反映されるのか?

Wordやメールなどで文章を入力している際、半角スペースはそのまま1文字の約半分の空白として表示されます。

では、HTML文章中ではどのように表示されるのでしょうか?

以下のHTMLコードをサンプルに、実際にどのように反映されるか確認してみます。

<!-- HTML -->
  <body>
    <p>半角スペースを| |に1個入力しています。</p>
    <p></p>
  </body>

▼ブラウザ表示画面▼

半角スペースを| |に1個入力しています

「→」と「に」の間に1回分の半角スペースを入力してますが、ブラウザ表示でも半角スペースが表示されていることがわかります。他のブラウザでも表示結果は同じです。

HTMLで反映されるテキスト内に半角スペースを連続入力した場合

半角スペース1個であれば、空白が表示されることがわかりました。

では、半角スペースを連続して複数入力した場合はどうなるのでしょうか?

以下のHTMLコードをサンプルに、実際にどのように反映されるか確認してみます。

<!-- HTML -->
  <body>
    <p>▼半角スペースを10個入力しています。▼</p>
    <p>|          |</p>
  </body>

「」の間に10個の半角スペースを入力した結果、以下のように表示されました。

▼半角スペースを10個入力しています。▼ | |

10個も入力した半角スペースは、「半角スペース1個分」としてしか表示されていません。

いくつ入力したかに関わらず、ブラウザの違いも関係なく「半角スペース1個分」しか空白として表示されないことになっているのです。

HTMLで入力した半角スペースが反映されないのはなぜ?

プログラミング学習をしている際、コードをキレイに書くために「字下げ」しよう!ということを聞いたことがないでしょうか?

この字下げには、多くの半角スペースを使用します。

それにも関わらず、ブラウザに表示される箇所にも半角スペースを反映させてしまっては、どちらが字下げ用の半角スペースなのかコンピューターが理解できません。

このことによって発生する「レイアウトが崩れ」を防ぐために、デフォルトで半角スペースは字下げ以外で効かなくなっているということです。


プログラミングスキルを身につけて、アプリケーションWEBサービスを作りたい方へ!
DMM WEBCAMP】は、独学では挫折率の高いプログラミング学習を徹底サポートします。
✔受講生の97%が未経験からのスタート!
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる!
✔基礎知識をゼロから丁寧に学習できるコースを用意!

あなたに合ったカリキュラムを紹介

HTMLの半角スペースを反映させるには「特殊文字」を使う

半角スペースは、コードを書く際の字下げ用としてしか使用できませんが、半角スペース分の空白をHTMLで作り出すことは可能です。

HTML文章中に空白を作る方法はいくつかありますが、今回はその中でも「特殊文字」を使った方法を解説します。

半角スペース分の空白を作り出せる「特殊文字」とは?

特殊文字とは「記号」+「特殊文字の名称」「;(セミコロン)」で作られる文字のことで、HTMLコードで使用されている記号などを文字としてブラウザに表示させることができます。

例えば、「>」や「&」などのコードで使われているため、そのままでは表示できない記号や、「♡」「①」などのマークが挙げられます。

HTML文章中に空白を表示させる「空白文字」も特殊文字の1つで、以下の4種類があります。

・ 「&nbsp;」:改行しないための空白

・「&emsp;」:一番広い空白(全角スペースとほぼ同じ)

・「&ensp;」:  の大体半分サイズの空白(半角スペースより少し広い)

・「&thinsp;」一番狭い空白( よりも狭い)

「&nbsp;」が、この中で1番半角スペースに近い特殊文字です。

では、それぞれの使い方を解説していきます。

半角スペースと比べてどのぐらいの幅になるのかもわかるようにしていますので、空白の幅を知りたい方も参考になりますよ。

半角スペースの代用として良く使われる「&nbsp;」の使い方

先ほど紹介した4つの特殊の中で、最も半角スペースに近い「&nbsp;」の使い方を解説します。

<!-- HTML -->
  <body>
    <p>半角スペース→| |</p>
    <p>nbsp1個使用→|&nbsp;|</p>
  </body>

▼ブラウザ表示画面▼

半角スペース→| | nbsp1個使用→| |

「&nbsp;」を10個入力してみると、以下のようになります。

半角スペースを|          |に特殊文字で表現しています。

個数に関わらず、しっかり反映されているのがわかるでしょう。

ただし、「&nbsp;」は、本来は文字のブレークポイントを挟むことを目的として使用されるもので、半角スペース分の空白を作るものではありません。

和文ではあまり本来の使い道ができないので、日本では半角スペースを作る際に良く利用されていることから勘違いされる方も多いので覚えておきましょう

半角スペースより少し広い「&ensp; 」の使い方

半角スペースよりも少し幅が広いですが、空白を作る目的で利用される特殊文字です。

実際にどのぐらいの幅になるか以下のコードサンプルで見てみましょう。

<!-- HTML -->
  <body>
    <p>半角スペース→| |</p>
    <p>ensp1個使用→|&ensp;|</p>
  </body>

▼ブラウザ表示画面▼

半角スペース→| | ensp1個使用→| |

全角スペース(1文字分)とほぼ同じ広さの「&emsp;」の約半分の大きさで、およそ8emほどになります。

半角スペースよりも狭い「&thinsp;」の使い方

「細い」という意味を持つ「thin」の名の通り、最も幅の狭い空白文字です。

半角スペースよりも狭いのが特徴なので、ほんの少しだけスペースを開けたいという時にも利用できます。

実際にどのぐらいの幅になるか以下のコードサンプルで見てみましょう。

<!-- HTML -->
  <body>
    <p>半角スペース1個→| |</p>
    <p>thinspを1個使用→|&thinsp;|</p>
  </body>

▼ブラウザ表示画面▼

半角スペース1個→| | thinspを1個使用→| |

【HTMLでの半角スペース連続使用はNG】スペース分の余白はCSSで作る

半角スペースは、コードの字下げ以外で反映されないため、連続(複数)使用は非推奨とされています。

また、半角スペースだけに限らず、空白として反映される全角スペースや特殊文字の多用も避けましょう。

レイアウト崩れや、予期せぬエラーを招く原因となりますので、決して連続(複数)で使用しないでください。

HTML文章中に広めの空白を作りたいという場合は、最も推奨されているCSSでのスタイリングを採用しましょう。

CSSで文字にスペースを作る方法

CSSで空白スペースを作る方法を解説します。

<!-- HTML -->
  <body>
    <p>CSSで|<span></span>|内の空白をスタイリングしています。</p>

    <!-- CSS -->
    <style>
      span {
        margin-left: 100px;
      }
    </style>
  </body>

▼ブラウザ表示画面▼

上記では、spanタグを使ってCSSでスタイリングしています。

CSSで半角スペース分を作りたい場合はemを使うと調整しやすいです。

1文字分は16emと言われていますが、その半部の8emでは半角スペースよりもやや幅広なので、7em前後で好みの広さに調節すると良いでしょう。


未経験からホームページWEBアプリケーションが作れるようになりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔︎未経験からでも実践的なスキルが身に付くカリキュラムを用意!
✔分からないことは、チャットやビデオ通話で講師に好きなだけ質問可能!
✔通学不要!スキマ時間でプログラミング学習ができる!

経済産業省認定の圧倒的カリキュラム

まとめ:綺麗なコーディングはHTMLの半角スペース、余白作りは特殊文字やCSSを使おう

今回は、半角スペースの正しい使い方や、HTML文章中に空白を作る方法について解説しました。

以下、この記事のまとめです。

  • 半角スペースはコードの字下げで使用する
  • HTML文章中の空白には特殊文字を使用する
  • 広い空白を作る時はCSSでスタイリングする

半角・全角スペース・特殊文字を連続で使用すると、ブラウザ表示が崩れ、エラーの原因にもなります。

それぞれの適切な使い方をマスターして、HTMLコードも、ブラウザに表示されるレイアウトも美しく作りましょう!

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

PAGE TOP

© 2021 WEBCAMP MEDIA Powered by AFFINGER5