通常の半角スペースではない謎の半角スペースとは？【HTML】

こんにちは
HTML5プロフェッショナルレベル1に独学で合格した星野です。

半角スペースと同じぐらいの大きさなのに半角スペースではない空白に遭遇したことはありますか？

そんな摩訶不思議な事件を紹介します。

通常の半角スペースではない謎の半角スペースとは？

下記が実際のソースコード上の画像です。

1行目と2行目の→ ←の中のスペースは違うものです。

実際に半角スペースで検索して見ると…（ヒットした場所が黄色になります）

ブラウザ上ではちなみに同じ半角スペースとして検索にヒットします。

半角スペースです→ ←

普通の半角スペースではないスペースです→ ←

しかし上記をコピペしてエクセルに張り付けた後に、エディター（メモ帳・サクラエディタ・Visual Studio Code（以後VSCode）など）に貼り付けると別のスペースとして認識されます。

※スペースの横の文字も一緒にコピーしてください。
※最新版のVSCodeでは、『不可視の文字の強調表示』を無効にしていない限り謎の半角スペースの方は黄色く目立つようになってます。

謎の半角スペースの正体は だった！

最新版のVSCodeで謎の半角スペースに、カーソルを合わせてみると、ユニコード番号U+00a0と書いてありました。

これを調べると だということが分かりました。

通常の半角スペースを連続してHTMLにコーディングするとWEBブラウザの表示では1つになるので、連続して半角スペースを使いたい場合に を使用することが多いようです。

ちなみに、全角スペースであれば連続しても無視されずに表示されます。

最後によく見かける半角スペースぐらいの大きさのスぺースの詳細が下記です。

その他にも、あまり見かけることはないですが色んなスペースがあります。
全角スペースも似たような大きさで色々あります。
参考にどうぞ→スペース – Wikipedia

まとめ

エディター上では、別の半角スペース認識されるがブラウザの検索では同じ半角スペースと検索されたりするので、WEB制作の現場などでは結構トラブルの原因になりますね。

スペースに色んな種類があることを事前に知っておくことでトラブルの防止につながるかと思いま す。