TOP ＞　Back ＞ Place ＞ Next

文章には、段落要素

段落要素<P>とコンテナ<DIV>

見出しを定義する要素があるから、「<P>要素も文章（本文）を定義する要素」というわけではありません。HTMLにはとくに文章（本文）自体を指定する要素は存在しません。
しかし、コンテナ化する要素は存在します。

「<P>」とは、段落（１行空行）を定義する要素で、見出しなどではない普通の文章（テキスト）をHTMLで記述するときには、「読みやすいように、常にP要素として扱って、1段落ごとに分けて扱おう」と言うことになります。

段落のタグです。

◆　文章の頭に、段落の<P>タグ

<P>要素を使うときは、ほかのHTMLのタグと同様、<P>文章</P>というように、ひと段落ごとの文章を開始タグと終了タグで囲むのが基本ですが、<P>要素は特別に「終了タグが省略可能である」とされています。つまり、実質的には段落の頭に「<P>」を記述するだけでいいわけですが、終了タグは今後XHTMLに移行をお考えであれば省略はしないようにしましょう。

紹介したタグ、<H>要素と今回の<P>要素をサンプル（ソース）にしてみましょう。以下のようになっています。

タグが、<H1><H2>要素の見出しが２か所、<P>要素によって段落にしたところが９か所、</〜> それぞれあることに注目してください。
上記ソース見本のサンプルを用意しました。

<H>は、見出し。<P>は、段落。ということになり、</P>の終了タグで一つの文章が完結します。<P>段落要素は一行スペースを空ける性質があるので、閲覧者には文章の区切りがハッキリわかるようになります。

▲up

◆　細かい段落で読みやすい文章を

HTMLの本文は、1段落あたり　250字程度が見易さの目安になります。一般的なWebブラウザでは、段落ごとに空行をとり、読みやすく表示してくれます。（ちなみに、下の「段落」が２００字です。）
人のことは言えないですが、段落分けを行い冗長な文章を避けるためにも、細かい段落分けは有効手段です。

ABCDEFGHIJKLMNOPQRSTYVWXYZ0１２３４５６７８９０あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやヰゆゑよらりるれろわゐヱをん、ABCDEFGHIJKL！ココが１００字あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやヰゆゑよらりるれろわゐヱをん。ABCDEFGHIJKLMNOPQRSTYVWXYZあいうえおかきくけこさしすせそた2００字

▲up

◆　<P>タグで、行揃えを指定

「Ｐ」タグに、ALIGN属性を使って右・中央・左に行を揃えます。確かに、中央揃えは<CENTER>（非推奨）で囲んでも出来ますが、段落ごとに指定することで整ったページになります。
例：<p align="left">文字列</p>
しかし、<P>要素のalign 属性は、非推奨ですので、スタイルシートにしています。

←スタイルシートを推奨します。

左揃え（初期値）「あいうえお」

中央揃え「あいうえお」

右揃え「あいうえお」

均等割、「あいうえお」「ABCDE」「abcde」

▲up

◆　DIVで「H＝見出し」と「P＝段落」その他の要素をまとめる。

▼　便利な<DIV>要素でグループ化

<DIV>要素は、その内容を一つのブロックとして扱うのです。
<DIV>で複数のインライン要素とブロックレベルを合わせると、一般的に４６種類の要素を指定することが可能です。つまり<BODY>要素の後にタグや文字を書く前に<DIV>を記述すれば、文書の構造上問題なく要素や文字が書けます。

　　　

見出しと複数の段落や他の要素を、<DIV>〜〜〜</DIV>で囲むことでページ内の分割部分（Division）の始まりと終わりと言う表現が示せます。また、スタイルシートと組み合わせることで有効な使い道ができます。
例：<DIV style="text-align：行揃えの値">〜〜〜</DIV>
つまり<DIV>〜〜〜</DIV>は、その内容（テーマ）を一つのブロックとし、行揃えや色と文字サイズその他が<DIV>〜〜〜</DIV>で囲まれたブロック範囲で変更指定します。

