HTMLで意図したスペースを付ける方法（特殊文字）

今回は、HTMLのコードで意図したスペース（空白）をを付ける方法を紹介します。

通常のテキストを入力する際はPCのスペースキーで空白が出来るかと思いますがWEB上で読み込まれるHTMLコードでスペースを表現するには特殊文字というものを使用しなくてはいけません。

その記述の方法と種類を紹介していきます。

スペースを表す特殊文字

HTMLでスペースを表現するには下記の4種類の特殊文字を使用します。

•  ⇒ 無視・改行されない空白（スペースキーの半角スペースと同じ広さ）
•  ⇒「 」より少し広い空白スペース
•  ⇒「 」より広い空白スペース
•  ⇒「 」より狭い空白スペース

実際に特殊文字でスペースを付けると下記の様になります。

テキスト スペース（ ）
テキスト スペース（ ）
テキスト スペース（ ）
テキスト スペース（ ）

上記のスペースは下記の様な記述です。

<p>
テキスト&nbsp;スペース
テキスト&ensp;スペース
テキスト&emsp;スペース
テキスト&thinsp;スペース
</p>

※ワードプレスの場合はpブロック内だと半角スペースと全角スペースをスペースキーで入力可能です。

注意点

特殊文字はHTMLタグでは無くあくまでもテキストなのでスタートタグなどは記述する必要ありません。なのでテキストの中に入れ込むだけで表現されます。

ただし一文字でも抜けると下記の様に特殊文字として成り立たなくなり記号が表に出てきてしまします。

テキスト&thinspスペース

特殊文字をそのまま表示させるには？

「テキスト スペース」の記述をそのまま入力すると特殊文字として読み込まれるため「テキスト スペース」の様に表示されます。

「 」を表示するには「&」を「&」と入力すれば可能です。（&は&の特殊文字です。）

以上が「HTMLで意図したスペースを付ける方法（特殊文字）」でした。

テキストの改行やレイアウトを整える時などに使える技なので覚えておきましょう。また特殊文字は他にも沢山あるので色々調べてみて下さい。