HTMLでソースコードや特殊文字を表示する方法

    • このページをはてなブックマークに追加

    公開日:2016年08月24日 最終更新日:2019年10月15日

    プログラムコードなどをHTMLで表示するときに便利な<code>タグの解説をします。加えて、ソースコードの字下げや改行をそのまま表示できる<pre>タグと組み合わせて使うことで効率よく作業ができるようになります。また、HTMLで利用可能な「特殊文字」の一覧もありますのでご参考下さい。

    1. <code>タグを使ってソースコードを表示する

    <code>タグを使うことで、プログラムやHTMLコードの表示をその他の文字列と区別して表示することができます。<code>は「computer code」の略です。

    基本の書式

    ●code.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="uft-8">
    <title>HTML入門-コードの表示</title>
    </head>
    <body>
    <h1>ソースコードの表示</h1>
    <code>
    	body{ background-color:#008b8b; }
    </code>
    </body>
    </html>
    

    ●ブラウザーの表示

    html_code1

    <code>タグで囲まれたソースコード部分はブラウザー上で「等幅フォント」を使って表示されます。違いがわかりにくいので通常の文字列と比較してみましょう。

    ●code.html

    <body>
    <h1>ソースコードの表示</h1>
    <p>通常の表示:body{ background-color:#008b8b; }</p>
    <p>codeタグ使用:
    <code>body{ background-color:#008b8b; }</code> </p> </body>

    <code>タグで囲まれたソースコード部分はブラウザー上で「等幅フォント」を使って表示されます。

    html_code2

    ▲ページトップへ戻る

    2. <pre>タグで整形済みテキストを表示する

    <pre>タグを使うと、改行やタブ・スペースを入れて整形したテキストをそのまま表示することができます。<pre>は「preformatted text」の略です。

    基本の書式

    ●code.html

    <body>
    <h1>ソースコードの表示</h1>
    <p>通常の表示:body{ background-color:#008b8b; }</p>
    <p>codeタグ使用:
    <pre> <code> body{ font-size: 22px; color:#ffffff; background-color:#008b8b; } </code> </pre> </p> </body>
    html_code3

    HTMLのソースコードでは連続したスペースやタブは一つにまとめられて表示され、改行はスペースとして表示されます。<pre>タグを使うことで、ソースコードの改行やスペース・タグがそのままブラウザーに表示されますので<br>タグなどを使う必要がありません。

    ▲ページトップへ戻る

    3. 特殊文字の扱い

    HTMLコードをブラウザーに表示する場合は、HTML文書内で特殊な意味を持つ小なり記号「<」や大なり記号「>」をそのまま記述するとコードの始まりや終わりと認識される為、そのままでは正常に表示することができません。このような記号を表示するのに使われるのが「エスケープシーケンス(特殊文字)」です。例えば「<html>」と表示する場合は、「&lt;html&gt;」と記述します。以下HTMLでよく使われるエスケープシーケンスをあげますので、実際にブラウザーで表示されるか確かめてみて下さい。

    ●HTMLでよく使われる特殊文字

    記号名 文字列 特殊文字
    小なり記号<&lt;
    大なり記号>&gt;
    アンパサンド&&amp;
    ダブルクオーテーション"&quot;
    アポストロフィ'&apos;
    コピーライト©&copy;
    登録商標®&reg;
    トレードマーク&trade;
    スペース &nbsp;

    ▲ページトップへ戻る

    ●通貨記号

    記号名 文字列 特殊文字
    ¥ &yen;
    セント ¢ &cent;
    ポンド £ &pound;
    ユーロ記号 &euro;

    ▲ページトップへ戻る

    ●その他の記号

    記号名 文字列 特殊文字
    バーティカルバー ¦ &brvbar;
    マイクロ記号 µ &micro;
    パーミル &permil;
    一般通貨記号 ¤ &curren;
    上向き矢印 &uarr;
    右向き矢印 &rarr;
    下向き矢印 &darr;
    左向き矢印 &larr;
    左右両向き矢印 &harr;
    上向き二重矢印 &uArr;
    右向き二重矢印 &rArr;
    下向き二重矢印 &dArr;
    左向き二重矢印 &lArr;
    左右両向き二重矢印 &hArr;
    スペードマーク &spades;
    クラブマーク &clubs;
    ハートマーク &hearts;
    ダイヤマーク &diams;
    上付き1 ¹ &sup1;
    上付き2 ² &sup2;
    上付き3 ³ &sup3;
    2分の1 ½ &frac12;
    4分の1 ¼ &frac14;
    4分の3 ¾ &frac34;
    8分の1 &frac18;
    8分の3 &frac38;

    ▲ページトップへ戻る

    ●学術記号(数学)

    記号名 文字列 特殊文字
    マイナス &minus;
    プラスマイナス ± &plusmn;
    乗算記号 × &times;
    除算記号 ÷ &divide;
    等号否定 &ne;
    ほぼ等しい &asymp;
    およそ等しい &cong;
    大なりイコール &ge;
    小なりイコール &le;
    無限大 &infin;
    ルート記号 &radic;
    関数記号 ƒ &fnof;
    比例 &prop;
    積分記号 &int;
    偏微分 &part;
    ナブラ &nabla;
    シグマ、総和記号 &sum;
    チルダ演算子 &sim;
    故に &there4;
    パイ記号 ϖ &piv;
    &ang;
    度記号 ° &deg;
    直交する &perp;
    合同な &equiv;
    否定記号 ¬ &not;
    任意の &forall;
    存在する &exist;
    論理積 &and;
    論理和 &or;
    空集合 &empty;
    積集合 &cap;
    和集合 &cup;
    属する &isin;
    属さない &notin;
    元として含む &ni;
    含まれる &sub;
    真部分集合を元として含む &sup;
    含まれない &nsub;
    部分集合 &sube;
    部分集合を元として含む &supe;

    ▲ページトップへ戻る

    ●ギリシア文字

    記号名 文字列 特殊文字
    アルファ (大文字) Α &Alpha;
    アルファ (小文字) α &alpha;
    ベータ (大文字) Β &Beta;
    ベータ (小文字) β &beta;
    ガンマ (大文字) Γ &Gamma;
    ガンマ (小文字) γ &gamma;
    デルタ (大文字) Δ &Delta;
    デルタ (小文字) δ &delta;
    イプシロン (大文字) Ε &Epsilon;
    イプシロン (小文字) ε &epsilon;
    ゼータ (大文字) Ζ &Zeta;
    ゼータ (小文字) ζ &zeta;
    エータ (大文字) Η &Eta;
    エータ (小文字) η &eta;
    シータ (大文字) Θ &Theta;
    シータ (小文字) θ &theta;
    イオタ (大文字) Ι &Iota;
    イオタ (小文字) ι &iota;
    カッパ (大文字) Κ &Kappa;
    カッパ (小文字) κ &kappa;
    ラムダ (大文字) Λ &Lambda;
    ラムダ (小文字) λ &lambda;
    ミュー (大文字) Μ &Mu;
    ミュー (小文字) μ &mu;
    ニュー (大文字) Ν &Nu;
    ニュー (小文字) ν &nu;
    クサイ (大文字) Ξ &Xi;
    クサイ (小文字) ξ &xi;
    オミクロン (大文字) Ο &Omicron;
    オミクロン (小文字) ο &omicron;
    パイ (大文字) Π &Pi;
    パイ (小文字) π &pi;
    ロー (大文字) Ρ &Rho;
    ロー (小文字) ρ &rho;
    シグマ (大文字) Σ &Sigma;
    シグマ (小文字) σ &sigma;
    タウ (大文字) Τ &Tau;
    タウ (小文字) τ &tau;
    ウプシロン (大文字) Υ &Upsilon;
    ウプシロン (小文字) υ &upsilon;
    ファイ (大文字) Φ &Phi;
    ファイ (小文字) φ &phi;
    カイ (大文字) Χ &Chi;
    カイ (小文字) χ &chi;
    プサイ (大文字) Ψ &Psi;
    プサイ (小文字) ψ &psi;
    オメガ (大文字) Ω &Omega;
    オメガ (小文字) ω &omega;

    ▲ページトップへ戻る

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【HTML】Webデザイナー|デザイン提案などのアートディレクション業務

    年収 :300万円〜700万円

    受託の開発・制作から自社開発まで幅広い案件を持ちます。 制作の視点から「こうしたら効果が上がるの...

    株式会社クオリアシステムズ

    正社員

    【Javascript】WEBデザイナー|広告/カタログの企画・デザイン・制作

    年収 :250万円〜400万円

    広告、カタログ、Web等の企画・デザイン・制作をご担当いただきます

    ワイズマトリックス株式会社

    正社員

    【Javascript】WEBデザイナー|自社Webサイトの企画・制作・運営

    年収 :400万円〜500万円

    自社Webサイトの企画・制作・運営などをご担当いただきます。 <具体的な業務> ・自社コーポレート...

    株式会社ボルテージ

    フリーランス

    【Webデザイナー/コーダー】AdobeExperienceManager(AEM)を用いたWebサイト構築

    大手企業の採用HPから有名アニメの公式HP等のデザイン/ディレクションを行うクリエイティブ企業にて、W...