HTML <pre> 整形済みテキスト要素
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<pre> は HTML の要素で、整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して等幅フォントで表示されます。
この要素内の空白は、書かれたまま表示されますが、1 つの例外があります。開始タグ <pre> の直後に 1 つ以上の先頭改行文字が含まれている場合、最初の改行文字が削除されます。この変換は HTML パーサーによって行われ、XHTML を使用する場合は適用されません。
<pre> 要素のテキストコンテンツは HTML として構文解析されます。そのため、テキストコンテンツを確実にプレーンテキストのまま実現したい場合は、< などの一部の構文文字について、それぞれの文字参照を使用してエスケープする必要がある場合があります。情報については、曖昧な文字のエスケープをご覧ください。
<pre> 要素にはよく <code>、<samp>、<kbd> といった要素を内包し、それぞれコンピューターのコード、コンピューターの出力、ユーザーの入力を表します。
試してみましょう
<pre>
S
A
LUT
M
O N
D E
DONT
JE SUIS
LA LAN
G U E É
L O Q U E N
TE QUESA
B O U C H E
O P A R I S
T I R E ET TIRERA
T O U JOURS
AUX A L
LEM ANDS - Apollinaire
</pre>
pre {
font-size: 0.7rem;
margin: 0;
}
属性
この要素はグローバル属性のみがあります。
width-
1 行あたりの望ましい文字数を示します。この属性は技術的には実装されていますが、視覚上の効果はありません。同様の効果を得るには、CSS の
widthを使用してください。 wrap-
テキストがはみ出た場合の処理に関するヒントを示します。現行のブラウザーはこのヒントを無視して、視覚上の効果をもたらしません。同様の効果を得るには、CSS の
white-spaceを使用してください。
ア��セシビリティ
整形済みテキストを使用して作成した画像や図には、代替説明を提供することが重要です。代替説明は、画像や図のコンテンツを明確かつ簡潔に記述する必要があります。
弱視の人やスクリーンリーダーなどの支援技術を使って閲覧している人は、整形済みテキスト文字が順番に読み上げられたときに何を表しているのか理解できないかもしれません。
<figure> 要素と <figcaption> 要素の組み合わせや、pre 要素の ARIA の role と aria-label 属性によって補われます。整形済み ASCII アートは代替テキストを持つ画像としてアナウンスされ、figcaption は画像のキャプションとして機能します。
例
<figure>
<pre role="img" aria-label="ASCII COW">
__________________
< 私は牧場の達人です。>
------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
</pre>
<figcaption id="cow-caption">
「私は牧場の達人です。」と言っている牛。牛は整形済みテキストで表現されている。
</figcaption>
</figure>
例
基本的な例
HTML
<p>CSS を使用してフォントの色を変更するのは簡単です。</p>
<pre><code>
body {
color: red;
}
</code></pre>
結果
曖昧な文字のエスケープ
HTML コードを <pre> 要素内で表示したい場合を考えてみましょう。有効な HTML タグを定義する文字列（< で始まり、> で終わるもの）は表示されません。タグの文字をテキストとして表示させるには、少なくとも < 文字を文字参照を使用してエスケープし、その文字列が有効なタグを定義しなくなるようにする必要があります。
実際には、HTML パーサーは、特定のコンテキスト下でない限り、ほとんどの文字をプレーンテキストとして扱います。例えば、< code は問題ありませんが、<code は誤って解析されてしまいます。また、&am; は問題ありませんが、& は問題となります。しかし、特にプログラムで HTML を生成し、<pre> のコンテンツを挿入する場合は、混乱を避けるために、曖昧な文字はすべてエスケープするのが良い慣行です。この場合、文字をエスケープする方法に関する良い経験則は以下の通りです。
- まず、HTML 文書に同様に現れるように、コンテンツを書き出します。
- アンパサンド (
&) はすべて&に置き換えます。次の段階で生成される新しい&文字がエスケープされないように、まずこの段階で行います。 - すべての
<文字を<で置き換えます。
これで、意図通りにコンテンツが表示されるはずです。その他の HTML 構文の文字を置き換えること（> を > に、" を " に、' を ' にするなど）はオプションですが、問題はありません。
HTML
<pre><code>
let i = 5;
if (i < 10 && i > 0)
return "1 桁の数値"
</code></pre>
結果
技術的概要
| コンテンツカテゴリー | フローコンテンツ、知覚可能コンテンツ |
|---|---|
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール |
generic
|
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | HTMLPreElement |
仕様書
| Specification |
|---|
| HTML # the-pre-element |
ブラウザーの互換性
関連情報
- CSS:
white-space,word-break - 文字参照
- 関連する要素:
<code>,<samp>,<kbd>