pre 要素

概要

HTML 整形済みテキスト要素 (<pre>) は、整形済みテキスト (preformatted text) を表します。この要素内の空白文字や改行はそのままレンダリングに反映され、等幅フォントで表示されます。もしこれらのスタイルを変更したい場合は、CSS を用います。

属性

他の全ての要素と同様に、この要素はグローバル属性を持ちます。

cols

1 行あたりの望ましい文字数を示します。これは width の非標準シノニムです。同様の効果を得るには、CSS スタイルを使用します。

width

1 行あたりの望ましい文字数を示します。この属性は技術的には実装されていますが、視覚上の効果はありません。同様の効果を得るには、CSS スタイルを使用します。

wrap

テキストがはみ出た場合の処理に関するヒントを示します。現行のブラウザはこのヒントを無視して、視覚上の効果をもたらしません。同様の効果を得るには、CSS スタイルを使用します。

例

<!-- CSS コードを表示する例 -->
<pre>
html, body { margin: 0; }

body {
  padding: 8em;
  background: #000;
  color: #fff;
}

a:link { color: #eee; }
a:visited { color: #ddd; }
a:hover,
a:focus { color: #ff0; }
a:active { color: #fff; }
</pre>

表示結果

html, body { margin: 0; }

body {
  padding: 8em;
  background: #000;
  color: #fff;
}

a:link { color: #eee; }
a:visited { color: #ddd; }
a:hover,
a:focus { color: #ff0; }
a:active { color: #fff; }

【訳注: ※この表示結果では、pre 要素に MDN のスタイルシートのスタイルルールが適用されている点に注意して下さい。本来、背景色などは CSS を用い別途定義する必要があります。】

仕様

ブラウザ実装状況

[1] width 属性を指定してもレイアウトへの影響はありません。

関連情報

• 同等の挙動を実現する為の CSS プロパティ: white-space、 word-break