pre要素

HTMLでは、記述したとおりの表示をさせることもできます。

本ページでは、pre要素について説明します。

pre要素とは

pre要素は、整形済テキストを示します。テキストは等幅フォントが使われ、連続した半角スペースも表示されます。また、改行も反映されます。

preの定義は、以下のとおりです。

【pの定義】
コンテンツカテゴリ フローコンテンツ認知可能コンテンツ
可能な親要素 フローコンテンツを包含できる要素
可能なコンテンツ フレージングコンテンツ
タグの省略 不可
DOMインターフェース HTMLPreElement

利用例

比較のため、まずはp要素で記述した例です。

【p要素の利用例】
<p>
Cisco# show
Interface  Role  Sts  Cost  Prio.Nbr  Type
Gi0/1      Root  FWD  8     128.1     p2p
Gi0/2      Back  ...  14    128       p2p
</p>

これをブラウザで表示すると、以下になります。

改行されずに半角スペースも詰めて表示されている

改行されていませんし、半角スペースも詰めて表示されています。

pre要素を使うと、記述したとおりに表示させることができます。以下は、利用例です。

【pre要素の利用例】
<pre>
Cisco# show
Interface  Role  Sts  Cost  Prio.Nbr  Type
Gi0/1      Root  FWD  8     128.1     p2p
Gi0/2      Back  ...  14    128       p2p
</pre>

上記は、以下のように表示されます。

改行して半角スペースも詰められずに表示されている

記述したとおりに表示されています。

属性

グローバル属性が使えます。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
pre
【スマートフォン】
項目 Sa An Op Ch Fx Sm
pre
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

サイト内で関連ページをチェック

ホームページ作成「整形済みテキストと特殊文字

HTML要素(タグ)一覧」に戻る