行と段落

このセクションでは、行と段落に関連付けられたHTMLについて説明します。基本的なおよび<P>タグ。

< DIV >要素

<DIV>、ブロックレベルの要素。ページ内のコンテンツのブロックを定義するだけです。ブロックを定義する以外に、<DIV>自体は何もしません。たとえば、次のコードは、2つの段落を含む<DIV>要素を作成します。 <P>要素を<DIV>内に配置できることに注意してください。

これにより、次のことが可能になります。

ALIGN属性

ALIGNは、<DIV>要素のコンテンツの配置を設定します。 4つの値すべて、LEFT、CENTER、RIGHT、およびJUSTIFYは、すべて十分にサポートされています。 LEFTがデフォルト値です。
このコードはデフォルトを示しています：

次のようになります：

段落要素

<P>は新しい段落の始まりを示します。これは通常、2つのキャリッジリターンでレンダリングされ、2つの段落の間に1つの空白行が生成されます。

これは次のように生成されます：

ALIGN属性

ALIGNは段落の配置を示します。

これを生成するもの：

CLEAR属性

CLEARは一部のブラウザで認識され、<BR>と非常によく似ています。ただし、これは標準のHTMLではなく、まだ広くサポートされていないため、代わりに<BR>を使用してください。

Pエンドタグは必要ですか？

W3Cは、</P>について次のように述べています。「終了タグは、パーサーによって常に推測できるため、オプションです。」これは、新しい<P>が、前の<P>（および前の）。

<HR>や<BLOCKQUOTE>などの他のブロックレベルの要素も終了する必要があります段落。ただし、常にそのように機能するとは限りません。たとえば、一部のブラウザでは、テーブルの後でもテキストが右揃えになります。次の例では、MSIEは「テーブルの後」の部分を右揃えでレンダリングします。 Netscapeは左揃えでレンダリングします：

MSIEのレンダリング	Netscapeのレンダリング

段落要素に配置またはその他のスタイルプロパティを設定する場合は、使用するのが最適です。 </P>。 set any stylesを使用したことがない場合は、通常、</P>を無視できます。

このトピックの詳細については、W3Cの段落の仕様を参照してください。

テキストの配置

text-alignスタイルルールを使用して、任意のHTML要素の配置を設定できます。 text-alignを使用して、段落、ドキュメントのセクション、またはドキュメント全体の配置を設定できます。 text-alignを使用して、配置を左、右、中央、または両端揃えに設定できます。

たとえば、段落を中央に配置するとします。まず、ドキュメントの「セクション」に次のコードを挿入して、centeralignというスタイルクラスを作成します。

これで、次のように任意の段落をcenteralignクラスに設定できます：

これにより、次のようになります：

同じクラスを<DIV>要素に適用して、ページ：

これにより、次のようになります。

正当化

デフォルトでは、ほとんどのブラウザは右端がギザギザのテキストをレンダリングします。

右端が均等な本のようにすべてのテキストをレンダリングする場合は、単一のスタイルルールを使用できます。すべてのテキストを両端揃えに設定するには、以下をコピーします。コードiドキュメントの「セクション」に移動します。

正当化の問題は、多くのブラウザがテキストの最後の行がどこにあるかについて混乱することです（そうすべきではありません）。正当化される）。たとえば、MSIE 4.xは、テキストのブロックの直後にテーブルが続く場合に混乱します。この画像では、テキストの最後の行が「エージェントの1人」という単語を1行に広げていることに注意してください。

この状況を改善するには、テキストのすべてのブロックを<P>と</P>で囲みます。

これで、誤ったMSIEがより多くのものをレンダリングします。正気です：

インデント

Webページの段落とセクション全体をインデントする方法はいくつかあります。 。次のいくつかのセクションでは、インデントの4つの主要な手法について説明します。

• 段落のインデント
• ページのセクションのインデント
• ページ全体のインデント
• 各段落の最初の行をインデントする

ただし、始める前に、<BLOCKQUOTE>について少しお話しする価値があります。 。<BLOCKQUOTE>を使用してページのセクションをインデントする必要があるという一般的な誤解があります。この信念は、ほとんどのビジュアルWebブラウザが引用テキストをレンダリングするという事実に基づいています。インデントされたように。ただし、HTMLはフォーマット言語ではなく、HTMLとして使用しようとすると、予測できない結果が生じることに注意してください。引用されたテキストブロックがある場合は<BLOCKQUOTE>を使用し、そうでない場合は次の数段落で説明する手法を使用します。

段落のインデント

スタイルを使用して1つの段落をインデントできます。たとえば、段落を50ポイントインデントしたいとします。まず、次のスタイルルールでインデントされたというクラスを作成します。このコードをドキュメントの「セクション」に配置します。

次に、

タグ：

このインデントされた段落を提供します：

ページのセクションをインデントする

複数のパーをインデントするagraphは、前の例で設定したものと同じスタイルを使用します。このコードをページの「セクション」に配置します。

次に、<DIV>要素：

次のようなインデントされたセクションが表示されます：

ページ全体をインデントする

ページ全体をインデントする場合は、「」要素の左右のパディングを設定するスタイルルールを設定します。たとえば、このスタイルでは、左右のパディングが100ピクセルに設定されます。

この手法は、背景画像と組み合わせて使用すると人気があります。たとえば、この画像をページの左側に表示するとします。

この画像の幅は56ピクセルなので、パディングを60に設定しましょう。次のスタイルは、背景画像を設定し、繰り返しをrepeat-yに設定し（ページの左側を垂直方向に繰り返すだけ）、左側のパディングを60に設定します（右側のパディングは設定しません）。

その外観は次のとおりです。

各段落の最初の行をインデントする

