Webデザイン スキルアップ講座

HTMLで「空白スペース」を入れる特殊文字の解説。

2019年10月31日

サイト制作をしていると、「スペースボタンを押して空白を入れたはずなのに、うまく反映されない!」なんて事がありますよね。

そういった際には、「HTML」にて「空白スペース」を表示する「 」というコードを挿入しましょう。

正しいWebでの表示とは

WordPressで記事作成する際には、「ビジュアルエディタ」と「テキストエディタ」というのが存在していますが、「ビジュアルエディタ」の場合は、実は目に見えないコードがいっぱい隠れています。

これは記事作成の際に、直感的に作業でき、扱いやすいようにする為で、とてもありがたい事だとは思います。

しかし、本来Webサイトというのはコードのみで構成されるものです。

ですので、コーディングの「テキストエディタ」で書かれているものが、本来の正しいWebの表示情報になります。

逆に言うと、コードで書かれている事が全て。それ以上でもそれ以下でもないという事です。

ですので、空白スペースの制御が効かない時は、「テキストエディタ」で、確実に空白スペースを示す「 」コードなどを入れる事で、確実にハンドリングがよくなります。

「 」とは

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

空白スペースを入れたいだけなのに改行?

そうですね。厳密には、「改行をさせない=そのまま続行するけど、ここには空白要素があるよ」という認識でいいのではないでしょうか。

「 」の使い方

「 」の使い方はとても簡単です。

空白スペースを入れたい箇所に「 」コードを入れるだけです。

例) <p>このサイトは&nbsp;デザイナーブリッジです。</p>

という感じになります。

注意

以下でご説明しますが、「&nbsp;」とは「特殊文字」というものにあたります。

この「特殊文字」に関して、WordPressの場合は、「テキストエディタ」でしか効果を発揮しませんので、「ビジュアルエディタ」で「&nbsp;」といれても何も意味がありません

「ビジュアルエディタ」で、
「このサイトは&nbsp;デザイナーブリッジです。」といれても、
「このサイトは&nbsp;デザイナーブリッジです。」と、そのまま表示されます。

ですので「特殊文字」を扱う時は、「テキストエディタで」と言うことを覚えておきましょう。

「特殊文字」とは

コーディングの世界には「特殊文字」というのが存在します。

「特殊文字」とは、「あらかじめ定義されている特別の単語」くらいの意味で覚えておきましょう。

今回ご説明している「&nbsp;」は、「空白スペース」だったり、「&amp;」は「&(アンド)」の意味だったりします。

え、特殊文字?必要?

そうですね。コーディングやプログラミングをするにあたっては、この「特殊文字」はかなり重要になってきます。

コーディングやプログラミングでは「<」等、「開始タグのカッコ」なんかを常時使用しますよね。

でも、例えば
<p>この「<」文字は「特殊文字」です。</p>

と、「<」を視覚的なテキストとして表示したい場合もありますよね?

その場合、コードでみると
<p>この「<」文字は特殊文字です。</p>

となりますが、コードの世界では、「「<」の部分から新しい要素がスタートしている」と、認識されてしまうのです。

これくらいの構文ですと、大したトラブルにはならないかもしれませんが、場合によっては、大きなエラーを引き起こしてしまう事にもなります。

ですので、コーディングで使われる「記号のような文字(「<」等)」については、あらかじめ「特殊文字」というのが定義されているのです。

よく使う「特殊文字」

ここでよく使う「特殊文字」のご紹介をしておきます。

よく使う「特殊文字」

「&」 = &amp;
アンド

「<」 = &lt;
不等号(小なり)

「>」 = &gt;
不等号(大なり)

「"」 = &quot;
ダブルクォーテーション

その他の、空白スペースの入れ方

空白スペースの「特殊文字」には、合計4つの特殊文字が用意されています。

以下にまとめておきますので、ぜひ、必要に応じて使用してみてください。

よく使う「特殊文字」

「 &nbsp; 」
半角と同じ大きさの空白スペース。

「 &ensp; 」
「 &nbsp; 」よりやや大きめの空白スペース。

「 &emsp; 」
「 &nbsp; 」よりさらに大きめの空白スペース。

「 &thinsp; 」
「 &nbsp; 」より小さめの空白スペース。

完全無料のクリエイター育成講座開催中!

人物イラストの無料ダウンロードサイト公開中!

人物イラストの無料ダウンロードならMIDO-KICHI

-Webデザイン, スキルアップ講座

Copyright© デザイナーブリッジ , 2020 All Rights Reserved.