お急ぎの方はお電話ください

空白文字をコピペするにはどうすればいい？やり方を解説！

更新日：2023年08月02日

SEO

SEO内部対策・テクニカルSEO

ウェブサイトを作成する上で直感的にスペースキーを押し、「空白文字」を作ったことがある人は少なくないでしょう。空白を設定するのはてっとり早い方法ですが、場合によってはあまり望ましい方法でないこともあります。また、コードで作る空白文字にはさまざまな方法があることをご存知でしょうか。

この記事では、空白文字について、その意味や多様なやり方、コピー＆ペーストしてすぐにでも使える方法などを紹介します。

マーケティングでお悩みの方へ

ナイルでは皆様からWebマーケティングに関する無料相談を受け付けております。日頃疑問に思っていたことや、貴社サイトの課題など相談してみませんか？

まずは会社案内をダウンロード

無料相談に申し込む

そもそも空白文字とは？

空白文字とは、言葉の通り、文字と文字の間や行間などに空白の文字を打ち込み、「スペース」を作ることです。

ノートパソコンの画面に映る、行間の空白やスペースのある文章

空白文字を必要とする場面は、名前の姓と名の間や外国語表記（固有名詞など）といった「形式的なもの」から、レイアウトを整えたり、文字の配置・間隔を調整したりする「デザイン的なもの」まで幅広くあります。サイトを作成する上で、あまり深く考えて使っていない、というのが現状ではないでしょうか。

全角スペースを使う方法

手っ取り早いやり方は、全角スペースを使う方法です。

サイト全体で空白文字の数が少ない場合や、単語が分断されてもそれほど影響がない箇所であれば、全角スペースを使った「空白文字」を選択すると良いでしょう。サイト作成にかける時間が短縮できます。

一方、半角スペースについては、連続で使用しても1つ分しか空白が表示されませんので注意が必要です。

HTMLで「空白のスペース」を入れる特殊文字を使う方法

コードでの「空白のスペース」は、HTMLの特殊文字で定義されています。

プログラミングソースコードのイメージ図

マークアップ言語の1つである文字実体参照の特殊文字「 」を使えば、「空白文字」を表現できます。詳しく説明していきましょう。

「 」を使う方法

「 」とは、「non-breaking space」の略で、日本語で「改行しないスペース」という意味になります。

「Search Engine Optimization」といったような単語を通常の半角スペースで区切ってしまうと、ページの表示幅によっては

------------------------

Search Engine

Optimization

------------------------

のように単語の途中で改行されてしまうことがあります。

そこで使用するのが「 」です。

Search Engine Optimization

と記載すれば、改行されずに単語のまとまりをキープすることができます。

「 」の空白スペースの幅は、半角と同じ広さのスペースです。また、「         」のように5つ連続で並べると、打ち込んだ個数分だけ空白が作れます。

繰り返しになりますが「半角スペースキー」は連続で使用しても、1つ分しかスペースが表示されませんので、「 」を使用すると良いでしょう。

「 」以外の特殊文字を組み合わせて調節する方法

空白スペースの「特殊文字」には、「 」のほか、あと3つの特殊文字が用意されています。

 

「 」より小さめのスペース

&ensp;

「 」よりやや大きめのスペース

&emsp;

「&ensp;」より大きめのスペース（全角スペースと同じ大きさ）

以上、これらの特殊文字を組み合わせれば、より自分のイメージに合った幅の空白文字を指定することが可能になります。

これらのスペースの幅を比較すると以下のようになります。

<div>
Search Engine Optimization
Search Engine Optimization
Search Engine Optimization
</div>

CSSのinline-block要素で空白を表現する

ページのデザインとして、空白を表現したい場合は、CSSのinline-block要素を使用することをおすすめします。

空白の幅を自由に設定することができるため、デザインに合わせやすいからです。手順とその特徴を見てみましょう。

自由に幅の調整をしたい場合はCSSを使おう

手順は、空白を入れたい文字と文字の間に、inline-block要素で幅を指定するといった簡単なものです。

実際のコードは次のようになります。

------------------------

CSS

.blank_space{

display:inline-block;

width:10px;

}

HTML

佐藤美子

------------------------

上記のように書き込むことで、佐藤と美子の間に空白が生まれます。CSSのinline-block要素を用いた方法は自由度が高く、調整も効きます。CSSの「width:10px;」の数字を「width:15px;」に増やすことで、空白の幅を広げられます。

また、コピペしてみるとわかるのですが、この場合は空白部分はコピーされません。これは、あくまでこの空白部分が文字情報ではなくデザイン情報だからなのです。

ほかにもある「空白文字の作り方」

単純にスペースキーを使ったり、特殊文字を用いたり、CSSで空白の幅を指定したりと、いくつかの空白文字の入力方法を紹介してきました。このほかにも以下の方法があるので、コピペ用に実際のデータを記載します。

CSSで文字を透明にするのはSEOに悪影響？

同じCSSで、文字自体を透明にして消してしまうという方法です。

例えば、HTML上に「

佐藤ジェシカ美子

」と入力し、「ジェシカ」の文字色をCSSで透明に指定するとします。以下は、CSSとHTMLの実例です。

------------------------

CSS

.kuhaku{

color:transparent;

}

HTML

佐藤ジェシカ美子

------------------------

CSSの「transparent」は透明を表す文字色なので、「ジェシカ」は透明になり、レイアウト上は「佐藤」と「美子」の間に空白が入っているだけの文字列に見えます。

しかし、このやり方はSEOの側面から推奨できません。検索エンジンは、ユーザーとクローラーで、見ることのできるテキストに違いがある状態を良しとしないはずです（クローキング）。効果があるかはさておき、ページ内に大量の透明文字を設置し、検索エンジンをだますようなことができてしまうからです。わざわざこのやり方を選ぶこともないですが、基本的には使用しないようにしましょう。