Apr. 19th,2015
＃
要素について
| カテゴリー | フロー・コンテンツ、パルパブル・コンテンツ |
| 利用場所 | フロー・コンテンツが置ける場所 |
| 内容 | フレージング・コンテンツ |
| タグの省略 | 不可 |
“pre”要素は整形済みのテキストを表す要素です。
電子メールの内容、ソースコード、詩歌、アスキーアートなどの記述したままの形で表示させたい内容に使用します。
“pre”要素を用いて絵や図をなどを表現している場合、表示が崩れた時や音声読み上げソフトなど視覚デバイス以外の方法で閲覧しているユーザー向けに内容を理解できるような説明を用意しておくことが推奨されます。
一般的に、“pre”要素の内容は通常は1個にまとめられるか取り除かれるコード中の半角スペース、タブ、改行などのホワイトスペースがコードで記述された通りに表示されます。
サンプルコード
<pre>
冬は つとめて
雪の降りたるは
言ふべきにはあらず
霜のいと白きも また さらでも
いと寒きに
火など いそぎおこして
炭持てわたるも いと つきづきし
昼になりて ぬるく ゆるびもていけば
火桶の火も 白き灰がちになりて わろし
</pre>
冬は つとめて 雪の降りたるは 言ふべきにはあらず 霜のいと白きも また さらでも いと寒きに 火など いそぎおこして 炭持てわたるも いと つきづきし 昼になりて ぬるく ゆるびもていけば 火桶の火も 白き灰がちになりて わろし
一般的なブラウザでは“pre”要素の内容は等幅フォントで表示されます。
ソースコードは“code”要素、コンピューターが出力した内容は“samp”要素を“pre”要素の中にを配置して表すことができます。
<pre>
<code>
<!------
now = new Date()
document.write("今日は" + now.getFullYear() + "年"
+ (now.getMonth() + 1) + "月"
+ now.getDate() + "日です")
//------>
</code>
</pre>
<!------
now = new Date()
document.write("今日は" + now.getFullYear() + "年"
+ (now.getMonth() + 1) + "月"
+ now.getDate() + "日です")
//------>
＃
＃
仕様書
“pre”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
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; }
