2015年2月11日水曜日

【HTML】 ソースコードをそのまま表示する

<PRE>と<CODE>

ソースコードをWebで表示するためには、<PRE>タグと<CODE>タグを使います。

<PRE>タグはPreformatted Text(整形済みテキスト) の略で、<PRE>~</PRE>で囲まれた範囲のソースに記述されたスペース・改行などを、そのまま等幅フォントで表示してくれるとのことです。

一方、<CODE>~</CODE>で囲んだテキストは、プログラムのソースコードであることを意味します。

コードを表示するだけなら<PRE>タグだけでもだいたい間に合いますが、ソースコードであることを示すために<CODE>タグを合わせるのが一般的なようです。

エスケープ

さらにHTMLで使う < や > は、&lt; や &gt; と書かないとソースコードと認識してくれないことが多いです。

< や > のようなタグは、<PRE>タグをもってしても特殊文字と認識されてしまうということです。

つまり、


<pre><code>
<ul>
 <li>サンプル</li>
 <li>サンプル</li>
 <li>サンプル</li>
 <li>サンプル</li>
</ul>
</code></pre>

のようなコードは、


&lt;pre&gt;&lt;code&gt;
&lt;ul&gt;
 &lt;li&gt;サンプル&lt;/li&gt;
 &lt;li&gt;サンプル&lt;/li&gt;
 &lt;li&gt;サンプル&lt;/li&gt;
 &lt;li&gt;サンプル&lt;/li&gt;
&lt;/ul&gt;
&lt;/code&gt;&lt;/pre&gt;

と書かなければならないということです(ややこしいですね)。

ソースを「そのまま表示する為のHTMLソース」に変換してくれるサイトもあります。
  →Blogtool

特殊文字の一覧ついてはこちら。
  →特殊文字リファレンス

&lt;をブラウザに表示するには

ではさらに応用で、&lt; のような文字をWebに表示するにはどうしたらいいでしょうか。

&と表示させたければ&amp;と書きますので、&lt;と表示させたければ&amp;lt;と書きます。

0 コメント:

コメントを投稿