WebPage研究室

PREタグを使ってみよう

今回はPREタグなどを使って、テキストをそのまま表示させるお勉強をします。

通常、HTML文書では、文章を改行させるとき改行タグの を使って改行させます。
この を入れなかった場合、文章はどこまでも途切れることなく、ずっと繋がって表示されてしまいます。
そうして表示させたとしても、ブラウザの幅を変えればその幅に合わせて右端の文字が折り返されますが、それでは段落がなくなってしまいあまり読みやすい文章にはなりません。
ですから、読みやすい文章を作るという意味からも、 を使って適度に改行を入れることはとても大切なことです。

が、タグの中には を使わなくても、文章に改行を入れられるものがあります。
それが今日お勉強する、<PRE>と<PLAINTEXT>です。
この２つのタグは、それぞれ以下のように使います。

<PRE>

PREタグを使った場合、テキストは入力したとおりに表示されます。
今ここで改行させましたが、この文章では<BR>は使っていません。
このタグを使う時は、<PRE>本分</PRE>のように書きます。
なお、<PRE>と</PRE>の間では、その他のタグも有効になります。

↑の文章はこのようにして書きました。

<PRE>
PREタグを使った場合、テキストは入力したとおりに表示されます。
今ここで改行させましたが、この文章では&ｌｔ；BR&ｇｔ；は使っていません。
このタグを使う時は、&ｌｔ；PRE&ｇｔ；本分&ｌｔ；/PRE&ｇｔ；のように書きます。
なお、&ｌｔ；PRE&ｇｔ；と&ｌｔ；/PRE&ｇｔ；の間では、その他のタグも有効になります。
</PRE>

【注】
文中に出てくる&ｌｔ；と&ｇｔ；は、実際は半角文字で書きます。
（ここでは全角で書かないと「<」と「>」になってしまうので、全角で書いています。）

<PLAINTEXT>

PLAINTEXTを使った場合、入力したとおりに表示されるのはPREタグと同じですが、こちらはタグが無効になってしまいます。
なので、HTML文書を作る時、タグを書いてもぜーんぶそれが丸見えになってしまいます。
ようするに、ただのテキストとして表示されるってことです。
このタグは、文書の冒頭に<PLAINTEXT>と入れるだけで、閉じタグは必要ありません。
そのかわり、文書中延々と効果が続きます。（呪いのように．．（汗））

ってことで、ここで実際使うわけにはいかないのですが、どんな感じになるかとゆーと．．．

<PLAINTEXT>
好きな色はいろいろあるけど、俺は
青が好き～♪ だから青い文字！
青は俺のいろっ

と、打っても

文字が青色や太字にならずに．．．

好きな色はいろいろあるけど、俺は
青が好き～♪ だから青い文字！
青は俺のいろっ

と、そのままブラウザに出てしまいます。
それどころか、先にも書いた通り<PLAINTEXT>以下に書いたタグは、HTML文書の最後の</HTML>まで全て暴かれてしまいます。

このタグを使う時に気を付けたいのは、ある程度の箇所で改行を入れることを忘れないことです。
そうしないと、ブラウザの折り返しが無効になるので、命令通りに延々と文字を右側に連ねていきます。
（そして、超絶長い横スクロールが発生します。）

上記の例の他にも、使いようによっては細かいレイアウトができたり、タグの形をそのまま表示させたい時などに便利なタグのようです。