整形テキスト
<pre>
文中へリストを置いたりする時、固定幅フォントでスペース、改行、タグを有効にしたテキストの作成が必要となります。これは<table>(表)タグを利用できるほか、ブラウザ(閲覧ソフト)が表をサポートしていない場合など、HTMLでは整形テキストを作成するためのタグ<pre>が用意されています。開始タグ<pre>と終了タグ</pre>で整形したいテキストを囲み、その記述例は以下のとおりです。
<pre>
5:30 P.M.： 開場
6:30 P.M.： 開幕
7:00 P.M.： 開演
8:00 P.M.： 休憩
8:30 P.M.： 開演
9:30 P.M.： 終演
</pre>
5:30 P.M.： 開場
6:30 P.M.： 開幕
7:00 P.M.： 開演
8:00 P.M.： 休憩
8:30 P.M.： 開演
9:30 P.M.： 終演
もちろん、<pre>〜</pre>内でハイパーリンク(アンカー)は使用できます。ただし、注意として｢<｣、｢>｣、｢&｣などHTMLで特殊記号として扱われる文字を記述する場合、エスケープ･シークエンス記号を使う必要があることを忘れないで下さい。たとえば、｢太文字｣を説明するため｢<b>｣と書けば、ブラウザはそれをタグと見なし、後のテキストを太文字で表示するだけです。それをタグでなくテキストとして表示させたいなら｢<b>｣と記述し、初めて｢<b>｣となります。以下が特殊記号を表わすエスケープ･シークエンス記号です。
特殊記号の記述方
| 記号 | 記述方 | 記号名 |
|---|
| < |
< | 小なり |
|---|
| > |
> | 大なり |
|---|
| & |
& | アンバーサンド |
|---|
|
<pre>タグを使った表
<pre>タグを使って表を作成するとこうなります。
<pre>
月 売上
--------------------
１月 120万円
２月 175万円
３月 150万円
４月 225万円
</pre>
月 売上
--------------------
１月 120万円
２月 175万円
３月 150万円
４月 225万円
 |
<pre>フォントが等幅フォントではない場合、表の位置が揃わなくて見づらくなるため、ブラウザの日本語フォントは等幅フォントにセットしておきましょう。また、<u>(下線)タグや<strike>か<s>(取消文字)タグをサポートしているブラウザの場合、これらのタグで線を入れると、もっと表らしく作成できます。 | |
<pre>
月 売上
<s> </s>
１月 120万円
--------------------
２月 175万円
--------------------
３月 150万円
--------------------
４月 225万円
<s> </s>
</pre>
月 売上
１月 120万円
--------------------
２月 175万円
--------------------
３月 150万円
--------------------
４月 225万円
<pre>タグと画像の位置(水平方向)
<pre>はエスケープ･シークエンス文字以外はとくに気を使う必要がないので、素早くHTML文書作成したい時は便利です。また、アスキーアート(Ascii Art)などの表示でも役立つほか、ブラウザがインラインイメージを水平方向のどこにでも置ける機能をサポートしていない場合、<pre>〜</pre>内へ<img>タグを置けば水平方向の位置は調整できます。
<pre>
<img src="../photos/traci_s.jpg">
</pre>
整形テキストのフォント
<pre>タグの属性にvariableを付けるとテキストのフォントが等幅フォントではなくなり、水平方向のスペース幅は無視されます。先ほどの例を使ってみると、
<pre variable>
5:30 P.M.： 開場
6:30 P.M.： 開幕
7:00 P.M.： 開演
8:00 P.M.： 休憩
8:30 P.M.： 開演
9:30 P.M.： 終演
</pre>
5:30 P.M.： 開場
6:30 P.M.： 開幕
7:00 P.M.： 開演
8:00 P.M.： 休憩
8:30 P.M.： 開演
9:30 P.M.： 終演
整形テキストの幅
<pre>タグにはwidth属性も提案されていますが、これを使用できるブラウザは今のところ存在していないようです。widthを使うと整形テキストの横幅が文字数で指定できます。
<pre width=30>
テキスト
</pre>
古い整列タグ
<pre>と同じ機能を持つタグに<xmp>、<listing>、<plaintext>などがあります。しかし、現在は古いタグとして扱われているため、使えるブラウザがあっても使用は控えたほうが賢明でしょう。
<xmp>タグ
以下の記述例を見ていただければおわかりのように、<xmp>タグは<pre>タグと違ってハイパーリンク(アンカー)をサポートしていないため、<a>タグが機能せず、テキストとしてそのまま表示されます。
<xmp>
5:30 P.M.： 開場
6:30 P.M.： 開幕
7:00 P.M.： 開演
8:00 P.M.： 休憩
8:30 P.M.： 開演
9:30 P.M.： 終演
<a href="index.html">目次に戻る</a>
</xmp>
<![CDATA[
5:30 P.M.： 開場
6:30 P.M.： 開幕
7:00 P.M.： 開演
8:00 P.M.： 休憩
8:30 P.M.： 開演
9:30 P.M.： 終演
<a href="index.html">目次に戻る</a>
]]>
<listing>タグ
<listing>タグの場合、ハイパーリンク(アンカー)はサポートしている一方で、リスト全体のフォントサイズが小さくなってしまいます。
<listing>
5:30 P.M.： 開場
6:30 P.M.： 開幕
7:00 P.M.： 開演
8:00 P.M.： 休憩
8:30 P.M.： 開演
9:30 P.M.： 終演
<a href="index.html">目次に戻る</a>
</listing>
5:30 P.M.： 開場
6:30 P.M.： 開幕
7:00 P.M.： 開演
8:00 P.M.： 休憩
8:30 P.M.： 開演
9:30 P.M.： 終演
目次に戻る
<plaintext>タグ
他と違って<plaintext>タグはワンサイドで開始タグしかありません。これ以降のテキストが文字通りHTML文書からプレーンテキストに変わり、タグを無視して等幅テキストで表示されます。つまり、HTML文書へは戻せないので注意して下さい。
<plaintext>
テキスト
