- エスケープ・エンコードしてWEB用に置換変換 HTMLでは「<」や「>」などはタグの記号なので、文字として表示する場合にはそのままでは表示されません。「<」や「>」をはじめとしてHTMLの特殊文字を表示させるためには、「<」は「<」、「>」は「>」と書き換えてタグを無効化（エスケープ）する必要があります。HTMLではこのように直接記述できない文字や記号（マークアップで使われる、半角の「<」や「>」など）を表記する際に用いられるひとつの手法を「文字実体参照」と言います。ちなみに使用頻度の高いHTMLの特殊文字一覧も下記に載せておきました。
- <PRE>…ソースを整形済みテキスト表示 <PRE>～</PRE>で囲んだ範囲のソースをそのまま表示します。ただ、記述されているコードのタグやスペース・改行などの特殊文字はHTMLの文字実体参照変換する必要があります。HTMLの初期の仕様では<XMP>タグで囲むことによってその範囲内のソースコードはHTMLタグを無視した状態でそのまま表示してくれて便利なのですが、HTML4.0ではソースコードを表示する際はこの<PRE>を使用することが推奨されています。なお、HTML5では<XMP>は廃止される予定になっています。
- <code>を使ったソースコード表示 <code>～</code>で囲まれたテキストがソースコードであることを意味します。<code>はHTMLの要素名やファイル名などワンフレーズの場合には単独で使うこともできます。<pre>～</pre>の中に<code>～</code>を挟んで使用した場合には、スペースや改行・空白をそのままプレビューしてくれるます。CSSやJavaなどのプログラムソースの表示には最適です。ただ、HTMLのソースコードだとやはり実体参照変換する必要があります。
- 【ブラウザ上の表示】
<font color="dimgray"><b>1.エスケープ・エンコードしてWEB用に置換変換</b></font>- 【HTML記述文字コード】
<font color="dimgray"><b>1.エスケープ・エンコードしてWEB用に置換変換</b></font>
- HTML-特殊文字でよく使用される文字実体参照
| No. | 実体参照 | 特殊文字 | コメント |
|---|---|---|---|
| 01 | & | & |
アンパサンド |
| 02 | < | < |
小なり |
| 03 | > | > |
大なり |
| 04 | | |
空白 |
| 05 | " | " |
クォーテーション |
| 06 | ' | ' |
アポストロフィー |
| 07 | © | © |
コピーライト |
- 【ブラウザ上の表示】
<span style="color: dimgrey;"><b>2.<PRE>…ソースを整形済みテキスト表示</b></span>- 【HTML記述文字コード】
<pre>
<span style="color: dimgrey;"><b>2.<PRE>…ソースを整形済み
テキスト表示</b></span>
</pre>
- 【ブラウザ上の表示１】
<span style="color: dimgrey;"><b>3.<code>を使ったソースコード表示</b></span>- 【HTML記述文字コード１】
HTMLの特殊文字（タグやスペース・改行など）は文字実体参照変換する必要があります。
<pre>
<code>
<span style="color: dimgrey;"><b>3.<code>を使ったソースコード表示</b></span>
</code>
</pre>
- 【ブラウザ上の表示２】
pre {
margin:0;
padding:0;
overflow:auto;
white-space:pre-wrap;
word-wrap:break-word;
}
- 【HTML記述文字コード２】
CSS記述コードだと以下のようにスペースや改行をそのまま表示してくれます。
<pre>
<code>
pre {
margin:0;
padding:0;
overflow:auto;
white-space:pre-wrap;
word-wrap:break-word;
}
</code>
</pre>
0 件のコメント :
コメントを投稿