ホームページでHTMLタグ等のソースコードをそのまま表示する方法
2016年 07月 24日
ホームページの制作をしているとHTMLのタグなどソースコードを直接表示したいときが出てくるんですが、これが意外と厄介なんですよね。
何故ならHTMLタグを書いてもタグそのものが表示されるわけではないですから…。
これは困りました。
という訳で、今回はHTMLタグをホームページに表示する方法を紹介しようと思います！
タグを崩して表示してみる
『<』の後ろに全角スペースを入れて
< a href="http://yukineko-web.jp/">ユキネコWEBデザイン< /a>
と書いてみたり、
『<』を大文字の『＜』にして
＜a href=”http://yukineko-web.jp/”>ユキネコWEBデザイン＜/a>
と書いてみます。
これであればタグとして機能しないので、そのまま表示することが出来ますね。
しかしこれでは正しいタグで書けていないしコピペしてもそのまま使えないし、何となく気持ち悪さを感じますよね…。
エスケープ処理をするとタグそのままを表示できる
エスケープ処理をするとなんとソースコードをそのまま表示できます！
……で、エスケープ処理とは何ぞや？という事ですよね。
エスケープ処理とは、ソースコードに使われる半角文字の『<』や『&』、『"』などをそのまま表示するために必要な処理の事です。
このエスケープ処理をするにはちょっと特殊なHTMLの書き方をします。
例えば『<』を表示したいときには『<』と書くと『<』が表示されます。
『&』を表示したいときは『&』、『<』を表示したいときは『>』、といったように特殊な書き方をする事で、ソースコードに使用される半角文字をそのまま表示する事が出来るようになるのです。
この手法を『文字実体参照』というみたいです。
Wikipediaに一覧が載っているので、よろしければ確認してみて下さい。
文字参照：https://ja.wikipedia.org/wiki/%E6%96%87%E5%AD%97%E5%8F%82%E7%85%A7
しかしこの文字実体参照、半角文字を１つ１つ調べては置き換えていくのは時間もかかるし大変です…。
そこで便利なサイトがありますので、紹介しますね！
タグを入れれば自動的に変換してくれるサイトを利用する
文字実体参照の表と睨めっこしながら１つ１つ入力をしなくても、タグを入れればすべて自動で変換してくれるサイトがあります。
HTMLソースを掲載するとき：http://amenti.usamimi.info/
こちらにタグをコピーして貼り付けるだけで、あっという間に変換終了！
エンコードボタンをクリックして下に表示された変換済みのソースコードをコピーしてそのままHTMLに貼り付ける事で……
<a href=”http://yukineko-web.jp/”>ユキネコWEBデザイン</a>
HTMLタグがそのまま表示されました！
このサイトはとても使いやすくて便利ですね。
因みにcssで少し調整してあげると
<a href=”http://yukineko-web.jp/”>ユキネコWEBデザイン</a>
こんな風にタグを紹介するときなどに分かり易いかもしれませんね。