改行に注意!


誰でもWWW用のページ(俗に言うホームページ)を作ろうと思えば、HTMLファイルを作成する必要があります。 HTMLを自分で手書きしようと、専用の作成ソフトを使おうと、このことは同じです。

HTMLとは <BODY> 〜 </BODY> とか <DIV align="center"> 〜 </DIV> とかいったタグの集まりであることは、みなさんご存じであると思います。 HTMLも基本的にはテキストファイルなので、「メモ帳」などの簡易エディタで開いて読むことが出来ますが、HTMLファイルとしてブラウザで開けばタグの命令が実行される、 その意味でプログラムのソースファイルに似たところがあります。

ところでHTMLも一種のテキストファイルですから、一般的には読みやすく書きます。中にはわざと読みづらく書く場合もありますが、普通は適宜改行してバランスよく書きますよね。 例えば、

<DIV align="center"><A href="abc.html"><IMG src="abc.gif" border=0><BR><B>ABC</B></A></DIV>

も、

<DIV align="center">
<A href="abc.html">
<IMG src="abc.gif" border=0>
<BR>
<B>
ABC
</B>
</A>
</DIV>

も、ブラウザ上の表示結果にはほとんど違いがありませんが、下の書き方の方が読みやすいし、見た目にも綺麗です。 このほかに、タグを適宜インデントして、タグの主従関係を明示する高度な書き方もありますが、ここでは省略します。

ただ、ここで気になるのは、改行の問題です。<PRE> タグを使用して書いたとおりに表示させる場合を別として、通常、HTMLソース上の改行は Web ページには反映しません。 Web ページで文章を改行するには、<BR> タグを使うか、<P>、<BLOCKQUOTE>、<CENTER>、<TABLE> 等々の論理タグを用いて強制的に改行させます。 (スタイルシートについては、ここでは省略します。)それ以外には、文章が画面から(或いは論理タグで定義した幅から)はみ出そうになると、ブラウザが自動的に改行して表示してくれます。 逆に、はみ出てでも改行させずに表示したいならば、<NOBR> タグを使用します。

そうすると、長い文章を書いているときなど、どこで改行するか迷うことがありますね。(ブラウザ上での改行ではなく、HTMLソースでの改行のことです。) どうせブラウザでの表示には反映しないのだし、面倒だからと長い文の最後まで改行しない人もいます。しかし通常の文章の場合も、上に述べた理由から、適当に改行した方がいいと思います。 ではどこで?

ここで頭に入れておかなければならないのは、改行も1つの文字だ、ということです。自分で Web ページを数多く作成している人は、この事実にうすうす気づいているはずです。 しかし改行文字は普通のエディタやブラウザ上では目に見えないために、しばしば私たちを混乱に陥れます。しかもHTMLソースでの改行とブラウザ上の改行が異なるのだから、話がややこしくなります。 しかし改行が1つの文字だ、という事実は、比較的簡単に確かめることが出来ます。

改行は1つの半角文字です。つまり外見上は、半角スペースと似ています。下の2つの文章を見比べて下さい。

この文章には改行がありません。

この文章には改 行がありません。

Intenet Explorer(特に 4.0x)で見ると、2つの文章は全く違わないはずです。しかし Netscape(3.0x も 4.0x も)では、「改」と「行」の間に半角スペース空いているはずです。 これは、ここで改行したために、改行文字が半角スペースとなって現れるのです。IE の場合は、justification されて無駄なスペースが省かれるのでしょう。

まあ普通は、こんな所で改行する人はいませんが、長い日本語の文章だとついつい中途半端なところで改行してしまうことがあります。 ですから、長い日本語文での改行は、なるべく句読点の後でおこなったほうがいいと思います。では IE なら、改行文字の問題は無視できるかというと、そうでもないのです。下を見て下さい。

メッセージ1 メッセージ2 メッセージ3


IE 4.0x や Netscape で見ると、左と中央の画像の右下になにやら格好悪い青線が見えているはずです。これのソースは以下の通りです。

<A href="JavaScript:alert('メッセージ1です')">
<IMG src="Msg1.gif" border=0>
</A>
<A href="JavaScript:alert('メッセージ2です')">
<IMG src="Msg2.gif" border=0>
</A>
<A href="JavaScript:alert('メッセージ3です')">
<IMG src="Msg3.gif" border=0>
</A>

これはHTMLの書き方としては正統的な、タグごとに改行した書き方ですが、その結果、<IMG> タグと </A> タグとの間に改行文字が入り、そこにリンクの下線が引かれてしまっているのです。そこでこれを、

<A href="JavaScript:alert('メッセージ1です')">
<IMG src="Msg1.gif" border=0></A>
<A href="JavaScript:alert('メッセージ2です')">
<IMG src="Msg2.gif" border=0></A>
<A href="JavaScript:alert('メッセージ3です')">
<IMG src="Msg3.gif" border=0></A>

とすると、

メッセージ1 メッセージ2 メッセージ3


のように、リンクを示す下線が見事に消えました。しかしまだ画像と画像の間にスペースが残っています。 このスペースも、実はタグとタグとの間の改行スペースの仕業です。そこでこれを

<A href="JavaScript:alert('メッセージ1です')"><IMG src="Msg1.gif" border=0></A><A href="JavaScript:alert('メッセージ2です')"><IMG src="Msg2.gif" border=0></A><A href="JavaScript:alert('メッセージ3です')"><IMG src="Msg3.gif" border=0></A>

のように改行なしにすると、

メッセージ1メッセージ2メッセージ3


と、見事にスペースが消えました。HTMLの書き方として、これは少々荒っぽい感じもしますが、しかしこのような書き方をする場合もあるのだということを頭に入れておいて下さい。HTML作成ソフトに頼りっきりだと気づかれないこうした問題も、タグを勉強するうちに見えてくるのです。

ではなぜ改行が文字なのでしょうか?文字にはすべてコードがあり、コンピュータはそのコードを読み込むことで文字を出力します。ここで改行せよ、という命令もまたコード番号で示されますが、そのコード番号の領域が1スペースとなるらしいのです。改行コードは実際には行送り(LF)と復帰(CR)との組み合わせで、これを16進数に直すとそれぞれ 0A、0D となりますが、 話がちょっと難しくなってきたので今回はここでおしまい!




次のトピックは「キャラクタ・セットを使う」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで