HTML <pre>
要素は、整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して等幅 ("monospace") フォントで表示されます。この要素内のホワイトスペース文字はそのまま表示します。
この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
コンテンツカテゴリ | フローコンテンツ、知覚可能コンテンツ |
---|---|
許可されている内容 | 記述コンテンツ |
タグの省略 | 不可。開始と終了タグの両方が必要。 |
許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
許可されている ARIA ロール | すべて |
DOM インターフェイス | HTMLPreElement |
属性
この要素はグローバル属性のみを持ちます。
cols
- 1行あたりの望ましい文字数を示します。これは
width
の標準外の別名です。同様の効果を得るには、CSS のwidth
を使用してください。 width
- 1行あたりの望ましい文字数を示します。この属性は技術的には実装されていますが、視覚上の効果はありません。同様の効果を得るには、CSS の
width
を使用してください。 wrap
- テキストがはみ出た場合の処理に関するヒントを示します。現行のブラウザーはこのヒントを無視して、視覚上の効果をもたらしません。同様の効果を得るには、CSS の
white-space
を使用してください。
例
<!-- CSS コードを表示する例 --> <pre> body { color:red; } </pre>
結果
body { color:red; }
アクセシビリティの考慮事項
整形済みテキストを使用して作られた絵や図に対して、別な説明を提供することは重要です。この別な説明は、明確かつ簡潔に絵や図の中身を説明するものにしてください。
弱視の人や、読み上げソフトのような支援技術を使用している人は、順番に読んだときに整形済みテキストで表現されているものが何か理解できないかもしれません。
<figure>
及び <figcaption>
要素の組み合わせに、 id
及び ARIA role
及び aria-labelledby
属性を補ったもので、整形済みテキストを図形として扱い、 figcaption
を図形の別の説明として提供することができます。
例
<figure role="img" aria-labelledby="cow-caption"> <pre> __________________ < 私は牧場の達人です。> ------------------ \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || || </pre> <figcaption id="cow-caption"> 「私は牧場の達人です。」と言っている牛。牛は整形済みテキストで表現されている。 </figcaption> </figure>
- MDN "WCAG を理解する ― ガイドライン 1.1 の解説"
- H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard <pre> の定義 |
現行の標準 | HTML5 から重大な変更はない |
HTML5 <pre> の定義 |
勧告 | HTML 4.01 Specification から重大な変更はない |
HTML 4.01 Specification <pre> の定義 |
勧告 | cols 属性を非推奨に変更 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
デスクトップ | モバイル | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
基本対応 | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 1 | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
cols | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 1 — 29 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 未対応 なし | Firefox Android 未対応 4 — 29 | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
width | Chrome
完全対応
あり
| Edge
完全対応
あり
| Firefox
完全対応
1
| IE
完全対応
あり
| Opera
完全対応
あり
| Safari
完全対応
あり
| WebView Android
完全対応
あり
| Chrome Android
完全対応
あり
| Edge Mobile
完全対応
あり
| Firefox Android
完全対応
4
| Opera Android
完全対応
あり
| Safari iOS
完全対応
あり
| Samsung Internet Android 完全対応 あり |
wrap | Chrome ? | Edge 未対応 なし | Firefox 完全対応 1 | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile 未対応 なし | Firefox Android 完全対応 4 | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 実装ノートを参照してください。
- 実装ノートを参照してください。
関連情報
- CSS:
white-space
,word-break