ネットで「円マーク」を出したいのに文字化けしてスラッシュが! HTML特殊文字で解決

こんにちは! ヨス(プロフィールはこちら)です。

今回はHTMLを使うような、WEB関係の方とかブロガーにしか関係ない記事です。ブラウザ上で < とか » とか、どうやって入力したらちゃんと文字化けとかバグらずに表示されるの?っていう話です。

HTML特殊文字を使おう

実はバグりやすい文字には2つの特徴があります。

機種依存文字
例えばWindowsとMacで同じ文字を入力しているハズなのに表示が違う文字があります。そういう文字を機種依存文字と呼びます。
変数などに使われる記号
HTMLの中に使われる < や、変数に使われる & のような記号です。WEBブラウザが「コード」と勘違いします。

こういう文字をちゃんと表示したいときには、そのまま記号を入力するのではなく、その記号のブラウザ上での共通名=HTML特殊記号で明記するのをオススメします。

では具体的に私がよく使っているHTML特殊文字を紹介します!

¥ 円マーク

まずは半角の ¥ (円マーク)です。これはイラつくことに \(バックスラッシュ)になってしまいますよね? なのでこれをちゃんと ¥ として表示させたいときのやり方です。

これは全角ので逃げられますが、私は全角記号がイヤなんです。見ると下痢してしまいます(← ウソつけ!)。

円マークのHTML特殊文字
¥ &yen;

私は単語登録でyenで登録しています。

ついでに言うと、\(バックスラッシュ)&#92;で表示させています。

< > 山カッコ

お次は半角の「山カッコ」です。 < とか > なカッコのことです。

コレは、ちゃんと普通に表示されるやん!って言われるかもしれませんが、実はこれ、バグの元になります。その理由はブラウザはこのカッコをコードを表す記号として捉えるからです。

例えば<p>や、<a href="https://yossense.com/">のように。なので、パソコンに誤解を与えないためにも < とか > を記号としてそのまま表示したいときは、HTML特殊文字で入力しておきましょう。

山カッコのHTML特殊文字
< &lt;
> &gt;

私は単語登録で<;>;で登録しています。

半角スペース

そして   (半角スペース)です。

HTMLの文法で言うとあまり連発しない方がよいのですが(スペースの調整は本来はCSSの領域だから)、スペースをちょっと入れたいときってありますよね。そういうときに「スペース」は便利です。

でも半角スペースは2つ目以降が反映されないんです。こういうときにHTML特殊文字が大活躍です。

半角スペースのHTML特殊文字
  &nbsp;

このテーブルの左の列には何も入っていないように見えますが、ちゃんと半角スペースが入っています。<table>タグの中の1つのセルの中を空欄にしたいときに、半角スペースを入れてやらないと、レイアウトが崩れることがありますので、上のテーブルみたいに空欄のセルを作るときは、必ず &nbsp; を入力しましょうね!

私は単語登録でspで登録しています。

[ ] 角カッコ

これが問題になるときは、WordPressを使っていて、ショートコードをネットで表示させたいときぐらいだと思います。WordPressでは [  ] が変数の印で、ブラウザが勘違いするからです。

なのでショートコードを表示させたくて角カッコを使う場合は、HTML特殊文字を使いましょう!

角カッコのHTML特殊文字
[ &#91;
] &#93;

« » 二重角引用符

そして« »二重角引用符です。

これはどちらかと言うと、パンくずナビゲーションなんかで使います。TOPページ » 動物のページ » 犬のページみたいな感じで。

あ、もしかしたら普通に入力できるのかな? 文字化けしないのかもしれませんが私はこういうあんまり使わない文字をそのまま入れるのは怖いので。

二重角引用符のHTML特殊文字
« &laquo;
» &raquo;

© ® ™ 著作権関係のマーク

お次は著作権関係のマークの © (著作権記号) ® (登録商標記号) ™ (商標記号)です。これらはそのまま入力すると文字化けする可能性があるのでぜひともHTML特殊文字を使いましょう。まぁ、あんまり使わないけど。

著作関係マークのHTML特殊文字
© &copy;
® &reg;
&trade;

& アンド

半角の & (アンド)です。これ、別に全角の「&」で逃げてもいいのですが、KILL 全角記号派ですんで!

この & (アンド)が問題なときは、 & の後ろにスペース無しで半角英数字が続くとき。ブラウザが「変数」として認識することがあるからです。

例えば、この記事の中で使っているHTML特殊文字自体がすべて & で始まっていると思います。お気づきでしょうか? つまり & で始まってアルファベットが続くものはHTML特殊文字かな?とブラウザが思うんです。そうなるとバグになる可能性がありますよね。

アンドのHTML特殊文字
& &amp;

私は単語登録でand;で登録しています。

オマケ: HTML特殊文字の表示の仕方

最後にオマケです。今回の記事の中で使われている&amp;のようなHTML特殊文字はどうやって表示しているんでしょうか? だって、&amp;って入力すると & に変換されるハズですよね? アレレ?

実は簡単なんです。

HTML特殊コードを入力

例えば、&amp;と入力します。

最初の & をHTML特殊文字へ!

お次にこの&amp;の頭にある&を、THML特殊文字の&amp;に変更してやるだけです!!

つまり&amp;amp;という表記ですね。頭痛くなりそうですが、&amp;amp;は、実際には&amp;amp;amp;と入力しています(笑)。

参考: HTMLの特殊文字 : IT用語辞典

今回紹介したHTML特殊文字ですが、使う頻度が高いものはすべて単語登録をオススメします!

こちらは関連記事です。

WEB関係のスキルを学ぶのって独学では時間がかかりますが、今ならオンラインで学べるスクールもあります。

たとえば完全にオンラインで学べるTechAcademy [テックアカデミー]なら、「Webリニューアル集中プログラム」という超ターゲットを絞ったコースがあります。

このコースがオススメな理由は、今現在運営しているサイトをリニューアルすることがゴールであること。

つまり、例えば学生なら10万円以下で今のサイトのリニューアルができ、さらに技術が身につくという一石二鳥なコースです。

プロにお願いするとものすごく制作費がかかるので長い目でみると、今学ぶことはかなり合理的です。しかも1週間の無料体験ができるそうなので、気軽にお申込みできますね!