⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？
ホームページなどで空白文字（ㅤ）を使いたいのに、「上手く空白にならない…」と悩んでいる人は多いです。
単純にスペースキー（ ）で空白文字が入力できれば良いのですが、それでは思っていた表現と違う場合や、ホームページの仕様で空白にならないこともあります。
そこで今回は、コピペで使える空白文字や、さまざまな空白文字の表現方法について解説していきます。この記事が空白文字のやり方で悩んでいる方の参考になれば幸いです。
1．空白文字とは？
空白文字とは、文字と文字の間や、行頭などに余白を入力するための文字のことです。
この空白文字は、キーボードでスペースキーやTabキーを打ち込んだり、文字実体参照の専用コードをHTMLでマークアップすることで表示できます。
また、Twitterで名前欄を空白にしたい場合等において、空白文字が使えます。
ちなみに、文章と文章（段落）の間隔をあける際は、一般的に空白文字を使用しません。
例えば、BRタグを使った改行スペースで、空白行を挿入することができます。
もしくは、Pタグでマークアップした文章に、cssのmarginやpaddingを効かせて、文章と文章の間隔を調整します。
このように、空白文字は、場面に応じて使い分けることが一般的となります。
2．文字実体参照（特殊文字・記号・文字コード）の空白文字の種類
文字実体参照（特殊文字・記号・文字コード）の空白文字には、以下のようなものがあります。
- ⇒ 無視・改行されない空白（スペースキーの半角スペースと同じ広さ）
-   ⇒ 「 」より少し広い空白スペース
-   ⇒ 「 」より広い空白スペース
-   ⇒ 「 」より狭い空白スペース
HTMLの特殊文字コード「 」は、文字実体参照であり、一般的に半角スペースの表示に使われることが多いようです。
スペースキーを使った半角スペースは、無視されたり、打ち込んだ分表示されません。
なので、文字実体参照「 」で空白（半角スペース）を表示しましょう。
3．空白文字のその他のやり方
基本的には、ハングルフィラーを使えば空白文字を挿入できるのですが、SEOの視点で見た場合「無意味な文字列」が突然文中に現れることになるため、悪影響を及ぼします。
SEOをしっかりと考えたサイトを運営されているようでしたら、ここで紹介する「文字実体参照で直接空白を指定する」「CSSのinline-block要素で空白を表現する」のどちらかを活用するのがおすすめです。
特にCSSのinline-block要素をで空白を表現する方法は、幅の調整や高さの調整など自由が効きますので、デザインを重視される方は活用してください。
3-1．CSSのinline-block要素で空白を表現する
CSSのinline-block要素で空白を表現する方法は、自由度が高く、SEOへの影響を最小限に抑えた手法です。
やり方は簡単で、空白文字を挿入したい文字と文字の間にinline-block要素で幅を指定した空白の<span>タグを挿入するだけです。
下記に、実際に使うCSSとHTMLの例を提示するので、CSS初心者の方はコピペして活用してください。
〇CSS
.blank_space{
display:inline-block;
width:10px;
}
〇HTML
あいう<span class=”blank_space”></span>えお
CSSのwidth:10px;の部分の数字をwidth:20px;のように変えることで、空白文字を自由な幅に変えることができます。
また、文字を入力している訳ではないので「SE O対策」のように、単語が「SE」と「O対策」に分断されることもなくSEOへの悪影響を最小限に抑えることができます。
3-2．全角スペースを使う
全角スペースで空白文字を表現する方法は、簡単で最も一般的と言えますが、SEOへの悪影響があるためおすすめできません。
全角スペースで空白文字を表現するためには、「あいう えお」のように、空白文字を入れたい文字と文字の間に好きな数だけ全角スペースを打ち込めば良いだけです。
この時、半角スペースを入力してしまうと何個入力しても1個の半角空白としか判定されないため注意が必要です。
この方法は、見てわかる通り「SE O対策」のように単語がスペースで分断されてしまいます。一般的にスペース（ ）は文字の余白を調整するための文字なので、「SE O対策」のように単語を分断してしまうと、Googleにきちんと単語が認識されない可能性が高いです。
その結果、Googleが文脈を読めなくなりSEOに悪影響を及ぼしてしまいます。
3-3．CSSで文字を透明にする
CSSで文字を透明にする方法も簡単ではありますが、SEOへの悪影響があるためおすすめできない空白文字のやり方です。
その方法は簡単で、「あいう<span class=”kuhaku”>ダミー文字列</span>えお」のように入力し「ダミー文字列」の色をCSSで透明にするだけです。
実際のコードは次のようになります。
〇CSS
.kuhaku{
color:transparent;
}
〇HTML
あいう<span class=”kuhaku”>ダミー文字列</span>えお
transparentは透明を表す文字色なので、上記指定をすることで「ダミー文字列」が透明になり、見た目上では「あいう」と「えお」の間に空白が入っているように見えます。
また、透明の文字列で空白を表現しているので<span class=”kuhaku”></span>の間に入れる文字の幅で自由に空白の幅を調整でき、便利な方法ではあります。
ただし、見た目上空白に見えるだけで、Googleには「あいうダミー文字列えお」と認識されるため、SEOに悪影響を及ぼしてしまいます。
4．コピペ用空白文字一覧
説明不要で今すぐ空白文字のやり方が知りたい場合は、下記の空白文字をコピーして使ってください。
空白文字1個～5個
1個：「ㅤ」
2個：「ㅤㅤ」
3個：「ㅤㅤㅤ」
4個：「ㅤㅤㅤㅤ」
5個：「ㅤㅤㅤㅤㅤ」
ここで打ち込んでいる空白文字は、「ハングルフィラー（HANGUL FILLER）」と呼ばれる文字です。
元々はハングル文字を表現するために使用される特殊な文字で、ハングルを使用せず単独で入力すると空白として表示されます。
そのため、日本やアメリカなどのハングル圏外の国では空白文字として活用される事が多いです。
ちなみに、Unicodeでの文字番号は「U+3164」です。日本語用キーボードでは打ち込むことができないため、常用するなら「くうはく」などで辞書登録することをおすすめします。
5．まとめ：空白文字を適切に使って、コンテンツの品質を保とう
スペースをあけるときに、空白文字の多用は避けましょう。
基本はcssで余白を設定して、必要があれば空白文字を使ってコンテンツを構築することがおすすめです。
ユーザーにとって利便性の高いコンテンツに仕上げて、サイトの価値を高めながら、SEO対策で上位化を目指すことが重要です。
⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？
