HTMLとCSSのソースコードをそのまま表示させる方法
HTMLとCSSのソースコードを画面（ブラウザ）にそのまま表示させる方法を説明します。
▼ 【広告】無料転職支援に登録 ▼
マイナビエージェント
※マイナビのプロモーションを含みます。
特殊文字の文字表示「<」「&」等でタグの記号を表示し、「code要素」でコードである事の意味づけ、「pre要素」でテキストをブロックして改行・スペースをそのまま表示できます。
通常のＨＴＭＬソースのブラウザ表示
例：「箇条書きリスト」と「リンク」をＨＴＭＬ上の記載した場合のブラウザ表示は、先頭に黒丸と文字リンクの状態で表示されます。
ＨＴＭＬソース
<ul>
<li><a href="http://www.gs4.jp/">ホームページ作成方法</a></li>
<li><a href="http://www.gs4.jp/
html5/">ＨＴＭＬ５</a></li>
<li><a href="http://www.gs4.jp/
html5/pre/">ブラウザ表示</a></li>
</ul>
ブラウザ表示
文字参照「<」をタグの「<（小なり）」と入れ替え
タグの一部「<（小なり）」の記号を、文字表記「<＝<と表示される」と入れ替えると、コードとして解釈されず下記のように文字としてブラウザ表示されます。
更に、文字表記「<」自体を表示させるには、「&」を表示させる文字表記「&」と入れて、後ろに「lt;」と続ける事で「<」と表示されます。
ＨＴＭＬソース
<ul>
<li><a href="http://www.gs4.jp/">ホームページ作成方法</a></li>
<li><a href="http://www.gs4.jp/
html5/">ＨＴＭＬ５</a></li>
<li><a href="http://www.gs4.jp/
html5/pre/">ＨＴＭＬソースをブラウザ表示</a></li>
</ul>
ブラウザ表示
▼ 【広告】ＰＣカスタマイズ ▼
BTOパソコンのサイコム
「code要素」によるコードの意味づけ
「code要素」で全体を囲んで、コードである事の意味づけを行います。この「code要素」は、ソースコード全般をＨＴＭＬ上でコンテンツ表示する場合に使用します。視覚上の改善は、ＣＳＳでフォントサイズ・ファミリを設定します。
ＨＴＭＬソース
<code>
<ul>
<li><a href="http://www.gs4.jp/">ホームページ作成方法</a></li>
<li><a href="http://www.gs4.jp/
html5/">ＨＴＭＬ５</a></li>
<li><a href="http://www.gs4.jp/
html5/pre/">ＨＴＭＬソースをブラウザ表示</a></li>
</ul>
</code>
ＣＳＳソース
code {
font-size: 18px;
font-family: 'Gulim';
}
ブラウザ表示
<ul>
<li><a href="http://www.gs4.jp/">ホームページ作成方法</a></li>
<li><a href="http://www.gs4.jp/
html5/">ＨＴＭＬ５</a></li>
<li><a href="http://www.gs4.jp/
html5/pre/">ＨＴＭＬソースをブラウザ表示</a></li>
</ul>「pre要素」によるテキストのブロック
更に「pre要素」で全体を囲み、元のＨＴＭＬソースの改行やスペースを反映させます。視覚的には、ＣＳＳでボーダーライン・バックグランドカラーを調整して、他の文章と区別します。部分的に文字色を変える場合は、「span要素」を使って下さい。
ＨＴＭＬソース
<pre>
<code>
<ul>
<li><a href="http://www.gs4.jp/">ホームページ作成方法</a></li>
<li><a href="http://www.gs4.jp/
html5/">ＨＴＭＬ５</a></li>
<li><a href="http://www.gs4.jp/
html5/pre/">ＨＴＭＬソースをブラウザ表示</a></li>
</ul>
</code>
</pre>
ＣＳＳソース
pre {
border:3px dotted #0000ff;
padding: 1em 1em;
background-color:#fff0f5;
}
ブラウザ表示
<ul>
<li><a href="http://www.gs4.jp/">ホームページ作成方法</a></li>
<li><a href="http://www.gs4.jp/
html5/">ＨＴＭＬ５</a></li>
<li><a href="http://www.gs4.jp/
html5/pre/">ＨＴＭＬソースをブラウザ表示</a></li>
</ul>
以上、HTMLとCSSのソースコードを画面（ブラウザ）にそのまま表示させる方法について説明しました。
公開日：2015年7日25日
▼ 【広告】サイト･SNSを収益化 ▼
A8.net無料会員募集！
HTMLコードそのまま表示 現在位置
ＨＴＭＬ５ に戻る
ホームページ作成方法 に戻る