とほほのHTMLリファレンス(配置)

HOME > とほほのWWW入門 > とほほのHTMLリファレンス > 配置
1998年7月19日
<BR> 改行 H2/N2/e2
説明
改行(BReak)します。

属性
CLEAR=... H3/N2/e2。 <IMG>タグなどのALIGN属性でテキストの回り込みを行う際に、どの位置まで改行するかを指定します。 noneは通常に、 leftは行頭が最も左側に表示できる位置まで、 rightは行末が最も右側に表示できる位置まで改行します。 allはleftとrightを組み合わせたものです。

使用例
ここで改行します。<BR>改行しました。<BR>
<IMG ALIGN=left WIDTH=56 HEIGHT=69
     SRC="image/wwwpop0.gif">
ALIGN=leftの場合、通常のBRだけでは<BR>
この位置に改行されますが、
CLEAR=leftを指定すると<BR CLEAR=left>
行頭を左端から表示できる
この位置に改行されます。
これ(↑)を表示するとこう(↓)なります。
ここで改行します。
改行しました。
pop ALIGN=leftの場合、通常のBRだけでは
この位置に改行されますが、 CLEAR=leftを指定すると
行頭を左端から表示できる この位置に改行されます。

<NOBR>〜</NOBR> 改行禁止 N2/e2
説明
ブラウザは通常ウィンドウの大きさにあわせてテキストを自動的に改行しますが、 <NOBR>〜</NOBR>で囲まれたテキストは改行されません(NO BReak)。

<WBR> 改行禁止中の改行許可 N2/e2
説明
<NOBR>〜</NOBR>は改行を禁止するものでしたが、<WBR>は改行禁止テキスト中の、改行可能な箇所を指定します。 下の例では、ブラウザの横幅が狭い場合「ろろろ」と「ははは」の間では改行されるかもしれませんが、「はは」と「は」の間では改行が禁止されています。 改行を許可するだけで、強制的に改行しないところが<BR>と異なります。

使用例
<NOBR>
いいい<WBR>ろろろ<WBR>ははは
</NOBR>

補足
例えば、http://xxx.yyy.zzz/This/is/very/long/long/long/long/long/long/url/ の様に長いパス名を記述する際に、間に<WBR>を挿入することにより、適切な位置で改行してくれるようになります。

<CENTER>〜</CENTER> 中央表示 H3/N2/e2
説明
<CENTER>〜</CENTER>で囲まれたテキストを中揃えで表示します。 <DIV><Hn><P>などのALIGN属性でも中揃えは可能です。

使用例
<H3 ALIGN=center>あいうえお</H3>
<P ALIGN=center>かきくけこ</P>
<CENTER>さしすせそ</CENTER>
これ(↑)を表示するとこう(↓)なります。

あいうえお

かきくけこ

さしすせそ

<DIV>〜</DIV> 右、左、中央に表示 H3/N2/e3
説明
<DIV>〜</DIV>で囲まれたテキストをALIGN属性の値に従って配置します。

属性
ALIGN=... H3/N2/e3。 right(右揃え), center(中揃え), left(左揃え)のいずれかを指定します。
NOWRAP e4。 テキストの折り返し(自動改行)を禁止します。

使用例
<DIV ALIGN=left>これは左揃えの文章</DIV>
<DIV ALIGN=center>これは中揃えの文章</DIV>
<DIV ALIGN=right>これは右揃えの文章</DIV>
これ(↑)を表示するとこう(↓)なります。
これは左揃えの文章
これは中揃えの文章
これは右揃えの文章

<SUP>〜</SUP> 上付き文字 H3/N2/e3
<SUB>〜</SUB> 下付き文字 H3/N2/e3
説明
テキストを上付き、下付きで表示します。

使用例
通常テキスト
<SUP>上付き文字</SUP>
<SUB>下付き文字</SUB>
これ(↑)を表示するとこう(↓)なります。
通常テキスト上付き文字下付き文字

<BLOCKQUOTE>〜</BLOCKQUOTE> 引用 H2/N2/e2
説明
<BLOCKQUOTE>〜<BLOCKQUOTE>に囲まれたテキストを引用文として両側にすきまをあけて表示します。

使用例
今から引用を開始します。
<BLOCKQUOTE>
ここが引用文です。
引用文は前後左右に適度な空白があきます。
</BLOCKQUOTE>
引用が終わりました。
これ(↑)を表示するとこう(↓)なります。
今から引用を開始します。
ここが引用文です。 引用文は前後左右に適度な空白があきます。
引用が終わりました。

<PRE>〜</PRE> べたテキスト H2/N2/e2
説明
通常のHTMLではスペースや改行が無視(いずれも、ひとつのスペースに置き換えられる)されますが、<PRE>〜</PRE>の間ではスペースや改行がそのまま表示されます。

属性
WIDTH=n H2。 横幅の最大値を WIDTH=100 や WIDTH="100%" のように指定しますが、IEやNNではサポートされていません。
WRAP N4。ウィンドウの右端でテキストを自動改行します。

使用例
<PRE>あいうえお
  かきくけこ
    さしすせそ
</PRE>
これ(↑)を表示するとこう(↓)なります。
あいうえお
  かきくけこ
    さしすせそ

補足
<PRE>で囲まれた範囲は等幅フォントになるのですが、全角文字と半角文字の比が2:1でないことが多いために、日本語のテキストは微妙にずれてしまいます。 全角スペース文字などを駆使して、全角文字数をあわせることがポイントです。

IE2.0やIE3.0では、<PRE>で囲まれたテキストが妙に小さく(<SMALL><TT>で囲んだ程度に)表示されてしまいます。 また、IE2.0やIE3.0では<PRE>直後の改行が有効になるので、最初の1行は<PRE>と同じ行に記述した方が見栄えがよいようです。

また、<PRE>を用いた文章は改行位置を固定してしまうことになり、横方向に狭いブラウザで見ると1行毎に左右スクロールをさせなければ読めない文章になってしまいますことに注意してください。

いずれにしても、<PRE>を使用した場合は、他のブラウザでどのように見えるのか、確認することを強くお勧めします。


<XMP>〜</XMP> べたテキスト H2/N2/e2
説明
<PRE>と同様に文書をべたテキストとしてそのまま表示します。 < や > までもそのまま表示してくれるので大変便利なのですが、HTML3.2では「使用しないように」と明記され、HTML4.0では削除されてしまいました。

<LISTING>〜</LISTING> べたテキスト H2/N2/e2
説明
<PRE>と同様に文書をべたテキストとしてそのまま表示します。 <XMP>と表示されるフォントが多少異なります。 IE2.0ではタグもそのまま表示されていましたが、NNやIE4.0ではタグとして解釈されるようになりました。 <XMP>と同様、HTML3.2では「使用しないように」と明記され、HTML4.0では削除されました。

<PLAINTEXT>〜<PLAINTEXT> べたテキスト H2/N2/e2
説明
<BODY>タグの代わりに用いて、記述された文章をすべて、べたテキストとしてそのまま表示します。 IE2.0では、<PLAINTEXT>〜</PLAINTEXT>の間をべたテキストで表示しますが、IE3.0以降や、NNでは、<PLAINTEXT>以降ファイルの終わりまでをすべてべたテキストと判断するようです。 <XMP>と同様、HTML3.2では「使用しないように」と明記され、HTML4.0では削除されました。

Copyright(C) とほほ ( http://www2e.biglobe.ne.jp/~s-hasei/ )