記事

<pre>〜</pre>

pre（プレ・フォーマテッド）要素は整形済みのテキストのブロックを表します。空白文字や改行などで整形したあるテキストのこと。

整形済みテキストとは、空白文字や改行などで整形してあるテキストの事です。pre 要素内の整形済みテキストは、ブラウザによってレンダリングされる際、印刷時の慣例に則って表示されます。

通常のテキストは、レンダリングされる際、下記のルールに則って表示されます。

• 連続する半角空白文字はまとめて 1つとして扱われる
• タブ文字は半角空白文字 1つとして扱われる
• 改行コードは半角空白文字 1つとして扱われる （ソースコード上で改行しても実際の画面上では改行はしない）
• テキストが表示領域の横幅に達すると、そこで折り返して表示される

しかし、pre要素内では、これらがすべて無効になり、ソースコード上の改行、連続した空白文字などがそのまま画面上に表示されます。また、テキストが表示領域の横幅に達しても自動的に折り返しも発生しません。

ただし、これら処理はユーザエージェントが必ずしなければならないわけではありません。よって、環境によっては表示が変わる可能性があります。

一般的にHTMLやCSS、その他プログラムのソースコードを記載する際、アスキーアートなど、空白や改行が重要なテキストの表示、メールマガジンの内容をウェブページに掲載する際などに利用される場合が多いです。

なお、HTML 文書においては、pre要素の開始タグの直後、先頭の改行文字は削除されます。

pre要素で使用できる属性

グローバル属性

すべてのHTML要素で使用できる属性になります。

ソースコードの表示に使用した例

使用例

<pre>
 <code class="language-javascript">
  $(function(){
   $('#menuButton').click(function() {
    $('#menu').toggle('fast');
   });
  });
 </code>
</pre>

表示

 
  $(function(){
   $('#menuButton').click(function() {
    $('#menu').toggle('fast');
   });
  });