最終更新日 2021年4月7日

pre要素

HTMLでは、改行や空白文字を入力してもそのまま表示に反映されませんが、pre要素で囲むと、空白や改行も含め、整形されたそのままの形で文章のブロックが表示されます。

pre要素は一般に、プログラムのソースコードや出力例、アスキーアート、詩などを表す場合に使われます。pre要素と組み合わせて、プログラムのソースコードではcode要素、出力例ではsamp要素、ユーザーの入力例にはkbd要素などが使われます。pre要素は、Flowコンテンツの記述箇所で使用できます。

HTML構文では、pre要素の開始タグの直後にある改行は無視されます。

pre要素では、整形済みテキストの書式が表示されない場合にどのように表されるかを考慮し、文章による説明など代替の表現方法を用意しておくことがアクセシビリティの観点から推奨されています。

HTML5での変更点

・pre要素のwidth属性は廃止されました。代わりにCSSを使います。

カテゴリ	タグの省略	親要素	子要素
Flowコンテンツ	省略不可	Flowコンテンツを子にできる要素	Phrasingコンテンツ

属性	値	説明
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>マクドエイド</title>
  </head>
  <body>
    <p>マクドエイドのイメージキャラクター「ツクルオ」です。</p>
    <pre>
       ∧,,∧
      (；`・ω・）　　｡･ﾟ　バーガー作るお！！
      /　　 ｏ━ヽニニフ))
      しー-Ｊ
    </pre>
  </body>
</html>

参考文献：W3C HTML5「4.5.3 The pre element」

ザマワンにエントリーしました！

『ザマワン』は「座間ワンミニッツ」の略称であり、座間市の魅力を１分にギュッと詰め込む動画コンテストです。