HTMLで特殊文字や機種依存文字を記述&表示

HTMLで特殊文字や機種依存文字を記述&表示する方法

ホームページのHTMLソースを直接に記述する時や、WordPressや各種ブログや管理画面組み込まれたWYSIWYGエディタ等を使ってテキストモードで編集する時の、特殊文字や機種依存文字を記述する方法です。
例えば、「<表示したい文字列>」と表示したいのに、不等号(「<」や「>」)がHTMLの解釈(マークアップ記号)に利用されるので、うまく記述できなかった経験があると思います。
特殊文字や機種依存文字は、下記の表にあるような記述をすれば、表示できます。

よく使うと思われる記号

表示 記述 表示 記述 表示 記述 表示 記述
< &lt; > &gt; " &quot; ' &#39;
&#145; &#146; &#147; &#148;
& &amp; &trade; © &copy; ® &reg;
空白
普通
&nbsp; 空白
広い
&emsp; 空白
狭い
&thinsp; &ne;
[ &#91; ] &#93; « &#171; » &#187;
« &laquo; » &raquo; &harr; &hArr;
¥ &yen; &infin; &#8451; &#8457;
&spades; &clubs; &hearts; &diams;
&#9828; &#9831; &#9825; &#9826;
&#13212; &#13213; &#13214; &#13216;
&#13217; &#13218; &#13198; &#13199;
&#13252; &#13206; &#13207; &#13208;
&#12945; &#13183; &#12849; &#13261;
&#12850; &#12851; &#12852; &#12853;
&#12854; &#12856; &#12859; &#12860;
&#12861; &#12862; &#12863; &#x3003;
&#x2610; &#x2611; &#x2612; &#10004;
&#12306; &#12320; &#12342; &#8481;
&larr; &uarr; &rarr; &darr;
&#8598; &#8599; &#8600; &#8601;
&harr; &#8597; &and; &or;
&#9756; &#9757; &#9758; &#9759;

※上記の表で、「&#x・・・;」と記載しているものは、・・・の部分はUnicodeの16進(数値文字参照)で表記しています。xが付くと16進表記になります。
上記の表で、「&#・・・;」と記載しているものは、・・・の部分はUnicodeの10進(数値文字参照)で表記しています。
Unicode表には、数値文字参照の16進表記と10進表記がありますので、コード表を見て16進↔10進の変換をすれば、どちらも同じ文字と言う事です。
※上記の表で、「&lt;」「&copy;」などのように、文字を名称で表しているものを、文字実体参照と言い、例えば > の文字実体参照は「&gt;」で数値文字参照は「&#62;」になります。

※他にもいろいろな文字や記号がありますが、Unicode版 文字コード表などで個別にお調べください。

※関連ツール HTML/XML/XHTMLのエンティティ化(文字実体参照・数値文字参照変換)もご利用ください。

ブックマーク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存