HTML内で特殊文字を使いたい時に役立つサイトを紹介という記事で「<」や「>」という記述を使って、文章内に「 < 」や「 > 」を表示させる方法について書きましたが、逆に「<」や「>」を文章内にテキストとして表示させるにはどうしたら良いのでしょうか？
「<」や「>」はそのまま記述すると記号として表示されてしまう
HTMLを使った文章内に「<」や「>」という記述をすると、エスケープシーケンスと認識されてしまうので、画面上では「 < 」や「 > 」などの特殊記号で表示されてしまいます。
でも、今回の記事みたいに「<」や「>」のように、文章内にテキストとして表示させたい場合に、そのままHTML内に記述しても「 < 」や「 > 」のように、画面には記号が表示されるだけで…なんてことありませんか？
文章内に「<」や「>」をテキストとして表示させる事はできないの？ と思うかもしれませんが、そんな事はありません。
実際にこの記事で何度もテキストとして使っているわけで、ちゃんと解決策が用意されています。
「&」を「&」に変えるだけ
解決方法は超カンタン。
「<」の一番最初の「&」を「&」に変えるだけ！
つまり「<」と表示させたい場合は「&lt;」のように記述します。「&」の部分にエスケープシーケンスを使って、エスケープシーケンスの記述ルールから外してやるわけですね。
ちなみに上記の文章は、HTMLでこんな感じで表示されています。
1 | つまり「&lt;」と表示させたい場合は「&amp;lt;」のように記述します。 |
最初の「&」の分「&」が見た目より一つ多くなっているのがわかります。
まとめ
知ってしまえば大した事はないんですが、知らないと結構難しいですよね。
何年か前に、どうしても「<」をテキストとして使いたい時があって悩んだ事があるのですが、最終的にネットで調べて答えが出た時は、妙に成長した気分になりました（笑）
今回紹介したようなデジタルならではのテクニックって、紙媒体とは違うWEBならではの面白さがあるので個人的には大好きです。
印刷物の傍らでWEBに携わっているデザイナーさんや、WEB初心者の方々は、CSSやJQueryのような直接的にデザインに関わる知識だけでなく、こうした地味なテクニックも覚えておくと、ちょっとした時に役立つと思いますよ。
「HTMLの文章で「<」や「>」をテキストとして表示させたい」でした。
