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

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

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

そのほか、オウンドメディアにお困りごとはないですか？すべての解決に導く自社ウェブサイト制作に役立つ情報はこちらをご覧ください（ダウンロード無料）。

＼オウンドメディアを成功に導く！資料ダウンロードはこちらから／

そもそも空白文字とは？

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

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

全角スペースを使う方法

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

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

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

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

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

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

「 」を使う方法

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

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

Search Engine

Optimization

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

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

Search Engine Optimization

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

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

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

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

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

 

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

 

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

 

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

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

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

<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

佐藤<span class="blank_space"></span>美子

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

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

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

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

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

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

例えば、HTML上に「

佐藤<span class="kuhaku">ジェシカ</span>美子

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

CSS

.kuhaku{

color:transparent;

}

HTML

佐藤<span class="kuhaku">ジェシカ</span>美子

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

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

ハングルフィラーの使用も

「ハングルフィラー（HANGUL FILLER）」と呼ばれる、ハングル文字の字母同士を結合するための特殊な文字を用いて、空白を作る方法もあります。

下記に打ち込んでいるのが、ハングルフィラーの空白文字ですので、コピペして使ってみてください。

1個「ㅤ」

2個「ㅤㅤ」

3個「ㅤㅤㅤ」

4個「ㅤㅤㅤㅤ」

5個「ㅤㅤㅤㅤㅤ」

※空白文字の個数です。

なお、日本語用キーボードでは打ち込めないため、辞書登録しておくのがいいでしょう。Unicodeでの文字番号は「U+3164」です。

ハングルフィラーは全角スペースと同じ幅ですので、基本的には全角スペースを利用した方が便利でしょう。

SEOに影響を与えるか

常識の範囲内であれば、空白文字が評価に影響するようなことはありません。

そもそも、英語の文章は半角スペースの空白文字だらけです。一方で、「空白文字で無理やりデザインを表現する」といった使い方は避けたほうが無難でしょう。

使用するデバイスによっては、ズレが生じることもありますし、検索エンジンがクロールしやすいとはいえないからです。

優先するものを決めて使い分けよう

デザインを表現したい場合はCSSを、単語をつなげて表示させたいときは「&nbsp;」を使用するなど、表現したいものに合わせて使い分けると良いでしょう。

本記事では、空白文字のさまざまな作り方を解説してきましたが、特に理由がなく一般的な利用範囲であれば「全角スペース」「半角スペース」を使用しても問題ありません。

自社ウェブサイト制作に迷ったときは、すぐにご相談ください！ナイルでは、コンテンツ制作代行のプランをご用意しております。さまざまなコンテンツを作成して、情報発信していきたいけれど、記事を書くリソースがない場合、まずはお気軽にご相談ください（ダウンロード無料）。

空白文字をコピペするにはどうすればいい？やり方を解説！は【お気軽にご相談下さい】ナイルのSEO相談室で公開された投稿です。