English 中文 العربية 日本語 Português

<pre>: PRE 要素

最終更新：2026-10-13

<pre>PRE 要素

空白と改行を保持した整形済みテキストを等幅フォントで表示します。コードや詩に最適です。

カテゴリテキスト内容
コンテンツモデルフローコンテンツ
許可される親要素フローコンテンツを受け入れる要素
閉じタグ必要 </pre> タグ
ステータス標準

📝 構文

<pre>インデントや
  改行を
    保持</pre>
すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
<pre> ✓ v1 ✓ v12 ✓ v1 ✓ v1 ✓ v1
すべての主要ブラウザでサポート
ヒント： pre 内の空白はそのまま表示されます。余分なインデントに注意し、code と組み合わせることが多いです。

❓ よくある質問

Qpre の中の改行や空白はそのまま表示されますか？
A表示されます。それこそ <pre> の核心機能です。ソース中の空白・改行・インデントがそのまま表示されます（ブラウザはデフォルトで white-space: pre を適用）。そのため pre の HTML ソースでは、開始タグの直後に内容を書き、インデントが表示に混入しないよう注意しましょう。
Qpre と code は一緒に使うべきですか？
A組み合わせがおすすめです：<pre><code>コード</code></pre>。pre がレイアウトの保持を担当し、code が「これはコードだ」という意味を担当します。pre 単独でも表示はできますが、スクリーンリーダーや検索クローラーは内容がコードだと分かりません。
Qpre のコードが長すぎてあふれる場合は？
ACSS で横スクロールにします：pre { overflow-x: auto; }。コンテナの幅を制限すればスクロールバーが出ます。white-space: pre-wrap で無理やり折り返すのは避けましょう。コードが途中で折られると可読性が落ちます。スクロールの方が誠実な処理です。
<code> <code>
今後さらにケーススタディを追加予定です。

📚 関連チュートリアル

HTML Text Formatting HTML Paragraphs
HTML タグリファレンス
すべての HTML タグの構文・属性・例を確認できます。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%