スポンサード リンク
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要素の横幅をそのまま表示 */
実際の表示
プログラムソース