行揃えに使う値は、<P>タグと変りありません、ただ<DIV style="text-align：行揃えの値">〜〜〜</DIV>で囲んだ部分は、全て同じ行揃えになりますし、P要素の中ではインライン要素しか使えませんが、DIV要素内はブロック要素も使えます。一つのページ内で属性にTITLE="テーマのコメント文"を書いておけば、文章の区切りになり訂正や更新がラクになります。

また、CENTER要素は廃止予定に含まれ、ALIGN属性は非推奨になっていますので、DIV要素でスタイルシート指定を推奨します。下のソースはスタイルシートになっています。行揃え値のところに、LEFT｜CENTER｜RIGHT のいずれか（左・中・右）を記述すれば、<DIV>〜〜〜</DIV>の範囲（一ブロック）全て行揃えします。

中央揃えの食えない事情
<CENTER>要素の変わりに<DIV style="text-align：center>に変えてもテーブル（表）のようなブロックレベル要素までは中央に揃えることは出来ません。
左右揃えの場合ブロックレベル要素では、
<要素名 style="float：leftやright">を指定しますが、中央にする値がありません、その場合に指定する代替スタイルシートが下記のように記述します。

<HEAD>
<style type="text/css"><!--
div.T-naka{text-align:center;}　
table.B-naka{margin-left:auto;margin-right:auto;}/*表の中央揃え*/
--></style>
</HEAD>

ブロックレベルを中央揃えにするには、
DIV{text-align:center;}でDIV要素内を中央に指定し、それから中央揃えしたい要素の指定を
要素名{margin-left:auto;margin-right:auto;}を使い両側のマージンをautoにします。
そして、次のソースのようにすると中央揃えになります。

<div class="T-naka">
<table class="B-naka"><tr><td>テキスト</td></tr></table>
</div>

▲up

◆　親要素と子要素（予習）

タグの要素には、ルールがあり正しい入れ子状態になっていなければ、いけません。
下の二つの例を見てください。

よい例 <DIV><H1>見出し<H1>
<P><STRONG>よい例</STRONG>の入れ子で<BIG>ブラウザ認知が確実</BIG>に、行われます。</P>
<P><TT><SMALL>よい例の入れ子状態でブラウザの認知が確実です。</SMALL></TT></P>
</DIV>
悪い例 <DIV><H1>見出し<H1>
<P><STRONG>悪い例の入れ子で<BIG>ブラウザ認知</STRONG>が不確実</BIG>に、なります。</P>
<P><SMALL><TT>悪い例の入れ子状態で、ブラウザの認知が不確実です。</P></SMALL></TT>
</DIV>

よい例のようにルールに沿って入れ子するとブラウザの認知が確実に行われます。
要素同士を前後に混ぜたり、先行タグ（親要素）が内側のタグ（子要素）より先に終わらせることは出来ません。
要素の中では、どんな要素も自由に入れ子できる訳ではありません、厳密に決められています。
（後ほど、要素の扱い方で詳しく解説します。）

▲up

タグ解説

P

段落：
属性で、文字や背景に指定が出来ます。

<P>〜</P>で囲んだ範囲の内容を、ひとつの段落と定義します。
終了タグの記述は省略することができますが、お勧めは出来ませんので文章内容の最後には、閉じタグ</P>を使用しましょう。

DIV

複数の要素をグループ化：

属性で、文字や背景に指定が出来ます。
<DIV>要素内でブロックレベルやインラインの要素をほとんど使用できます。

<DIV>〜</DIV>囲んだ範囲の内容を、複数の要素をグループ化を定義します。たとえば、見出しに続く一連の段落をひとまとまりとして表現することができるようになります。

DIV要素自体は、文書中で何の構造も定義するものではありませんが、特定の領域をDIV要素で囲ってスタイルシートなどを利用することで、効率のよいレイアウトが可能になり、グループ化するのがDIV要素です。

▲up

　【←BACK ┃NEXT→】
Copyright (c) Producer by System KS. 2001 All rights reserved.