本記事では、Webサイトでソースコードをそのまま表示する際に使用するタグの使い方、加えて必須知識となる特殊文字の使い方についても合わせてご紹介していきたいと思います。
目次
HTMLでソースコードをそのまま表示するとどうなるか確認してみよう
まずはHTMLコードをそのままの状態で表示するとどんな風に表示されるのか確認してみたいと思います。
今回は分かりやすいようにボタンタグを使ったサンプルで解説していきます。
ボタンタグを記述
ボタンタグをシンプルに記述すると下記のようなコードになります。
<button>ボタン</button>
このコードをそのままHTMLに記述すると下記のように表示されます。
ソースコードではなく「ボタン」が表示されてますよね？
Webサイトを作成する際には、htmlタグの内部にコードを記述するため、当然今回指定したボタンタグもHTMLの1つのタグとしてブラウザに読み込まれてしまう結果となります。
HTMLでソースコードをテキストとして表示する方法は2種類
ではWebサイトにHTMLタグをテキストとして表示したい場合、どのように記述すれば良いのでしょうか。
コードをテキストとして表示する方法には大きく分けて2つのHTMLタグを利用することが可能です。
codeタグ
codeタグは「computer code」の略称で、タグ内部に記述されたHTMLコードを記述されたままの状態でWebブラウザに表示することが可能となります。
一般的なブラウザでは「等幅フォント」で表示される特徴があります。
よく利用される記述法として、後述するpreタグの内部にcodeタグを記述するという方法がありますが、近年のブラウザではpreタグだけでも等幅フォントで表示されることがほとんどで違いがないため、preタグだけで記述されるケースが増えてきています。
codeタグの記述法
codeタグの記述法は<code></code>の内側に表示したいHTMLコードを記述するだけです。
実際にボタンタグのサンプルでご確認ください。
<button>ボタン</button>
HTMLコードのままご確認頂けているかと思います。
preタグ
preタグは「preformated text」の略称で、改行や空白スペースを含んだコードを記述したまま表示することが可能です。
アクセスしたユーザーにも読みやすいフォーマットで記述出来るため、Webサイトにソースコードを表示したい場合、preタグを利用するのが一般的です。
preタグの記述法
preタグの記述方も、<pre></pre>の内側に表示したいHTMLコードを記述するだけです。
今回はフォーマット確認のために、ボタンタグを表示するためのサンプルコードを<html>から</html>までコード整形した状態で掲載してみたいと思います。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>html display Sample</title> </head> <body> <button>ボタン</button> </body> </html>
改行や空白がそのまま表示されていることをご確認頂けるかと思います。
HTMLでソースコードを表示する際は特殊文字に注意
HTMLでソースコードを表示する際に、もう一つ意識しておきたいポイントとして「特殊文字」の取り扱いがあります。
HTML文書では「<」や「>」といった記号が特殊な意味を持つ記号として認識されるため、Webブラウザで表示する際には「特殊文字」を使ってブラウザに知らせてあげる必要があります。
特殊文字で頻繁に利用される記号を確認しよう
HTMLでよく利用される特殊文字には下記のような記号が挙げられます。
全てを覚える必要はありませんので、その都度調べて利用するようにしましょう。
小なり記号
HTMLタグを作成する際にも利用されるため頻繁に使用されるのが小なり記号です。
「<」を特殊文字で表すと「<」となります。
大なり記号
小なり記号と同じくHTMLタグで利用されるのが大なり記号です。
「>」を特殊文字で表すと「>」となります。
アンパサンド
アンパサンドもソースコードとして頻繁に利用される記号です。
「&」を特殊文字で表すと「&」となります。
ダブルクォーテーション
文字列を表現する際に利用されるダブルクォーテーションも頻出記号の1つです。
「”」を特殊文字で表すと「"」となります。
スペース
スペースもソースコードとして表現する際には特殊文字を利用する必要があります。
「 」を特殊文字で表すと「 」となります。
サンプルコードで動きを確認してみよう
上記でご紹介した特殊記号を使ってHTMLを記述することで、下記のようにソースコードを表示することが可能です。
<input type="button" value="ボタ& ン">
ブラウザ上にはユーザーが一眼で分かるようなソースコードの形式となっていますが、実はこれは特殊文字を使って記述しているから実現できています。
特殊文字を変換される前の状態で表示したい場合は？
上記とは反対に本記事のような説明を行う際、特殊文字を変換される前の状態で表示したい場合もありますよね？
そういった場合は、特殊文字に含まれる変換しないといけない文字を、さらに特殊文字で記述するという方法で対応することが出来ます。
どういうことかというと「&」の特殊文字を表現するなら「&amp;」と記述することで「&」を表現する必要があります。
かなりめんどくさい方法になってしまいますが、仕方ないですね。
上述したサンプルを特殊文字としてテキスト表示する方法も下記に掲載しておきますので、参考にしてみてください。
小なり記号の特殊文字
「&lt;」と記述することで、小なり記号の特殊文字「<」がブラウザ上に表示されます。
大なり記号の特殊文字
「&gt;」と記述することで、大なり記号の特殊文字「>」がブラウザ上に表示されます。
ダブルクォーテーションの特殊文字
「&quot;」と記述することで、ダブルクォーテーションの特殊文字「"」がブラウザ上に表示されます。
スペースの特殊文字
「&nbsp;」と記述することで、スペースの特殊文字「 」がブラウザ上に表示されます。
さいごに：HTMLでソースコードを表示して知識を共有しよう！
本記事では、HTMLでソースコードを表示する方法についてご紹介してきました。
ソースコードをWebサイト上に掲載する方法は、意外とプログラマーの方でも実践したことがなく知らない方も多いようです。
ぜひ今回ご紹介した内容を実践する意味でも、ご自身がプログラミングで詰まった問題やエラーを解決した方法をソースコードとして公開して、後輩プログラマーの役に立つWebサイト作成に挑戦してみるのはいかがでしょうか。
