<pre></pre>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 フレージング・コンテンツ

pre要素は、その内容が整形済みのテキストであることを表します。

通常、連続する半角スペース、改行、タブは、1つの半角スペースにまとめられて表示されますが、この要素の中では、それらが記述した通りの形で表示されるようになります。(pre要素の開始タグ直後の改行は取り除かれます)


<pre>

整形済みのテキストを表します

</pre>

pre要素は、記述したままの形で表示させたい内容に対して使用することになります。例えば、次のような内容に使用することができます。

  • 定型詩(短歌、俳句 等)
  • ソースコード(HTMLコードやスクリプトコード 等)
  • アスキーアート
  • 電子メールの内容

ソースコードを記述する場合は、次のようにcode要素と併せて使用すると良いでしょう。(pre要素内にcode要素を配置します)

<pre>
<code>&lt;html&gt;
&lt;head&gt;

    &lt;title&gt;文書のタイトル&lt;/title&gt;

&lt;/head&gt;
&lt;body&gt;

    &lt;h1&gt;pre要素 &amp; code要素の使用例&lt;/h1&gt;

&lt;/body&gt;
&lt;/html&gt;</code>
</pre>
  • タグを表示したい場合は、<>の記号を&lt;&gt;と記述します。また、&記号も&amp;と記述しておきます。

要素のデフォルトスタイル

一般的なブラウザでは、この要素内のテキストは等幅フォントで表示され、要素の上下に1em程度のマージンが入ります。また、自動的な折り返しは行われなくなります。

  • ブラウザによっては、等幅フォントのテキストが小さめの文字サイズで表示されます。
pre要素内のテキストです
  • 上記の表示例には、このページのスタイル(font-size: 100%)が適用されてしまっています。そのため、本来は小さめの文字サイズで表示されるブラウザでも、通常の文字サイズで表示されてしまいます。
HTML5における変更点

使用例

pre要素の使用・未使用の表示例

<section>

<h3>pre要素を使用した場合</h3>

<pre>
<code>&lt;script type="text/javascript"&gt;

        document.write("サンプルテキスト");

&lt;/script&gt;</code>
</pre>

</section>


<section>

<h3>pre要素を使用しなかった場合</h3>

<div>
<code>&lt;script type="text/javascript"&gt;

        document.write("サンプルテキスト");

&lt;/script&gt;</code>
</div>

</section>

表示例

pre要素を使用した場合

<script type="text/javascript">

        document.write("サンプルテキスト");

</script>

pre要素を使用しなかった場合

<script type="text/javascript"> document.write("サンプルテキスト"); </script>
  • 上記のpre要素内のテキストには、このページのスタイルが適用されてしまっています。そのため、本来は小さめの文字サイズで表示されるブラウザでも、通常の文字サイズで表示されてしまいます。