空白文字をコピペ│空白文字を挿入するやり方を解説

以下ボタンをクリックすることで空白文字をコピー＆ペーストする事ができます。

「空白文字」とは、行頭や文字と文字の間に余白を作るために使用される文字です。苗字と名前の間に余白を入れたり、視覚的なデザイン効果を期待して余白を入れたりする場合に、空白文字が使用されます。

「Shift」キーとスペースキーを同時に押すことで半角スペースを挿入できますが、半角スペースは連続して入力しても1個分しか画面上に反映されません。複数個分の半角スペースを挿入するためには、「 」 を使用する必要があります。

空白文字はフォントによっては半角2つで全角1つにならないため、全角の空白文字もご紹介します。

上記のカッコ内に入力されている空白文字は、ハングルフィラー（HANGUL FILLER）」と呼ばれる文字です。ハングルフィラーは特定のハングル文字を表示する目的で使用される特殊文字で、通常のハングル文字とは異なり、単独で入力すると空白が表示されます。

ハングルフィラーのUnicodeでの文字番号は「U+3164」になります。日本語用キーボードでは入力できないため、上記の空白文字をコピペして使用するか、ユーザー辞書に登録して使用してください。

ただし、ハングルフィラーを用いて空白文字を挿入すると、Googleからの評価が低下する恐れがあります。ハングルフィラーを用いた空白文字は目に見えないので、私たちは画面に表示された文字だけを認識しますが、Googleのクローラーからは意味不明な文字列だと認識されてしまうからです。

SEOの観点からは、ハングルフィラーを用いた空白文字の挿入は避けることをおすすめします。

前述した、ハングルフィラーを用いる空白文字以外の空白文字を挿入する方法は以下の4つです。

1. 文字実体参照で指定する
2. CSSのinline-block要素で指定する
3. 全角スペースを入力する
4. CSSで文字を透明にする

それぞれの方法について解説します。

空白文字を挿入する1つ目の方法は、文字実体参照で指定する方法です。

文字実体参照とは、キーボードで直接入力できない特殊文字を表示したり、HTML上で指示を出したりするために用いられる記号列です。文字実体参照の中には空白を表現するものがあり、以下の文字実体参照を挿入することで空白を表現できます。

上記の文字実体参照は、複数個を重ねても反映されます。

以下のように「 」を5個連続して入力すると、半角スペース5個分の空白を挿入できるということです。

必要とする空白の幅に応じて、上記の文字実体参照を組み合わせて入力してください。

空白文字を挿入する2つ目の方法は、CSSのinline-block要素で指定する方法です。

要素の幅を設定するCSSのプロパティwidthで空白の幅を指定し、spanタグで空白の挿入する場所を指定することで、空白を表現できます。<span>と</span>の間に文字を入力しないことで、widthで設定する要素が空白となり、空白の幅を設定できるわけです。

本来であればインライン属性のspanタグでwidthを使用できませんが、CSSに「display:inline-block;」を記述し、ブロック属性に変えることでwidthが適用されるようにしています。

〇〇〇<span class="blank_space"></span>□□□

.blank_space{
display:inline-block;
width:10px;
}

▼ 表示

widthの属性値を増減することで、空白の幅を増減できます。

また、上下左右のマージンや、余白を指定するCSSのプロパティ「margin」・「padding」を使用することでも空白を挿入できます。

〇〇〇<span class="blank_space">△△△</span>□□□

.blank_space{
display:inline-block;
margin : 30px ;
}

▼ 表示

空白文字を挿入する3つ目の方法は、全角スペースを入力する方法です。文字を入力した後にスペースキーを押すことで、文字と文字の間に全角スペースを入力できます。空白文字を挿入する方法としては最も簡単な方法ですが、挿入する場所によっては注意が必要です。

全角スペースで空白文字を入力する際の注意点については、後述します。

空白文字を挿入する4つ目の方法は、CSSで文字を透明にする方法です。CSSで文字を透明にする場合には、color属性の属性値にtransparentを記述します。

〇〇〇<span class="example1">△△△</span>□□□

span.example1{
color:transparent;
}

▼ 表示

CSSで△△△の文字の色を透明にしているため、△△△の部分だけが空白として表示されるわけです。透明にする文字の幅を調整することで、空白にする幅も調整できます。

ただし、ブラウザ上では何も入力されていないように見えますが、実際には文字が入力されている点に注意する必要があります。上記の例で言えば、見た目は「〇〇〇　　　□□□」ですが、Googleのクローラーは「〇〇〇△△△□□□」という文字列が入力されていると認識するわけです。

意味のない文字列と認識されたり、本来の意味とは異なる文字列だと解釈される恐れがあるため、SEOを意識する場合は使用を避けることをおすすめします。

全角スペースで空白文字を入れる場合の注意点は、以下の3つです。

• SEOでマイナスの評価になる可能性がある
• レイアウトが崩れる可能性がある
• ブラウザによって表示が異なる

それぞれの注意点について解説します。

全角スペースで空白文字を入れる場合の1つ目の注意点は、SEOでマイナスの評価になる可能性があることです。

視覚的な効果を意識して文字と文字の間に全角スペースを挿入した場合、ユーザーは無意識に空白を無視して文字の意味を認識します。たとえば、「おもてなし」と表示されている場合と「お　も　て　な　し」と表示された場合では、ユーザーは同じ意味だと認識します。

一方、Googleのクローラーは文字と文字の間の全角スペースも文字列の一部だと認識するため、上記のようなケースだと異なる意味だと認識するかもしれません。

また、「WEBマーケティング」のような文字と文字を組み合わせることで異なる意味を持つ単語の場合も同様です。「WEB　マーケティング」と表記すると、「WEBマーケティング」ではなく、「WEB」と「マーケティング」の意味だと認識される恐れがあります。

入力した文字が本来の意味とは異なる意味だとGoogleから認識されてしまうと、Googleからマイナスの評価を受け、検索上位表示されにくくなる可能性があります。

全角スペースで空白文字を入れる場合の2つ目の注意点は、レイアウトが崩れる可能性があることです。全角スペースはブラウザ上で空白として表示されますが、HTMLでは全角文字1文字分としてカウントされています。視覚的には存在しないように見えますが、HTMLでは存在しているわけです。

そのため、パソコンでの見た目を意識して全角スペースを挿入すると、スマホで見た時に想定していない場所で改行されてレイアウトが崩れてしまう恐れがあります。

レイアウトする場合には、全角スペースで調整するのではなく、CSSで調整するようにしましょう。

全角スペースで空白文字を入れる場合の3つ目の注意点は、ブラウザによって表示が異なることです。

widthで要素の幅を指定し、要素の指定した幅以上の全角スペースを入力した場合、Chrome・Safari・IEでは最後に入力した全角スペースで改行されます。一方、Firefoxでは10個目の全角スペースで改行されます。

また、末尾に全角スペースを挿入した要素を右寄せした場合、Chrome・Safari・Firefoxでは全角スペースが領域内に表示されますが、IEでは全角スペースが領域の外に表示されます。

上記のように、ブラウザによって領域からはみ出した全角スペースの取り扱いが異なります。

今回は、空白文字について解説しました。

コピペで使える空白文字、空白文字を挿入する方法、全角で空白文字を入れる場合の注意点は以下の通りです。

空白文字はハングルフィラーをコピペすることで簡単に入力できますが、SEOでマイナス評価を受ける、レイアウトが崩れるといったデメリットがあります。空白文字を挿入する際は、CSSのinline-block要素で指定するようにしましょう。