等のタグをサイトの画面に表示したいならこう書く

WordPressとか、その他のCMSとか、PC付属のテキストエディタとか何でも構わないんですけど、これらを使ってサイトの記事を完成させた後に、

「ん?画面に表示されないぞ」

なんていうトラブルでよくあるのが、タグ(コード)をそのまま表示させるときです。

「HTMLやCSSのタグについて、説明する記事でも書こうかな」

頑張って<div>とかタグを文章に交えながら、説明記事を完成させる。

サイトを開く。

「あれ?タグ部分だけが表示されていない(´・ω・`)」

っていう結果になるのには、きちんとした理由があります。

でも対策さえすれば無事に表示されますので、困ることはありません。この記事を読めば解決しますよ。

そもそもHTMLやCSSのタグは非表示になるのが当たり前

<div><p>など、HTMLもしくはCSSのタグ(コード)を文章の一部としてエディタに記述し、サイトに表示させたいと思っても、残念ながらタグ部分は非表示になります

なぜなら、記述そのものがHTMLやCSSのタグだとブラウザに認識されているからです。

ナンノコッチャ?と思うかもしれません。しかし、HTMLやCSSの知識を少しでも持っている人ならば、「そりゃそーだ」とすぐに気づくはずです。

HTMLやCSSのタグというのは、サイトに文字としてそのまま表示するものではないんですね。

タグで囲った文字を、どのように表示させるのか?どんな意味を持つのか?」をブラウザに伝える働きしかもっていません。

なので、

<p>休日は釣り堀に行くぞ</p>

と打ち込んだら、HTMLタグの<p></p>は消えるのが当然。

休日は釣り堀に行くぞ

としか表示されないんです。

では、

<p>休日は<span style="color: red;">釣り堀</span>に行くぞ</p>

と打ち込んだらどうなるでしょう?

休日は釣り堀に行くぞ

pタグとspanタグは非表示、文字のみ表示されます。釣り堀の部分についてはCSSを使ってブラウザに「赤で表示して!」と伝えているので、そのとおり赤文字になっています。タグ本来の役割ですね。

そんな当たり前な理由ですが、サイトでタグを紹介したいって場合だと非表示のルールが邪魔になってしまいます。

ここで、とある特別な文字を記述すれば、タグを非表示から表示に切替えることができます。

タグ(コード)を表示させたいなら特殊文字を使う

タグの<>(カッコ)の部分を、特殊文字に変えて記述しましょう。これでサイトにタグを表示できます。

&lt;div&gt;

【結果】

<div>
&lt;
半角記号の小なり「<」を表示させる特殊文字。
&gt;
半角記号の大なり「>」を表示させる特殊文字。

&lt;&gt;の部分が特殊文字です。特殊文字については、エスケープシーケンスまたはエスケープ文字とも呼ばれています。

ブラウザがタグと認識するのは、pだとかdivだとかを半角カッコの<>で囲っているからです。半角記号<>の囲みさえなければ、アルファベットや単なる記号としかブラウザが認識しなくなります。

タグを囲むための記号として、ではなく、文章の中の単なる記号として<>をブラウザに認識してもらうために使うのが、上で紹介した2つの特殊文字なんですね。

特殊文字を自動で作成するツールが便利

<>を、特殊文字で表示させる方法はわかりました。

ですが、普段あまり使わない特殊文字を常に覚えておき、その都度入力するなんて作業は、正直言って面倒くさいです。

そんな面倒な作業をちゃちゃっと解決してくれる、特殊文字変換ツールを紹介しましょう。2つ紹介していますが、基本的な機能はどちらも一緒です。使いやすさで選んでみてください。

>>ソースコード変換 < & ” > br改行 WEB用に自動エスケープ

>>HTMLエスケープツール | Web制作小物ツール – dounokouno.com

タグを始めとする、普通に打ち込んだだけではサイトに表示されない文字や記号を入力欄に記入。変換を押せば、瞬時に特殊文字へと切り替えてくれます。後はコピペして使えば良いだけです。

無料で公開されているのが嬉しいですね。ありがたく使わせてもらいましょう。

カッコを全角で代用する方法をおすすめしない理由

特殊文字を使わずにタグを表示させる方法として、半角の<>ではなく、全角の<>(カッコ)で代用している人も中にはいるかもしれません。

確かに全角の<>ならば特別なことをしなくても、<div>と表示されますので、簡単に対処できてラクに感じます。

ですが、サイトで紹介したHTMLやCSSなどのタグは、記事を読んでいるユーザーさんがコピペして使用する可能性が圧倒的に高いです。

コピペしたら都合よく、全角の<>が自動的に半角の<>へと切り替わる、なんてことはありません

全角<>のままエディタに貼り付ければ、ブラウザにタグとして認識されなくなります。ユーザーさん自身で、半角の<>に書き換える手間が生まれるんですね。

タグを紹介して終わりではなく、それを使用するユーザーさんに配慮することが大切かと思います。タグの半角<>は、特殊文字で記述しましょう。