このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<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) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して等幅フォントで表示されます。この要素内のホワイトスペース文字はそのまま表示します。
試してみましょう
<pre> L TE A A C V R A DOU LOU REUSE QUE TU PORTES ET QUI T' ORNE O CI VILISÉ OTE- TU VEUX LA BIEN SI RESPI RER - Apollinaire</pre>pre { font-size: 0.7rem; margin: 0;}<pre> タグ内で<、>、&、" などの予約文字を表示する必要がある場合は、それぞれのHTML エンティティを用いてエスケープする必要があります。
属性
この要素はグローバル属性のみがあります。
アクセシビリティの考慮
整形済みテキストを使用して作成した画像や図には、代替説明を提供することが重要です。代替説明は、画像や図のコンテンツを明確かつ簡潔に記述する必要があります。
弱視の人やスクリーンリーダーなどの支援技術を使って閲覧している人は、整形済みテキスト文字が順番に読み上げられたときに何を表しているのか理解できないかもしれません。
<figure> 要素と<figcaption> 要素の組み合わせや、pre 要素のARIA のrole とaria-label 属性によって補われます。整形済みASCII アートは代替テキストを持つ画像としてアナウンスされ、figcaption は画像のキャプションとして機能します。
例
<figure> <pre role="img" aria-label="ASCII COW"> __________________ < 私は牧場の達人です。> ------------------ \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || || </pre> <figcaption> 「私は牧場の達人です。」と言っている牛。牛は整形済みテキストで表現されている。 </figcaption></figure>例
基本的な例
HTML
<p>CSS を使用してフォントの色を変更するのは簡単です。</p><pre>body { color: red;}</pre>結果
予約文字のエスケープ
HTML
<pre>let i = 5;if (i < 10 && i > 0) return "1 桁の数値"</pre>結果
技術的概要
| コンテンツカテゴリー | フローコンテンツ、知覚可能コンテンツ |
|---|---|
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | generic |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | HTMLPreElement |
仕様書
| Specification |
|---|
| HTML # the-pre-element |
ブラウザーの互換性
関連情報
- CSS:
white-space,word-break - HTML エンティティ
- 関連する要素:
<code>