こだわりのHTML 改行編
戻るこだわりのHTML進む

改行
今度は改行です。
改行の何をこだわるのでしょうか。

改行コード
まずHTMLはASCIIテキストで記述されている事が殆どである事は皆さんご存じの通りです。
下記の表の通り、OSにより改行コードが事なる事もご存じでしょう。

OS改行コード16進表記10進表記C/Java/Perl等
UNIXLF0A10\n
WindowsCRLF0A 0D13 10\r\n
MacintoshCR0D13\r

それではLFやCRとは何なのでしょうか。

改行コード意味X行Y桁から
LFラインフィード(Line Feed)次の行へ移動X+1行Y桁へ
CRキャリッジリターン(Carriage Return)行の先頭へ移動X行先頭桁へ

これらを普通にHTMLに記述して使う事はブラウザが吸収してしまう為に問題は起こりません。
但し、CGIスクリプトとしてサーバに転送する際は、サーバのOSが使用している改行コードに変換していないと、正常にCGIスクリプトが動作しなくなります。
これらの変換を手助けする方法として3通りが考えられます。

  1. 改行コードを指定できるエディタを使用し、FTPのバイナリ形式で転送する。
  2. フィルタプログラムによって改行コードを変更し、FTPのバイナリ形式で転送する。
  3. FTPのASCIIテキスト形式で転送して、自動的に改行コードを変換させる。

と、つらつら書きましたが、私がここで述べたい事はどんな改行コードにせよ、HTMLの中で使用する際は何処が良いのかを考えましょう。
まずHTMLとして見え方に変化が起きてしまうのは、タグ(<から>で囲まれた)内の文字列の間で改行してしまう事です。
例)<HR>
<H
R>
こうなってしまうとブラウザは知らないタグと判断して何もしません。
どうしてもタグ内で改行したければ、半角スペースでセパレート出来る所を選びましょう。
例)<TABLE>
<TABLE
BORDER=0
CELLSPACING=0
CELLPADDING=0
BORDERCOLOR=0
WIDTH=100%>
但し、HTMLをテキストエディタで編集する際に編集しやすいかと言えば、一つのタグが2行に渡ってしまうなどの理由から解りにくい物にもなり得ます。
それ以外の箇所であれば、何処で改行しても影響は無いと思います。
なぜならHTMLでは文章内での改行コードは無視され、改行されないからです。
本当に改行したいのであれば、<BR>タグを使うことになります。
改行関連タグ
続いてはHTMLのタグによる改行についてです。
通常ブラウザはブラウザの表示エリアの横幅に合わせて自動改行します。
この仕様に背く為に下記の様なタグが存在します。

タグコメント
<BR>BReak明示的に改行させます。行末や文末に記述しましょう。
<WBR>Word BReakブラウザの横幅に依存して改行して欲しい所に記述します。空白にも記述しましたが、&thinsp;、&ensp;、&emsp;、&#32;、半角スペースも<WBR>の様に改行の対象になります。
<NOBR>〜</NOBR>NO BReak挟まれた行または文はブラウザの横幅に依存せず改行されません。
<TH NOWRAP>
<TH NOWRAP>
NO WRAP<TABLE>タグのセル内の行または文が自動改行されないようにします。
<P>〜</P>Paragraph本来の用途は段落分けをする事にありますが、</P>で閉じないで空白行を表示するという使い方をしている事が多いです。これを連続して記述したからといって複数行改行される訳ではありません。
また、<P>タグを多用し、</P>で閉じていないからといってスタックオーバーフローになる事は無いでしょう。
&nbsp;
&#160;
No Break SPaceタグでは無いですがここで紹介します。
空白にも記述しましたが、改行の対象にならない半角スペースです。

改行非関連タグ
続いては意図しない所で改行(もしくは段落化)されてしまうタグについてです。
ブラウザによって動作が異なるかもしれません。

