【コピペ用】HTMLのエスケープ処理とよく使うコードまとめ

この記事では、HTMLでのエスケープ処理について解説しています。
代表的なコードもまとめているので、必要な際にはコピペしてお役立てください。

エスケープ処理って何?

「<」や「>」などの記号を、ブラウザで表示できるようにする書き方のことです。

なかなかイメージしづらいかと思うので、図を見ていきましょう。

例えば、WordPressのテキストエディタを使って、こんな文章を書いてみます。
それをブラウザで見てみると、ちゃんと文章として表示されますね。

エスケープ処理とは、このテキストエディタで入力したコードを、ブラウザでもそのまま表示するための作業になります。

pやh2といった文字を、そのまま表示するというわけですね。

なぜ必要?

ブログを書いている人やWEBライターの場合、WEBデザインのコードなどを記事に含ませたい時に必要になるからです。

こういったコードの解説や、サンプルデザインを記事にしたい時などですね。

実際のところあまり使う機会はないかと思うので、「そういうものがあるんだなぁ」くらいで頭の片隅においておくだけでもOKです。

エスケープ処理の代表的なもの

エスケープ処理の書き方は、「この記号はこう、あの記号はああ」といった具合に、記号によってコードが決まっています。

よく使うものだけまとめてみました。

<&lt;
>&gt;
空白&nbsp;
空白
(フォントサイズ分)
&emsp;
&&amp;
&quot;
&#39;
参考文献・ツール
HTML特殊文字コード表 サルワカ道具箱「HTMLエスケープ・ツール」

エスケープ処理のコードを記述したい場合

この記事のように、エスケープ処理のコードを記事に含ませたいという場合もあるかもしれません(ほとんどないと思いますが…)。

その場合は、コードの先頭の「&」に対してエスケープ処理をすればOKです。

まとめ

ライティングにおけるエスケープ処理のコードは、特に覚える必要もないかと思います。
必要な時にコードをコピペして使うくらいで良いでしょう。

WordPressであれば、AddQuicktagなどのプラグインに登録しておくと便利ですね。