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

¥ 円マーク

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

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

私は単語登録でｙｅｎで登録しています。

ついでに言うと、\（バックスラッシュ）は\で表示させています。

< > 山カッコ

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

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

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

私は単語登録で＜；と＞；で登録しています。

半角スペース

そして   （半角スペース）です。

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

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

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

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

[ ] 角カッコ

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

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

« » 二重角引用符

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

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

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

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

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

& アンド

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

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

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

私は単語登録でａｎｄ；で登録しています。

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

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

実は簡単なんです。