ywork2020.com

Title

整形済みテキストのブロックを表す

目次 (INDEX)

pre とは

ここで説明する pre とは次の語句からなる HTML の要素です。
preformatted
読み: プレフォーマッテッド
意味: フォーマット済み、整形済み

目次に戻る

pre 要素の概要

この要素は、整形済みのテキストを表示するためのブロックを表します。

HTML文書における通常のテキストでは、連続する 半角スペース ・ 改行 ・ タブ の文字は、1つの半角スペースにまとめられてブラウザに表示されます。 しかし、pre 要素内のテキストは入力した内容がそのままの状態でブラウザに表示されます。

この要素には、開始タグと終了タグが必要です。
<pre> </pre>

目次に戻る

サンプルコードと実行結果

このサンプルでは、p 要素と pre 要素の比較を行います。 サンプルコードでのコード内容の違いも確認してみて下さい。

pre 要素内では、改行するのに br 要素なども必要ありません。
また、表示されるテキストを書く場合は、テキストエディタの左につけて書かなければスペースやタブ文字なども、 そのままの整形状態で表示されます。

サンプルコード: HTML
<body>
	<p>
		このテキストは <br>
			p 要素内のテキストです。 <br>
				タブ文字を入れて階段状にテキストを配置してみました。
	</p>
<pre>
	このテキストは
		pre 要素内のテキストです。
			タブ文字を入れて階段状にテキストを配置してみました。
</pre>
</body>
実行結果:

このテキストは
p 要素内のテキストです。
タブ文字を入れて階段状にテキストを配置してみました。

このテキストは
	pre 要素内のテキストです。
		タブ文字を入れて階段状にテキストを配置してみました。

目次に戻る

使用できる属性

目次に戻る