CATEGORY

HTMLで空白を入れたい時に使う謎の文字  とは?

  • Facebook 記事をシェア
  • Twitter 記事をツイート
  • LINEで送る

wordpressなどのCMSで記事を編集していると   という謎の文字列に出会うことがあります。「勝手に入ってしまうコイツなんなの?」と思っている人も、はたまた「半角スペースを入れたいときに意図的に使っているぜ!」っていう人もいることでしょう。意外と知られていない   の正体について解説します。

 

半角スペースを入れたいときには役立つタグ

HTMLの文中に   を挿入すると半角スペース分の間隔を空けてくれるという機能を果たしてくれます。そのため「  は半角スペースを入れたい時に使うもの」という認識の方も多いのではないでしょうか。

 

本来の役割は「改行の禁止」

実は   の本来の役割は「半角スペースの代わり」ではありません。本来は「改行の禁止(=当該空白部分での自動的な改行を防ぐ)」という機能を果たすものだそう。英文などの場合、単語と単語の間は半角スペースで区切られますが、例えば会社名など複数単語でひとつながりのものを改行させずに表示したいときなどに使うのが、  なのです。

 

読み方は「ノーブレークスペース」

あまり声に出して読む機会はないと思いますが、ノーブレークスペースと読みます。

コンピュータにおいて、ノーブレークスペース (no-break space, non-breaking space, NBSP) は、スペースの箇所での自動的な改行(行の折り返し(英語版))を防ぐ特殊なスペースである。ノンブレーキングスペース(non-breaking space)、ハードスペース(hard space)、固定スペース(fixed space)とも呼ばれる。HTMLのようにホワイトスペース文字(英語版)の並びを1つのスペースにまとめるシステムで、行内に複数のスペースを入れるために使うこともできる。

出典: フリー百科事典『ウィキペディア(Wikipedia)

 

なぜ勝手に入ってしまうことがある?

HTMLの基本ルールとして、タグ間の文字列中に記述された半角スペースは、いくつ挿入しても、半角スペース1つ分でしか表示されません。

ビジュアルエディタを使って本文中に半角スペースを複数挿入した場合には、実際にはこの   のように半角スペースとして機能する特殊な文字に置換されているのです。

これをHTMLモードに切り替えてみたときには「意図しない文字列なのに勝手に入ってくる」ように見えるというわけです。

 

  を半角スペースとして使ってはいけない?

単に空白スペースとして使っても。いけないということはありません。   ただし、空白を挿入するための特殊文字列は本来は別に用意されています。そちらも併せて適宜使い分けるとよいでしょう。

   半角スペースよりやや広いスペース
   全角スペース
   半角よりさらに小さいスペース
 

また、余白を大きく取りたい場合などには、特殊文字で調整するのではなくCSSを編集するなど、より適切な対応をとるべきです。

 

現場からは以上です!

 

 

おすすめの関連記事