戻る

PRE要素

囲われたテキストが整形済であることを示す

開始タグ:省略不可,修了タグ:省略不可

属性

id
class
lang
title
dir
style

普通に文章を入力した場合、複数の空白が一つに縮められたり、表示領域の限界に達したりすると、自動的に改行されたりする。しかし、この要素でテキストを囲むと、空白を縮めたり勝手に改行したりすること無く、入力した通に出力される。

例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/tr/html4/strict.dtd">
<HTML lang="ja">
  <HEAD>
    <TITLE>友人に連れられて秋葉教萌派の寺院にいって来た</TITLE>
    <!-- ここには HEAD 要素に含まれるべき物があるんですよ -->
  </HEAD>
  <BODY>
    <!-- ここが本文 -->
    <P>
      今日は友人のE君に連れられて秋葉教萌派の寺院にいって来た。
      われわれが到着した頃には多くの信者がすでに着席しており、
      E君は最前列の指定席に着席した。私はその隣の床に正坐させられた。
      教祖様がが姿を現し、首からさげていた鍵の型をしたネックレスを取りだし、
      呪文を唱えはじめた。
         萌の力を秘めし鍵よ
           新の力を我が前に示せ  
             契約の下
               *+@!?が命じる
                 レリーズ!
      以下略。
    </P>
  </BODY>
</HTML>

これを表示させるときっと次のようになります。

しかし、PRE要素を使うと次のようになるでしょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/tr/html4/strict.dtd">
<HTML lang="ja">
  <HEAD>
    <TITLE>友人に連れられて秋葉教萌派の寺院にいって来た</TITLE>
    <!-- ここには HEAD 要素に含まれるべき物があるんですよ -->
  </HEAD>
  <BODY>
    <!-- ここが本文 -->
    <P>
      <PRE>
      今日は友人のE君に連れられて秋葉教萌派の寺院にいって来た。
      われわれが到着した頃には多くの信者がすでに着席しており、
      E君は最前列の指定席に着席した。私はその隣の床に正坐させられた。
      教祖様がが姿を現し、首からさげていた鍵の型をしたネックレスを取りだし、
      呪文を唱えはじめた。
         萌の力を秘めし鍵よ
           新の力を我が前に示せ  
             契約の下
               *+@!?が命じる
                 レリーズ!
      以下略。
      </PRE>
    </P>
  </BODY>
</HTML>

戻る