Webサイト制作コースのお申し込みはこちら Webサイト制作コースのお申し込みはこちら

HTMLに書いたとしても、Webページには表示されない文字があります。例えば、半角の空白やタグに使われる文字などは、HTMLにそのままコピーしても正しく表示されません。しかし、文字コードを使えば、そのような特殊な文字も表示できます。今回は、このようなHTMLの特殊文字コードの書き方や使い方について解説します。

HTMLの特殊文字とは

HTMLで使えない文字があることをご存じでしょうか。HTMLのタグに使われる記号や、空白やタブは、HTMLに表示する文章の中には使えません。そして、こういった文字は、特殊文字と呼ばれています。しかし、こういった特殊文字は、HTML専用の文字コードを使えば使えます。まずは、こういった特殊文字について解説します。

Webページに表示されない文字がある

HTMLで表示される文章の中に半角のスペースを使ったとしても、それは表示されません。メールなどで文章を作る際は、見やすいように半角スペースで空白を調整できても、それをそのままWebページに表示すれば、半角スペースが無視されて、表示が崩れてしまいます。

同様に、文字の位置を調整するために使われるtabも、HTMLの中では使えません。他にも、HTMLのタグに使われる「」が使えないなど、文字の制限があります。もし、テキストファイルの文字を装飾してWebページに表示するには、HTMLで使えない文字に対する処置が必要です。

HTMLは文字コードも書ける

先ほど、HTMLに表示できない文字があると説明しましたが、そのような表示できない文字は、文字コードを利用すれば、Webページに表示できます。

なお、コンピュータで表示できる全ての文字には数字が割り振らており、コンピュータはその数字で処理します。そして、数字に対応する文字の画像を表示することで、人が読めるようになります。

HTMLには、テキストエディタなどで文字で書くのは一般的ですが、コンピュータが処理する文字に割り振られた数字、すなわち文字コードを書くことも可能です。そのため、Webページで表示できない文字は、HTML用の文字コードで書くことで表示することが可能です。

どんな文字が特殊文字になるか

Webブラウザで表示できない文字とは、空白やHTMLのタグと書く際に使われる特殊文字です。具体的には、タグに使われる「」は、Webブラウザでは表示できません。また、タグの属性を指定するのに使われる「”」も制限を請けます。そして、今回紹介する特殊文字コードに使われる「&」もWebブラウザには表示されません。

また、HTMLでは、連続した空白やタブ、改行は表示されません。もし、文中で、空白やタブ、改行を使いたい場合は、特殊文字コードを使います。

なお、HTMLのコンテンツを書く場合、単に文字の位置を調整するためだけに、半角の空白を使ってはいけません。特殊文字コードを使えば調整はできますが、後で修正した際に、位置が崩れるかもしれません。このような調整は、スタイルシートに記述するのが、HTMLのバージョン5の正しい書き方です。

文特殊文字コードの使い方

HTMLに特殊文字コードを書く方法は、表示されない文字の代わりに、&で始まる特殊文字コードを書くだけです。HTMLだけ見ると、一部が文字化けしているように見えますが、Webブラウザに表示すると、特殊文字コードに対応する特殊文字が表示されます。

なお、特殊文字の書き方には、文字の名称を使った書き方と、16進コードで指定する方法があります。次から、この書き方について紹介します。

特殊文字コードの書き方の基本

HTMLの中で使う特殊文字コードの書き方は、&に続いて文字の名称、または、文字に対応する番号を記述し、;で閉じます。なお、文字の名称を使う方法を文字実体参照といい、文字に対応する番号を使う方法を数値文字参照といいます。

HTMLの特殊文字コードの基本
& (文字の名称、または、#に続く16進コード) ;

「<」を表示する特殊文字コードの例

文字実体参照の例:<
数値文字参照の例:Š 

プログラムの例を表示するには

ブログのような日本語で書かれた文章では、特殊な特殊文字コードが原因で表示が乱れることは稀です。しかし、プログラムのソースコードやHTMLをWebページで表示しようと思ったら、そうはいきません。Webブラウザで表示されない文字に気を付けないと、表示が乱れてしまいます。次から、プログラムのソースコードやHTMLをWebページで表示する方法を紹介します。

preタグを使うケース

半角のスペースやタブを使って整形したテキストを、HTMLに張り付けても、Webブラウザは半角のスペースとタブを表示しないので、崩れてしまいます。このようなテキストを表示するなら、<pre>から</pre>で囲みましょう。

preタグを使った例
<pre>
if( key < n ) then
	return( n   );
else
	retuen( key );
endif
</pree>

Webブラウザの表示
if( key < n ) then
	return( n   );
else
	retuen( key );
endif

ただし、<pre>から</pre>で囲ったとしても、HTMLのタグは解釈されてしまうので、HTMLの例は、この方法では表示できません。

特殊文字コードを使うケース

HTMLの例をWebページに表示しようとしても、タグが解釈されてしまい、テキストとして表示されません。そこで、タグに使われる「」を特殊文字コードで記述すると、Webページで表示できます。もし、HTMLをWebページで表示する場合は、特殊文字コードを使ってください。

HTMLの例を表示する例

<p>
HTMLのコメント<br>
<!-- ここにコメントを書く -->
</p>

Webブラウザでは、下記のように表示されます。

<p>
HTMLのコメント<br>
<!-- ここにコメントを書く -->
</p>

よく使われる特殊文字コードの&nbsp;について

今回紹介している特殊文字コードの中で、よく使われるのが「&&bsp;」です。Webページに半角のスペースを表示するための特殊文字として使われていますが、それだけではありません。次から、「&nbsp;」について詳しく解説します

半角スペースの特殊文字は他にもある

実は、HTMLで扱える特殊文字の半角スペースは、「&nbsp;」だけではありません。よく使われるのは「&nbsp;」ですが、その他に「&ensp;」、「&emsp;」、「&thinsp;」も「&nbsp;」とは違った半角スペースです。

そして、「&nbsp;」は、ノーブレークスペースと呼ばれる半角スペースで、この空白の前後で改行されないことが保証されています。他のコードは、幅が少しずつ違った空白を表示します。

なお、日本語では半角スペースが使われるケースは多くありませんが、英語の文章では単語と単語の間に必ずスペースが入ります。さらに、複数の単語からなる固有名詞もあり、その場合は途中で改行されないで表示しなければなりません。そのような場合に、ノーブレークスペースの「&nbsp;」を使用するのが本来の使い方です。

以前はテーブルでよく使われた

以前のWebブラウザは、テーブルを表示する際、tdタグに何も指定しないと、セルの枠が表示されませんでした。そのため、何も無いセルに半角スペースを表示する特殊文字コードの「&nbsp;」を記載していました。

何も無いセルの例

 <td>&nbsp;</td>

しかし、今よく使われるWebブラウザでは、何も無いセルだとしても罫線が表示されます。また、HTMLのバージョン5では、テーブルの罫線についてもスタイルシートで定義しており、何も無いセルの扱いを指定できます。そのため、今では必ずしも「&nbsp;」を書く必要はありません。とはいえ、古い仕様のWebブラウザで表示されることを考慮して、何も無いセルには「&nbsp;」を記載すると良いでしょう。

まとめ

画像と日本語だけでWebページを作っていると、今回紹介した特殊文字コードを使い機会は少ないかもしれません。しかし、HTMLに書かれているのに、Webブラウザで表示されない文字があり、それを表示する方法を知っていれば、コンテンツ作成のスキルもアップします。ぜひ、今回紹介した特殊文字コードをうまく活用してください。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。