見出し HTMLのベーシック目次 スペース

段落と改行 <p>,<br>

段落 <p>

HTML文書はワープロと異なり、TeXやSGML等と同じく段落や改行の印が明示的に必要です。まず、文書の段落分けを行うには<p>タグを用いますが、この<p>タグの場合、これまでのタグのような開始タグと終了タグはありません。段落の最後に<p>タグを付ければ、そこで段落分けされます。ただし、HTMLレベル3では開始タグと終了タグがあり、その段落テキストの位置(右寄せ、左寄せ、中央寄せ)を指定できるようになりました。
	
	
	<title>シンプルなHTML文書の例</title>
	<h1>これはレベル1の見出しです</h1>
	
	HTMLの世界へようこそ。これは1番目の段落です。<p>
	
	そして、これは2番目の段落です。<p>
	
	
HTML文書では改行を明示的に示さなければならないので、次のような文書を書いても上記の例とまったく同じように表示されます。例で文章の区切りが改行されているのは、ただ編集する際に見やすくするためです。
	
	
	<title>シンプルなHTML文書の例</title><h1>これはレベル1
	の見出しです</h1>HTMLの世界へようこそ。これは1番目の段落
	です。<p>そして、これは2番目の段落です。<p>
	
	
なお、<p>タグは重ねて記述しても、ふつう1回分の効果しか表われません。改行を重ねて行う場合は、ふつう<br>(改行)タグが用いられ、それらを重ねて記述した場合の効果は使用するブラウザ(閲覧ソフト)によって異なります。

モザイクやネットスケープのような<p>を重ねても効果のないブラウザ(閲覧ソフト)でも、<pre>(整形)タグを使用すると<br>同様、改行の重複効果が現われます。


<hr>
<pre>
<p>
<p>
<p>
<p>
<p>
</pre>
<hr>




段落の実例です。

段落の実例

段落と見出しの左、中央、右寄せ <p align=left | center | right | justify>

<p>タグでalign属性を使用することによって、左寄せ(leftもしくは使用しない)、中央寄せ(center)、右寄せ(right)が指定できます。
	
	
	<p align=left>左寄せの段落<p>
	<p align=center>中央寄せの段落<p>
	<p align=right>右寄せの段落<p>
	
	

左寄せの段落

中央寄せの段落

右寄せの段落

HTML3.0以降では「均等並び(justify)」が付加されました。

中央寄せ <center>〜</center>

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

インターネット・エクスプローラ(Microsoft社)では<center><p align=center>が同一効果となります。
	
	
	<center>
	テキスト
	</center><p>
	
	<p align=center>
	テキスト
	</p>
	
	
この段落は左寄せです。この段落は左寄せです。この段落は左寄せです。
この段落は中央寄せです。
この段落は左寄せです。この段落は左寄せです。この段落は左寄せです。


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

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

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

改行 <br>

HTML文書では改行を明示的に指定しなければなりません。明示的に改行するには<br>タグを用います。この<br><p>と同じくワンサイドタグなので、開始タグや終了タグがありません。改行タグは、空行が入る<p>タグと違って、行間へ余分なスペースを入れず強制的に改行し、<br>タグを書いた回数だけ改行されます。たとえば、郵便アドレスなら次のように整形されます。
	
	
	Yasukazu Yokoi<br><br>
	806 2/5 N. Poinsettia Pl.<br>
	Hollywood, CA 90046 U.S.A.<br>
	
	
Yasukazu Yokoi

806 2/5 N. Poinsettia Pl.
Hollywood, CA 90046 U.S.A.

テキストの回り込みの解除 <br clear=left | right | both | all>

通常改行を挿入するだけですが、ネットスケープなどの<br>タグでは前にフローティング・イメージ(floating image)がある場合、その後の文書でテキストの回り込みによるマージンをクリアするためclear属性を用います。clear属性には左(left)、右(right)、両方(both)が指定でき、どれを選択するかは画像の位置、つまりフローティング・イメージが指定しているのと同じ方向をクリアすればいいわけです。あるいは、画像の位置がどうあれ、まとめてallを指定することもでき、実質的な機能はbothと変わりません。
	
	
	回り込ませたいテキスト@
	<img src="../images/redchile.gif" hspace=50 vspace=10 align=right>
	回り込ませたいテキストA
	<br clear=left>
	回り込ませたくないテキストB
	
	
@この文書はテキストが右の画像を回り込む形で表示されるよう、Aフローティング・イメージを設定してあります。画像とテキストにはhspaceやvspaceを用いて間隔をあけたほうが見やすくなります。


Bここからは<br clear>タグを使用して回り込みを解除してあります。

改行なし <nobr>〜</nobr>

<nobr>タグはNo Breakの略で、開始タグと終了タグがあります。囲まれたテキストは改行されません。そして、nobrで指定したテキストの中を改行する場合、<br>タグや<wbr>タグ、あるいは<p>タグを使います。

<nobr>
Text within a nobr can not be broken and ends up on a very very very loooooooooooooooooooooong line.

<br>
Text within a nobr can not be broken and ends up
on a very very very loooooooooooooooooooooong line.

<wbr>
Text within a nobr can not be broken and ends up on a very very very loooooooooooooooooooooong line.

<p>
Text within a nobr can not be broken and ends up

on a very very very loooooooooooooooooooooong line.

単語で改行 <wbr>

<wbr>タグはハイフンなど区切れがいい場所で、単語で改行するように<wbr>を挟み込みます。ただ、<wbr>タグが使えるブラウザは限られており、以下の例で違いがなければ、この機能を備えていないということです。

○○○-<wbr>○○○-<wbr>○○○
何もしない場合
this-is-a-long-string-with-lots-of-hyphens-in-it.


<wbr>を挟み込んだ場合
this-is-a-long-string-with-lots-of-hyphens-in-it.




Copyright (C) 1996-2003 by Yasukazu Yokoi. All Rights Reserved.