＜pre要素＞ - 整形済みテキスト

公開日: 2017/02/09

pre要素は、整形済みテキストを表す要素です。この要素は空白文字(改行、タブ、スペース)がそのまま反映されて、フォントが等幅で表示されます。

概要

名前

pre (Preformatted text)

カテゴリー

Flow content

Palpable content

配置できる場所

Flow contentが期待される場所。

コンテンツモデル

Phrasing content。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLPreElement

デフォルトのスタイル

pre {
	display: block;
	font-family: monospace;
	white-space: pre;
	margin: 1em 0px 1em;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-pre-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

プログラムのコード

プログラムのコードを掲載する時に、pre要素は有用です。pre要素はテキストだけでなく、Phrasing contentに属する要素を子孫にすることができます。pre要素の内部全体をcode要素で囲めば、内容がコードであることを表現できます。

HTML

<p>PHPのループ処理のサンプルコードです。</p>

<pre><code>
for ( $i=0; 5>$i; $i++ ) {
	echo $i . "<BR>" ;
}
</code></pre>

もちろん、手間でなければの話ですが、変数をvar要素で囲むなどすれば、HTMLにさらに深い意味付けができます。

HTML

<p>PHPのループ処理のサンプルコードです。</p>

<pre><code>
for ( <var>$i</var>=0; 5><var>$i</var>; <var>$i</var>++ ) {
	echo <var>$i</var> . "<BR>" ;
}
</code></pre>

メール

メールの内容を掲載したい時に、pre要素は有用です。

HTML

<p>今日受信した迷惑メールの内容を抜粋します。一部伏字にしてあります。</p>

<pre>
こんにちは。

●●です。

この度は『●●』に
ご興味を持っていただきありがとうございます。


早速、このシステムを
詳しく説明しているブログと動画を
完全無料でお送りしていますので
あなたが本当に稼ぎたいと思っているのなら
どうか最後までご覧ください。
</pre>

デモを開く

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜pre要素＞ - 整形済みテキスト</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/pre/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>pre要素は、整形済みテキストを表します。中のテキストは、空白文字(改行、タブ、スペース)が反映されて、フォントが等幅になります。</p>

<pre>
SYNCER
	SYNCER
		SYNCER
		ABCDEF
	ABCDEF
ABCDEF
</pre>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/587/"> <meta charset="utf-8"> <title>【デモ】＜pre要素＞ - 整形済みテキスト</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/pre/"> </head> <body>

<p>pre要素は、整形済みテキストを表します。中のテキストは、空白文字(改行、タブ、スペース)が反映されて、フォントが等幅になります。</p> <pre> SYNCER SYNCER SYNCER ABCDEF ABCDEF ABCDEF </pre>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>