バナー画像

本記事では、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タグを作成する際にも利用されるため頻繁に使用されるのが小なり記号です。

「<」を特殊文字で表すと「&lt;」となります。

大なり記号

小なり記号と同じくHTMLタグで利用されるのが大なり記号です。

「>」を特殊文字で表すと「&gt;」となります。

アンパサンド

アンパサンドもソースコードとして頻繁に利用される記号です。

「&」を特殊文字で表すと「&amp;」となります。

ダブルクォーテーション

文字列を表現する際に利用されるダブルクォーテーションも頻出記号の1つです。

「”」を特殊文字で表すと「&quot;」となります。

スペース

スペースもソースコードとして表現する際には特殊文字を利用する必要があります。

「 」を特殊文字で表すと「&nbsp;」となります。

サンプルコードで動きを確認してみよう

上記でご紹介した特殊記号を使ってHTMLを記述することで、下記のようにソースコードを表示することが可能です。

<input type="button" value="ボタ& ン">

ブラウザ上にはユーザーが一眼で分かるようなソースコードの形式となっていますが、実はこれは特殊文字を使って記述しているから実現できています。

特殊文字を変換される前の状態で表示したい場合は?

上記とは反対に本記事のような説明を行う際、特殊文字を変換される前の状態で表示したい場合もありますよね?

そういった場合は、特殊文字に含まれる変換しないといけない文字を、さらに特殊文字で記述するという方法で対応することが出来ます。

どういうことかというと「&」の特殊文字を表現するなら「&amp;amp;」と記述することで「&amp;」を表現する必要があります。

かなりめんどくさい方法になってしまいますが、仕方ないですね。

上述したサンプルを特殊文字としてテキスト表示する方法も下記に掲載しておきますので、参考にしてみてください。

小なり記号の特殊文字

「&amp;lt;」と記述することで、小なり記号の特殊文字「&lt;」がブラウザ上に表示されます。

大なり記号の特殊文字

「&amp;gt;」と記述することで、大なり記号の特殊文字「&gt;」がブラウザ上に表示されます。

ダブルクォーテーションの特殊文字

「&amp;quot;」と記述することで、ダブルクォーテーションの特殊文字「&quot;」がブラウザ上に表示されます。

スペースの特殊文字

「&amp;nbsp;」と記述することで、スペースの特殊文字「&nbsp;」がブラウザ上に表示されます。

さいごに:HTMLでソースコードを表示して知識を共有しよう!


本記事では、HTMLでソースコードを表示する方法についてご紹介してきました。

ソースコードをWebサイト上に掲載する方法は、意外とプログラマーの方でも実践したことがなく知らない方も多いようです。

ぜひ今回ご紹介した内容を実践する意味でも、ご自身がプログラミングで詰まった問題やエラーを解決した方法をソースコードとして公開して、後輩プログラマーの役に立つWebサイト作成に挑戦してみるのはいかがでしょうか。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。