Paragraph and Line Breaks Tag

段落と改行

段落 タグ

HTML文書はワープロとは異なり、TeXやSGML等と同じように段落や改行の印が明示的に必要となります。文書の段落分けを行うには、タグを用います。このタグは終了タグを省略できます。段落の最後にタグを付ければ、段落分けされます。開始タグと終了タグで囲んだ段落は、その段落テキストの位置(右寄せ、左寄せ、センタリング)が指定可能です。

<TITLE>シンプルなHTML書類の例</TITLE>
<H1>これはレベル1の見出しです</H1>

HTMLの世界にようこそ。これは1番目の段落です。<P>

そしてこれは2番目の段落です。<P>

HTML文書では、改行は明示的に示さなければならないので、次のような文書を書いても前の例と全く同じように表示されます。前の文書例は編集する際に見やすくしているだけでしかありません。

<TITLE>シンプルなHTML書類の例</TITLE><H1>これは
レベル1の見出しです</H1>HTMLの世界にようこそ。これは1番目の段落
です。<P>そしてこれは2番目の段落です。<P>

なお、タグは重ねて記述しても、ふつう 1回分の効果しか表れません。改行を重ねて行う場合は、 (改行)タグが用いられます。重ねて記述した場合の効果を、代表的なWWWブラウザで評価すると以下の違いがあります。(サンプル)

各ブラウザによる<P>タグの重ね書き効果の違い
タグ	Mosaic	Netscape	Arena
<P>	なし	なし	あり
<BR>	あり	あり	あり

Mosaic や Netscape のように を重ねても効果のないブラウザでも整形タグ <PRE>を使用すると改行の重複効果が現れます。 (が、ただの改行でも同様の効果があります。)
<HR>
<PRE>





</PRE>
<HR>

Netscape では タグで ALIGN属性を使用することによって、左寄せ (LEFT もしくは指定しない)、中央寄せ (CENTER)、右寄せ (RIGHT)が指定できます。一部のブラウザでは、均等処理 (justify)が可能なものもあります。

<P ALIGN=left>左寄せの段落</P>
<P ALIGN=center>中央寄せの段落</P>
<P ALIGN=right>右寄せの段落</P>

左寄せの段落

中央寄せの段落

右寄せの段落

将来は、行末揃え(JUSTIFY)が指定可能となりかも知れません。

中央寄せ: <CENTER>～</CENTER>

<CENTER>～</CENTER>は、テキストを中央寄せする場合に指定します。<CENTER>タグは前後の文書を改行するだけですが、タグは空行を挿入します。 <CENTER>がと同じ効果を得るには、<CENTER>前後に(段落)タグを置いて下さい。

Microsoft Internet Explorerの <CENTER>とは同一効果です。

<CENTER>
～Text～
</CENTER><P>

<P ALIGN=CENTER>
～Text～
</P>

この段落は左寄せです。この段落は左寄せです。この段落は左寄せです。

この段落は中央寄せです。この段落は左寄せです。この段落は左寄せです。この段落は左寄せです。

この段落は左寄せです。この段落は左寄せです。この段落は左寄せです。

この段落は中央寄せです。

この段落は左寄せです。この段落は左寄せです。この段落は左寄せです。

改行

HTML文書は改行を明示的に指定しなければなりません。HTML文書で明示的に改行するには   タグを用います。 タグはワンサイドタグで開始タグや終了タグはありません。改行は行間に余分なスペースを入れずに強制的に改行を行います。次のように郵便アドレスが整形されます(の場合、空行が入ります)。この  タグは書いた回数だけ改行されます。

Foo Corporation<BR><BR>
1-1-1 Honya, Honya-shi,<BR>
Tokyo 111  JAPAN<BR>

Foo Corporation

1-1-1 Honya, Honya-shi,
Tokyo 111 JAPAN

通常改行を挿入するだけですが、Netscapeの タグでは、前にフローティングイメージ (floating image)がある場合、その後の文書でテキストの回り込みによるマージンをクリアするためにCLEAR属性を用います。 CLEAR属性には左(left)、右(right)、両方(both)を指定できます。

<IMG SRC="URL" ALIGN=left> テキスト ...

<!-- フローティングイメージの位置と同じ方向をクリアします -->
<BR CLEAR=left>

テキスト

この文書は右図を回り込む形で表示されます。フローティングイメージの設定です。図とテキストには、HSPACEやVSPACEを用いて間隔をあけた方が見やすくなります。

タグを使用すると、回り込みは解除されます。

～

タグはNO BReakの略で、開始タグと終了タグがあり、囲まれたテキストは改行されません。そして、NOBR で指定されたテキストの中で改行したい場合、 タグ、 タグやタグを指定します。


Text within a NOBR can not be broken and ends up on a very very very loooooooooooooooooooooong line.

 
Text within a NOBR can not be broken and ends up
on a very very very loooooooooooooooooooooong line.


Text within a NOBR can not be broken and ends up on a very very very loooooooooooooooooooooong line.


Text within a NOBR can not be broken and ends up

on a very very very loooooooooooooooooooooong line.

タグは、ちょうどよい場所(例えば、ハイフネーション) で単語で改行するようにを挟み込みます。

○○○-○○○-○○○

何もしない: this-is-a-long-string-with-lots-of-hyphens-in-it.
を挟み込んだ場合: this-is-a-long-string-with-lots-of-hyphens-in-it.

<DIV>、タグ

DIVタグはHTML 3.0 のタグで、ALIGNで指定した位置に段落を整列させます。また、<DIV>、タグ両方とも右(right)、左(left)、中央寄せ(center)が可能となりました。

<DIV ALIGN="left">
Left justify text by putting it<br>
within the <tt>DIV</tt> tags.
</DIV>

<DIV ALIGN="center">
Center some text by putting it<br>
within the <tt>DIV</tt> tags.
</DIV>

<DIV ALIGN="right">
Right justify text by putting it<br>
within the <tt>DIV</tt> tags.
</DIV>

Left justify text by putting it
within the DIV tags.

Center some text by putting it
within the DIV tags.

Right justify text by putting it
within the DIV tags.

<P ALIGN="left">
Left justify text by putting it<br>
within the <tt>DIV</tt> tags.
</P>

<P ALIGN="center">
Center some text by putting it<br>
within the <tt>DIV</tt> tags.
</P>

<P ALIGN="right">
Right justify text by putting it<br>
within the <tt>DIV</tt> tags.
</P>

Left justify text by putting it
within the DIV tags.

Center some text by putting it
within the DIV tags.

Right justify text by putting it
within the DIV tags.

[Up] [Next] [Previous]

段落と改行

段落 <P>タグ

<P ALIGN=left|center|right|justify>

中央寄せ: <CENTER>～</CENTER>

改行 <BR>

<BR [CLEAR=left|right|both]>

<NOBR>～</NOBR>

<WBR>

<DIV>、<P>タグ