最終更新日

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>
       ∧,,∧
      (;`・ω・)  。・゚ バーガー作るお!!
      /   o━ヽニニフ))
      しー-J
    </pre>
  </body>
</html>
参考文献:W3C HTML5「4.5.3 The pre element」外部リンク
HOME