pre要素

TOPページに戻る > html入門

pre要素

改行や空白をそのまま表示することができます。プログラムのソースを表示するときに使えます
アスキーアートで絵を書くこともできます。このサイトではHTMLやcssのソースを表示するときにpre要素を使っています
pre要素の内容になったテキストは自動改行されません。cssを使えばできるようになります

使い方（書式）

<pre></pre>

pre要素

対応ブラウザ
要素の種類	ブロック要素
内容となる要素	インライン要素、テキスト

属性	説明
共通属性	html共通属性
イベント属性	htmlイベント属性

実際の指定方法

html

<pre>プログラムソース</pre>

実際の表示（プラグインを使用しているため左に行番号が入りますが、pre要素のみの場合は番号はありません）

プログラムソース

cssでスタイルを指定

cssで自動改行をするように指定しました

html

<pre>プログラムソース。プラグインを使用しているため左に行番号が入りますが、
pre要素のみの場合は番号はありません）右端まで行ったら左に自動改行されます</pre>

css

pre { white-space: pre-wrap; } /* 自動改行させる、改行や空白をそのまま表示 */

実際の表示

IE8以上で確かめてください

プログラムソース。プラグインを使用しているため左に行番号が入りますが、pre要素のみの場合は番号はありません）右端まで行ったら左に自動改行されます

横幅をcssで指定

html

<pre>プログラムソース</pre>

css

hoge2 { width: 500px; } /* pre要素の横幅をそのまま表示 */

実際の表示

プログラムソース

その他のデザインはcssでスタイルを指定