HTML

HyperText Markup Language pre element.

pre 要素

　pre要素とは、preformatted textの略で、日本語では「フォーマット（整形）済みのテキスト」という意味になります。この要素内のテキストは一般的に、レイアウトをそのまま反映して等幅フォント（monospace）で表示されます。半角スペースや改行などをそのままの形でブラウザに表示したい場合に使います。

　pre要素で囲まれた範囲のソースは半角スペース・改行などがそのまま表示されるため、プログラムのソースコードや HTMLソースなどの表示に使われますが、メールの内容をそのまま表示させたい場合やアスキーアートを表示する場合などにも使われます。

　ただし、pre要素の中でもタグは解釈されるため、HTMLソースをそのまま表示したい場合には、「<」、「>」、「&」などは特殊文字として認識されてしまいますので、それぞれを「&lt;」、「&gt;」、「&amp;」のように実体参照で置き換える必要があります。また、HTML構文の中では、pre要素の開始タグの直後に改行があった場合、それは無視されますので注意してください。

HTML4.01から HTML5へのバージョンアップによる変更点

　HTML4.01では pre要素には非推奨とされながらも width属性が用意されていましたが、HTML5では廃止されています。

　また、HTML5では pre要素を使用する際には、半角スペースや改行などのフォーマット（整形）を失ってしまう場合に配慮することが推奨されています。例えば、音声機器や点字ディスプレイで利用される場合や、アスキーアートが半角スペースや改行で整形されない場合などです。このような状況が想定されるなら、テキスト説明などの何らかの代替手段を用意しておくほうがアクセシビリティーが高まりそうです。

pre 要素の概要

Category 「カテゴリー」
Flow content 「フロー・コンテンツ」
Palpable content 「パルパブル・コンテンツ：知覚可能コンテンツ」
Content model 「コンテンツ･モデル」
Phrasing content 「フレージング・コンテンツ：記述コンテンツ」
利用可能な場所
フロー・コンテンツが期待される場所
タグの省略
不可。開始と終了タグの両方が必要。
要素固有の属性
なし
標準的なスタイル

pre {
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
	font-family: monospace;
	white-space: pre;
}
DOMインターフェイス
HTMLPreElemnt (en-US)

Example of use

　プログラムのソースコードを表す場合には、pre要素と code要素を組み合わせて使用するのが一般的です。

コードのマークアップ例


<p>　これは、中心座標 (50, 50) で半径 40 ピクセルの円に沿って、 x 軸正方向（右方向）を基準に 0&deg; の位置から時計回りで 135&deg; の位置までを、時計回りで円弧を描いた例です。</p>

<pre><code>
window.onload = function() {
	var canvas = document.getElementById('cl');
	if ( ! canvas || ! canvas.getContext ) {
		return false;
	}
	var ctx = canvas.getContext('2d');
	ctx.beginPath();
	var startAngle = 0;
	var endAngle = 135 * Math.PI / 180;
	ctx.arc( 50, 50, 40, startAngle, endAngle, false );
	ctx.stroke();
}
</code></pre>

CSS の例


pre {
	font-family: Courier,"Courier New",monospace;
	border: 1px dotted #999;
	padding: 10px 10px 10px 10px;
	width: 95%;
	overflow-x: auto;
}

　このサンプルでは、コードのインデントが、マークアップの通りに、ブラウザ上に表示されることになります。

　pre要素のコンテンツ・モデルはフレージング・コンテンツです。そのため、テキストだけでなく、フレージング・コンテンツに属する要素を使って、特定のテキストの範囲にセマンティクスを与える事ができます。a要素（フレージング・コンテンツだけを入れた場合に限ります）、abbr要素、cite要素、code要素、em要素、i要素、mark要素、q要素、small要素、span要素、strong要素、var要素などを、pre要素の中で使う事が多いでしょう。

テキストにセマンティクスを与えたマークアップ例


<pre><code>var nodelist = document.<a href="http://www.w3.org/TR/html5/dom.html#dom-document-getelementsbyclass-name"><mark>getElementsByClassName('comment')</mark></a>;</code></pre>

　この例では、pre要素のコンテンツ全体を code要素に入れる事で、それがコードである事を表しています。そして、特定の部分に a要素を使い、そのコードのリファレンスへリンクし、さらに、後にそれについて説明するために、mark要素を使ってマーキングしています。