Section 6 : 整形済みテキスト・実体参照

 HTML は基本的に文書の構造を記述し,それにしたがってブラウザが自分自身の設定(またはスタイルシート)を加味して目に触れる文書にする。しかし,それらを抑制して“入力したのとほぼ同じ”に表示させることもできる。

整形済みテキスト

 Hello world HTML の Section 3 で見たように,HTML において空白や改行はそれほど大きな意味を持たない。また,長い文章の場合はブラウザの横幅に合わせて折り返しが行われる。ようするに,ブラウザの出力はエディタで見ている原稿とは(タグも含めて)ずいぶん異なるということになる。

 これでは不便が生じる場合もあるので,その場合は整形済みテキストとしてエディタでの入力とほぼ同じ出力を得ることができる。“テキスト形式の電子メール”と同じと考えるとわかりやすいだろう。

 この“整形済みテキスト”は次のように記述する。

<PRE>...</PRE>

 これも“文書中のまとまり”扱いで前後は改行される。

 <PRE>...</PRE> の中では,原稿中の空白や改行がほぼそのとおりに出力される。ただし,折り返しも抑制されるので,逆に言えば適当な箇所に改行を挟まないと文章は横方向にずるずるのびていってしまう。

 さらに,整形済みテキスト中では,使える要素も制限される。たとえば,<IMG> で画像を入れることや,文字を装飾する <BIG> などは使用できない。

 <PRE> は,プログラムソースの表示やチャートを書くこと,また表組が使えない環境での表作成などに応用される。タグ付けの手間が省けるといって,手抜きをしてはいけない。

 テキストエディタで,プログラムソースの部分を <PRE>...</PRE> でくくると,

<PRE>
program sample(input,output);
var x, y : real;

begin
  write('input x and y'); readln(x,y);
  writeln('distance = ',sqrt(sqr(x)+sqr(y)))
end.
</PRE>

ブラウザによる出力は,

program sample(input,output);
var x, y : real;

begin
  write('input x and y'); readln(x,y);
  writeln('distance = ',sqrt(sqr(x)+sqr(y)))
end.

 <BR> を書いてなくてもきちんと改行されているし,複数の空白も入っている。表示においてフォントは等幅のものが使われるが,環境によっては半角文字と全角文字の幅の比が 1:2 にならないこともあるので,安易に原稿用紙を埋めるように書かないことも重要である。

 HTML はブラウザが環境に合わせて折り返しをしたりして読みやすい文書に整形する。これをみだりに抑制してしまうと,ブラウザ上でしばしば読みにくくなる。なお,空白を入れる場合はタブ(TAB)ではなくスペースを入れるのがよい。

文字実体参照

 <PRE>...</PRE> の中では書いた文字がそのまま表示されるといっても,タグに使う半角の不等号「<」,「>」などは表示されない。このような特殊な記号を表示させるためには,文字ごとに決められたコードで指定する。漢字のコードをいちいち探して入力するのが難しいように,これを数値で指定するのは大変なので,わかりやすい文字が対応している。これを文字実体参照という。不等号や「&」(アンパサンド)は次のように書く。

&lt;
不等号「<」。less than。
&gt;
不等号「>」。greater than。
&amp;
アンパサンド「&」。ampersand。

 実体参照では大文字・小文字は区別される。<PRE>...</PRE> の中であっても,これらの文字は実体参照を使う必要がある。

コメントアウト

 将来のページ拡張のためや,自分でソース(原稿)を見て分かりやすくするための注釈を設けるのにコメントアウトが有効である。コメントアウトは,次のような形で書かれる。

<!-- ... -->

この内側に書かれたものは,表示の際無視される。

このように文章が続いていて,<!-- コメントアウト -->コメントは表示されません。

 このように文章が続いていて,コメントは表示されません。

のように表示される。コメントアウトの中で,さらにハイフンを続けて2つ“--”のように書くと,ブラウザが誤認する可能性があるので避けよう。

 なお,このコメントアウトは Fiest step CSS からはじまるスタイルシートなどでも使われることになる。


◆Summary

 <PRE>...</PRE> を使うと,空白や改行を含めてテキストエディタで書いたのとほぼ同じようにブラウザに表示される。不等号や「&」を画面に表示するためには実体参照を用いる。また HTML のコメントアウト <!-- ... --> は定型として覚えてしまおう。