BLOG

IT情報のお知らせ
pre要素・code要素を使って、ソースコードをそのまま表示する
  • 2019/10/22
  • Share

普通は見えないソースコードの中身も<pre>と<code>を使うことによって表示させることができます。
code要素のみでも表示できますが、pre要素を使うことでHTMLに記述された通りに表示されます。改行、インデント（字下げ）、半角スペースなどがそのまま表示されます。
また、ウェブページに特殊な文字や記号を表示させたい場合（「<」や「>」など）についてもみていきます。

目次

pre要素とcode要素を使う

普通は見えないソースコードの中身も<pre>と<code>を使うことによって表示させることができます。
code要素のみでも表示できますが、pre要素を使うことでHTMLに記述された通りに表示されます。改行、インデント（字下げ）、半角スペースなどがそのまま表示されます。

例えば、このコードを記述すると

<pre>
<code>
body {
   color:#222;
   background:#f2f2f2;
   font-size:14px;
}
</code>
</pre>
このように表示されます
body {
   color:#222;
   background:#f2f2f2;
   font-size:14px;
}

特殊文字について

ウェブページに特殊な文字や記号を表示させたいとき、HTMLのソースコードへ直接記述できないものがあります。その場合、特殊文字を使って表示させることができます。

記号名 文字列 特殊文字
小なり記号 < &lt;
大なり記号 > &gt;
アンパサンド & &amp;
スペース   &nbsp;

最後に

上記に記述した特殊文字は他にもいっぱいあるので、探してみてください。

CATEGORY

KEYWORD

RECOMMEND