pre 要素

概要

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

• コンテンツカテゴリ フローコンテンツ、パルパブルコンテンツ
• 許可された内容 フレージングコンテンツ
• タグの省略 不可。開始と終了タグの両方が必要。
• 許可された親要素 フローコンテンツを受け入れるすべての要素
• DOM インターフェイス HTMLPreElement

属性

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

例

<!-- 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 を用い別途定義する必要があります。】

仕様

ブラウザ実装状況

関連情報

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