<PRE>と<CODE>
ソースコードをWebで表示するためには、<PRE>タグと<CODE>タグを使います。<PRE>タグはPreformatted Text(整形済みテキスト) の略で、<PRE>~</PRE>で囲まれた範囲のソースに記述されたスペース・改行などを、そのまま等幅フォントで表示してくれるとのことです。
一方、<CODE>~</CODE>で囲んだテキストは、プログラムのソースコードであることを意味します。
コードを表示するだけなら<PRE>タグだけでもだいたい間に合いますが、ソースコードであることを示すために<CODE>タグを合わせるのが一般的なようです。
エスケープ
さらにHTMLで使う < や > は、< や > と書かないとソースコードと認識してくれないことが多いです。< や > のようなタグは、<PRE>タグをもってしても特殊文字と認識されてしまうということです。
つまり、
<pre><code>
<ul>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
</ul>
</code></pre>
のようなコードは、
<pre><code>
<ul>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
</ul>
</code></pre>
と書かなければならないということです(ややこしいですね)。ソースを「そのまま表示する為のHTMLソース」に変換してくれるサイトもあります。
→Blogtool
特殊文字の一覧ついてはこちら。
→特殊文字リファレンス
<をブラウザに表示するには
ではさらに応用で、< のような文字をWebに表示するにはどうしたらいいでしょうか。&と表示させたければ&と書きますので、<と表示させたければ&lt;と書きます。
0 件のコメント :
コメントを投稿