pre要素

TOPページに戻る > html入門

スポンサード リンク

pre要素

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

使い方(書式)

<pre></pre>

pre要素

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
要素の種類 ブロック要素
内容となる要素 インライン要素、テキスト

属性 説明
共通属性 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でスタイルを指定





(C)2012 ホームページ作成無料