このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

pre”要素:整形済みのテキスト

記事Apr. 19th,2015
July 7th,2020
整形済みのテキストを表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

pre”要素は整形済みのテキストを表す要素です。

電子メールの内容、ソースコード、詩歌、アスキーアートなどの記述したままの形で表示させたい内容に使用します。

pre”要素を用いて絵や図をなどを表現している場合、表示が崩れた時や音声読み上げソフトなど視覚デバイス以外の方法で閲覧しているユーザー向けに内容を理解できるような説明を用意しておくことが推奨されます。

一般的に、“pre”要素の内容は通常は1個にまとめられるか取り除かれるコード中の半角スペース、タブ、改行などのホワイトスペースがコードで記述された通りに表示されます。

サンプルコード

<pre>
冬は つとめて
雪の降りたるは
言ふべきにはあらず
霜のいと白きも また さらでも
いと寒きに
火など いそぎおこして
炭持てわたるも いと つきづきし
昼になりて ぬるく ゆるびもていけば
火桶の火も 白き灰がちになりて わろし
</pre>
	冬は つとめて
	雪の降りたるは
	言ふべきにはあらず
	霜のいと白きも また さらでも
	いと寒きに
	火など いそぎおこして
	炭持てわたるも いと つきづきし
	昼になりて ぬるく ゆるびもていけば
	火桶の火も 白き灰がちになりて わろし
	

一般的なブラウザでは“pre”要素の内容は等幅フォントで表示されます。

ソースコードはcode”要素、コンピューターが出力した内容はsamp”要素を“pre”要素の中にを配置して表すことができます。

<pre>
<code>
&lt;!------
now = new Date()
document.write("今日は" + now.getFullYear() + "年"
+ (now.getMonth() + 1) + "月"
+ now.getDate() + "日です")
//------&gt;
</code>
</pre>
	
	<!------
	now = new Date()
	document.write("今日は" + now.getFullYear() + "年"
	+ (now.getMonth() + 1) + "月"
	+ now.getDate() + "日です")
	//------>
	
	

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
過去に定義されていた属性
属性
属性 説明 説明
width=""注意 1行に表示できる文字数 正の整数 1行に表示できる文字数

仕様書

pre”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<pre>
定義あり

定義あり

定義あり

定義あり

定義あり
DOMインターフェース
[Exposed=Window]
interface HTMLPreElement : HTMLElement {
[HTMLConstructor] constructor();

// also has obsolete members
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);

pre {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
font-family: monospace;
white-space: pre;
unicode-bidi: isolate;
}

pre[dir=auto i] {
unicode-bidi: plaintext;
}

/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
pre {
unicode-bidi: bidi-override;
}

また、以下のスタイルシートを“表現上のヒント”としてUAスタイルシートに含むことが期待されています。

@namespace url(http://www.w3.org/1999/xhtml);

pre[wrap] { white-space: pre-wrap; }
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク