【イラスト付き】＆nbsp;とは？HTML特殊文字の使い方や勝手に入る理由を解説

ブルーちゃん！

HTMLを勉強してたら、「 」っていうのが出てきたんだけど、これって何？

確かに初めて見ると、ちょっとびっくりしちゃうかもしれないね。

 は途中で改行されない空白のことなんだ。

まずは、 に関する基本的な知識を3つ説明していくね。

「 」は「ノンブレイキングスペース」または「ノーブレークスペースって読むんだよ。

英語の"Non-Breaking Space（No-Break Space）"の略で、nbspという文字が入っているんだ。

 を使うと、文章の途中で勝手に改行されないようにできるよ。

例えば、「Mr. Smith」って書くと、「Mr.」と「Smith」の間で改行されちゃうかもしれないけど、「Mr. Smith」って書けば、必ず「Mr.」と「Smith」は同じ行に表示されるようになるよ。

他にも「100 km」みたいに、数字と単位を離さないようにしたいときにも使えるよ。

実はいくつか原因があるんだけど、主にWordPressでビジュアルエディタを使ってる時に起こりやすいんだ。

ビジュアルエディタは、見た目を整えるために自動的にHTMLを調整することがあるんだ。

そうなんだよ。特に、WordPressの場合は、ビジュアルエディタモードで空白を入力した後にテキストエディタに切り替えると、自動的に が挿入されているケースがあるんだ。

場合によってはね。例えば、デザインを細かく調整したいときに、予期せぬ空白が入ってレイアウトが崩れちゃう可能性があるんだ。

だから、公開前にHTMLをチェックして、必要に応じて修正してね。

空白文字は文字と文字の間を空ける役割を持つ文字のことで、特殊文字はHTMLで特別な意味を持つ文字のことを指すんだ。

例えば、空白文字には半角スペース、全角スペース、タブなどがあって、これらは文字間や段落間の空白を作るために使うんだ。

特殊文字には、「<」「>」「&」などがあるよ。

これらの文字は、HTMLの中で特別な意味を持つから、そのまま使うと正しく表示されないことがあるんだよね。

「エンティティ」という特殊な記号を使うと、ブラウザは普通の文字として表示してくれるんだ。

よく使われる特殊文字とエンティティを少しだけ紹介するね。

必ず&nbsp;じゃないといけないってことはなくて、状況に応じて複数の方法を使い分けるのがいいんだ。

HTMLで空白文字を使うなら、主に次の5つの方法があるよ。

順番に説明していくね。

HTMLで半角スペースを入れるときは、主に&nbsp;を使うのがいいよ。

実はHTMLでは、スペースキーで入れた空白が複数あっても、ブラウザは1つの空白としか認識しないんだ。

その通りだよ。例えば、「Hello&nbsp;&nbsp;&nbsp;World」とすれば、「Hello   World」（HelloとWorldの間にスペースが3つ）のように表示されるんだ。

多くのHTMLエディタには、&nbsp;簡単に入力できるショートカットがあるから、活用してみると楽だよ。

HTMLで全角スペースを入れるには、「&emsp;」という特殊文字を使うんだ。

emspはは"Em Space"の略で、全角文字と同じ幅の空白を表すんだよ。

日本語入力で全角スペースを打ち込むと、HTMLファイルの文字コードや閲覧環境によっては、正しく表示されないことがあるんだ。

そうだね。「&emsp;」を使えば、どんな環境でも確実に全角スペースとして表示されるんだ。

なら、preタグを使うといいよ。

preタグは"preformatted"の略で、タグ内のテキストを入力したままの形式で表示してくれるんだ。

例えば「<pre>こんにちは   世界</pre>」みたいにpreタグで囲むと、入力した数のスペースがちゃんと表示されるんだ。

インデントとか空白がそのまま表示されるから、特にプログラムのコードを表示したいときに重宝するよ。

letter-spacingは、文字と文字の間隔を調整するためのCSSプロパティなんだ。

うん。letter-spacingを使うと、テキストの見た目を細かくコントロールできるよ。

例えば、「p{letter-spacing: 2px;}」って入れると、段落内の文字間隔が2ピクセル広がるよ。

タイトルやヘッダーの文字間隔を広げて強調したい時とか、逆に本文を少し詰めて読みやすくしたい時なんかに使うと効果的だよ。

1つの方法は、さっき少し紹介した、&nbsp;や&emsp;を連続して入力する方法だね。

確かにそうだね。たくさんの空白が必要な場合は、CSSを使う方法もあるよ。

うん！例えば、marginやpaddingを使って空白を作ったり、white-spaceプロパティを使って空白の処理方法を変更したりできるんだ。

状況に応じて適切な方法を選ぶことが大切なんだけど、適切に使えば、レイアウトやデザインの幅が広がるんだよ。

うん。主に以下の3つが気をつけたい点だよ！

まず大事なのは、意味のある使い方を心がけて、単にデザインのためだけに使うのは避けた方がいいってことかな。

デザインのための余白だったら、上で紹介したCSSを使う方法のほうが適しているよ。

スクリーンリーダーを使っている人にとって、過度な空白は混乱の原因になることがあるから、アクセシビリティへの配慮も忘れずにね。

あと、固定幅の空白を多用すると、画面サイズによってはレイアウトが崩れる可能性があるから、レスポンシブデザインとの兼ね合いも考えないといけないよ。

以下の3つを意識して使ってみよう。

やっぱり、適切な使用場面を見極めることが1番大切だよ。

&nbsp;は、単語や句、日付や時刻、金額表示なんかを分割したくない時に使うのが基本なんだ。

それから、古いブラウザだと&nbsp;の解釈が異なる可能性があるから、幅広いブラウザでチェックすることも忘れないでね。

最後に、SEOにも影響する可能性があるから、過度な使用は避けた方が賢明だよ。

最後に、&nbsp;についてまとめておくね。

&nbsp;はあくまで、言葉の途中で改行されることを防ぐために用いるのが基本だよ。

空白や余白をとるためには、preタグやCSSなどの代替手段もあるから、用途に合わせて使い分けよう。

どういたしまして。ほかに分からないことがあったら、いつでも聞いてね！