タグコメント
<H1>〜</H1>
<H2>〜</H2>
<H3>〜</H3>
<H4>〜</H4>
<H5>〜</H5>
<H6>〜</H6>
Heading<Hx>の前と</Hx>の後に勝手に改行というよりも<P>の様な空白行が表示されます。見出しという目的のタグで すから当たり前と言えば当たり前です。
改行されたくないのであれば<FONT SIZE=x>〜</FONT>を使えば良いでしょう。但し、<Hh>と<FONT SIZE=f>のhとfの関係はf=7-hですので注意が必要です。
<UL>〜</UL>
<OL>〜</OL>
Unordered List
Ordered List
<UL>や<OL>の前と</UL>や</OL>の後に<P>の様な空白行が表示されます。但し、<TABLE>タグのセル内では前の空白行は出ない様です。また<TABLE>タグのセル内であれば、後の空白行を取り除く方法として</UL>や</OL>で閉じない事で回避できます。
<FORM>〜</FORM>FORM</FORM>の後に<P>の様な空白行が入ります。このページに1つの<FORM>〜</FORM>しか存在しないのであれば、HTMLの最後の方へ</FORM>を追いやる事で回避出来ます。複数<FORM>〜</FORM>を使用してい場合はネストされたり、クロスされたりしますので、誤動作の原因になります。

<Hx>の連続記述例

<H1>

<H2>

<H3>

<H4>

<H5>
<H6>

<FONT SIZE=x>の連続記述例
(FONTとSIZEの間のスペースに&nbsp;を使用しています。)
<FONT SIZE=1><FONT SIZE=2><FONT SIZE=3><FONT SIZE=4><FONT SIZE=5><FONT SIZE=6><FONT SIZE=7>
<UL>〜</UL> / <OL>〜</OL>
まずは<TABLE>タグの外です。
<UL>タグの直前です。</UL>タグの直後です。
次に<TABLE>タグのセルの中です。
解りやすいようにBORDER=1としていますので、実際に利用する際はBORDER=0にして下さい 。
<TABLE>タグの直前です。
<UL>タグの直前です。
    <UL>タグの直後です。
  • <LI>タグです。<TABLE>タグの外と結果は同じです。
    </UL>タグの直前です。
</UL>タグの直後です。
</TABLE>タグの直後です。
セルの中で<UL>より前、</UL>より後に文字を書いてしまうと今回の意図に沿わない事が解ります。
という事で、<UL>〜</UL>の前後には何も記述していません。
<TABLE>タグの直前です。
  • <LI>タグです。前に空白行がありません。
</TABLE>タグの直後です。
なぜだかは不明ですが、<UL>タグの前の空白行が無くなりました。
今度は<TABLE>タグのセルの中で、</UL>をしていません。
<TABLE>タグの直前です。
  • <LI>タグです。前後に空白行がありません。
</TABLE>タグの直後です。
<UL>〜</UL>タグの前後にあった空白行が消え去りました。
最後に<TABLE>タグのBORDER=1を0にして確認してみましょう。
<TABLE>タグの直前です。
  • <LI>タグです。前後に空白行がありません。
</TABLE>タグの直後です。
一応、<OL>の結果です。
<TABLE>タグの直前です。
  1. <LI>タグの1個目です。
  2. <LI>タグの2個目です。
  3. <LI>タグの3個目です。
</TABLE>タグの直後です。
<UL>〜</UL>及び<OL>〜</OL>の前後の空白行を消す事に成功しました。
<FORM>
まずは<TABLE>タグの外です。
<FORM>の直前です。
<FORM>の直後です。

</FORM>の直前です。
</FORM>の直後です。
次に<TABLE>タグのセルの中です。
<TABLE>タグの直前です。
<FORM>の直前です。
<FORM>の直後です。

</FORM>の直前です。
</FORM>の直後です。
</TABLE>タグの直後です。
続いて<FORM>や</FORM>の前後の文字を無くします。
<TABLE>タグの直前です。
</TABLE>タグの直後です。
予想通り、<UL>や<OL>同様に前方の空白行のみが消えました。
ここで、</FORM>で閉じないという事は、正常に動作しなくなることが予想されるため、この方法は行えません。
結論から言うと<FORM>と</FORM>を同じセルに入れない事でうまく空白行が消せそうです。
<TABLE>タグの直前です。
</TABLE>タグの直後です。
若干、空白行がある様に見えますが、気にならない程度だと思います。
が気になりますので、<FONT>や</FONT>を<TABLE>〜</TABLE>の中には入れますが、セルに含めない様に変更してみます。
<TABLE>タグの直前です。
では、BORDER=0にして確認します。
<TABLE>タグの直前です。
</TABLE>タグの直後です。

戻るこだわりのHTML進む