各段落セットの最初の行をインデントするtext-indentを使用したスタイルルール。たとえば、次のコードは、各段落の最初の行を30ポイントインデントします。このコードをページの「セクション」にコピーします。

このコードは、各<P>の最初の行をインデントします。要素ですが、おそらく厄介な問題に遭遇するでしょう。ほとんどのデザイナーのように、最初の段落の前や<H1>のようなヘッダーとの間にPを入れないでください。残念ながら、段落をインデントしたい場合は、まさにそれを行う必要があります。このような状況でのテキストは、「匿名ブロック」と呼ばれるものの一部であり、直接参照することはできません。インデントするには、テキストを<P>要素に配置する必要があります。

したがって、たとえば、次のコードにはヘッダーとテキストの間にあるため、テキストはインデントされません：

これにより、次のようになります：

このコードでは、ヘッダーとテキストの間に<P>があるため、テキストはインデントされています：

< BR >要素

<BR>は単一のキャリッジリターンを挿入します。 <P>は新しい段落の開始を示しますが、<BR>は同じ段落内のキャリッジリターンのみを意味します。 <BR>は通常、単一のキャリッジリターンでレンダリングされます。

たとえば、次のコードは次のとおりです。

これを生み出すもの：

<BR>は新しい段落を開始しないため、現在のすべての段落属性は同じままです。

これを生み出すもの：

CLEAR属性

CLEARは、改行を挿入することに加えて、画像またはその他のオブジェクトが右または左にある場合は、それも通過することを示しています。たとえば、このコードは、画像をページの左側に配置する必要があることを示しています。次に、テキストがあり、次にLEFTがあります。次のテキストは画像を過ぎています：

これを生成するもの：

BOTHはALLと同じですが、そうではありません多くのブラウザでサポートされているため、代わりにALLを使用してください。

CENTER要素

使用上の推奨事項：代わりに。

これにより、次のことが可能になります。

これは次と同じです：

次のようになります：

< HR >要素

<HR>は、ページ全体に水平線（「水平ルール」）を描画します。それだけです。このような単純な概念では、水平ルールが驚くほど人気があります。基本から始めましょう。<HR>には終了タグがなく、属性も必要ありません：

このルールを作成するもの：

<HR>は通常、ページの分割を示します。ルールの前のものは、後のものとは異なる「セクション」にあります。そのため、多くの設計者は<HR>をレイアウトタグではなく論理タグと見なしています。

NOSHADE属性

NOSHADEは、ルールを3次元ではなくフラットとして表示する必要があることを示します。この通常の水平ルールを比較してください：

NOSHADEルールと：

これにより：

NOSHADEはSIZE：

このルールを生成します：

NOSHADEは、ブラウザが通常3次元ルールをうまくレンダリングしないため、人気があります。実際、多くの場合、ルールは背景と同じ色で表示され、ほとんど見えなくなります。

SIZE属性

SIZEはルールの高さを示します。 （「HEIGHT」と呼ぶのは簡単すぎたと思います。）水平方向の幅については、WIDTHを参照してください。これらのサイズのいくつかを比較してください：

次のルールがあります：

通常、ブラウザは<HR>を100より大きくレンダリングしません。 。

WIDTH属性

WIDTHは、ルールの水平方向の幅を設定します。サイズはピクセル単位またはパーセンテージで表すことができます。

これらの<HR>はピクセル幅で設定されます：

これによりこれらのルール：

WIDTHは通常、パーセンテージで表されます。パーセンテージ幅を使用する場合は、必ず値をで囲んでください。引用符。

次のルールを生成します：

デフォルトは100％です。デフォルトではルールは中央揃え。別の配置を設定するには、ALIGNを使用します。

パーセンテージ幅は、パーセンテージoを使用します。 fページの全幅ではなく、使用可能な幅。たとえば、ルールがテーブル内にある場合、幅はテーブルセルの幅のパーセンテージです。

このテーブルを生成するもの：

ALIGN属性

ALIGNは、ルール。 ALIGNは、WIDTHも使用している場合にのみ役立ちます。

これをお知らせください：

< PRE >要素

<PRE>は、HTMLツールボックスで最も便利なタグの1つです。 <PRE>は、テキストを「フォーマット済み」としてマークします。すべてのスペースとキャリッジリターンは、入力したとおりにレンダリングされます。

これを生成するもの：

<PRE>テキストは固定幅フォントでレンダリングされます。つまり、すべての文字とスペースは同じ幅。固定幅を使用すると、テキストを好きなように簡単にレイアウトできるため、<PRE>は、上記のような「すばやく汚れた」テーブルを作成するのに最適です。

<PRE>は、ブラウザにタグを無視させません。リンクやその他の特典は引き続き作成できます：

これを生成します：

マークアップの追加を開始するとき、テキストがどのように表示されるかを確認するのが難しくなります（上の表のようにタグの間隔を均等にする）。 <PRE>は、「HTML化」したくないテキストの大きなブロックを引用するためによく使用されますが、「」はテキストを台無しにする可能性があります。数行を超えるテーブルの場合、通常、長期的にはテーブルコードを使用する方が簡単です。

「要素

」は、キャリッジリターンの発生を防ぎます。たとえば、次のコードは1つの長い行の意味のない詩を生成します。

これを生成します：

is most useful for making the page layout more attractive by disallowing breaks inside logical groups of symbols and words. The poem quoted above breaks in appropriate places if each phrase is surrounded by：

これを生成するもの：

セクションの改行を防ぐための「要素

is for the situation where you have usedテキストの、そしてあなたは「しかしあなたが望むならここで壊すことができる」と言いたいです。「改行を強制するのではなく、1つだけ許可します：

生成：

次のように, Netscape now seems to have abandoned it. It"s better to stick to grouping non-breakable sets of words withinを発明しました：

この段落を示します：