htmlのソースコードをそのまま表示する方法
HTMLやCSSなどのソースコードをそのまま表示したい時には、
<pre></pre>と
<code></code>を使います。（今回のケース以外でも、アスキーアートなどにも使用されるようです。）
- 「ソースコードを表示するとき」には、<pre>の中に<code>を入れて使用するのが一般的です。
- <code>タグは、computer code（コンピュータ用のソースコード）を等幅フォントにて表示されものです。
- <pre>タグは、字下げ、改行などをそのまま表示するものです。
書式例
<pre>
<code>
文字として表示したいHTML（<>タグは、実態参照文字への変換すること）
</code>
</pre>
- 改行や空白等がそのまま表示され、等幅フォントで表示されます。
- 構文でブロック要素タグを扱う場合、実態参照文字への変換も必要です。（codeのようなインライン要素だけならタグの実態参照文字への変換も必要ない）
- 実態参照文字は、「<>」等がタグではなく、本来の文字として表示するために使います。
実態参照文字について
表示したいHTML内において、以下のタグ記号を置き換えて使用すれば、そのままの文字として表示されます。（以下に、使用頻度の高いものを挙げてみました。）
- < →
< > → >- & → &
- “ → "
- ‘ → '
- 半角スペース →
コード表示らしく魅せるため、CSSで装飾する方法
１．<pre class="a（任意な文字列で、適当な名前）">にCSSを指定をします。（今回は、</pre>タグにCSSを設定します。）
<pre class="a（任意な文字列で、適当な名前）">
<code>
文字として表示するHTML
</code>
</pre>
２．HTML文の最後尾にまとめて、pre.a{色、文字、など}のCSS設定します。その設定例を下記のように記述します。
/* Preタグのスタイルシート設定 */
pre.a{
width:auto; /* 幅を自動に */
font-family:; /* フォント指定 */
font-size:;/* 文字サイズ */
color: #; /* 文字の色 */
background-color:#; /* 背景色 */
border: solid 1px #; /*境界線の種類、太さ、色 */
line-height: %; /*一行の高さ */
margin:em em ; /*上下左右にマージン */
padding: em; /* 余白 */
overflow-x: auto; /*横幅不足時スライドカーソル*/
overflow-y: auto; /*縦長さ不足時スライドカーソル*/
}
