<DIV>タグと<P>タグ

2つの段落

HTMLを覚えていくと、まず<P>タグというものを覚えることになります。
この<P>タグの機能はというと、同タグで囲まれた範囲に
『段落を作成』
することです。
ソースで例を挙げると

(記述例)

<p>
この間が<br />
段落となります
</p>

ところで、HTMLの勉強だけではあまり使われないタグに<DIV>タグというのがあります。
別にHTMLで使わないわけではないのですが、HTML上での機能としては、
『本文の段落と分割して行揃えを行う』
というものです。
意味を見ただけではいったいなんのこっちゃい?と思われますけど、基本的にalign属性といっしょに使われ、囲まれた部分の行揃えを行うというものです。
が、この使い方はHTML4.01(つまり、HTMLのルールブックのことですね)では非推奨(そのうちなくなっちゃうかも〜)となっており、あまりお勧めできたもんじゃありません
つまり、HTMLだけを考えた場合、<DIV>タグというのは使い道ないんですね。
いや、少なくとも表示方法(デザイン)にタグを使用するという場合においては。
もう一度このタグの機能を見てみると、『本文の段落と分割して……』と書かれています。
段落を作成するのが<P>タグで、じっさい<DIV>タグの方は使い道がないということになると、<DIV>タグのほうが<P>タグより下の位置付けをされそうな気もしますが、真相はそうじゃなかったりします。

スタイルシートとDIVタグ

上で、デザインにタグを使用するという場合においては<DIV>タグには使い道がないと書きました。
しかしスタイルシートでデザインをやったことがある方ならご存じの通りHTMLというものは本来文章を構造的に表現するためのプログラム言語であって、画面のレイアウトの要素まで担うものではないのです。
そういうわけで、その足りない部分を補うためスタイルシートというものが現れるのですけど、このスタイルシートにおいて、<DIV>タグは大きな意味を持ってきます。
それでは<DIV>とスタイルシートを使った例を見てみましょう。

(記述例)

<div style="text-align:right;">
こうやって、DIVタグで囲んでやると、<br />
その部分をまとめて位置の指定をすることができます。<br />
<br />
※この例では、わかりやすくするために、スタイルシートをインラインで埋め込んでいます。<br />
</div>
(表示結果)

こうやって、DIVタグで囲んでやると、
その部分をまとめて位置の指定をすることができます。

※この例では、わかりやすくするために、スタイルシートをインラインで埋め込んでいます。

というふうに、<DIV>タグで囲まれた範囲をひとまとめにして文字の水平位置を指定することができました。この選択範囲をボックス(領域)と言い、<DIV>タグはボックスを作り出す働きがあることがわかります。
ところが、ボックス領域を作成するタグは<DIV>タグだけではありません。上のソースを<DIV>タグと<P>タグを入れ替えて表示してみましょう。

(記述例)

<p style="text-align:right;">
こうやって、Pタグで囲んでやると、<br />
その部分をまとめて位置の指定をすることができます。<br />
<br />
※この例では、わかりやすくするために、スタイルシートをインラインで埋め込んでいます。<br />
</p>
(表示結果)

こうやって、Pタグで囲んでやると、
その部分をまとめて位置の指定をすることができます。

※この例では、わかりやすくするために、スタイルシートをインラインで埋め込んでいます。

はい、まったく一緒の表示結果を得られる事ができましたね(笑)。
じゃぁ、<DIV>タグ使う必要なんてないじゃん。ということになりませんか?なりますよねぇ。というか、<DIV>タグと<P>タグの違いって何?

一緒に使ってみよう

ここで格好よく、<DVI>タグと<P>タグの違いはこれだ!と書けたらいいんですけど……
いや、結果から言えば<DIV>タグは
『コンテンツの一部をブロックとして定義する』
ものであり、<P>タグは、
『段落を定義する』
ということになります。
じゃぁ、段落とブロックの違いって何?と聞かれてもきっちり答えるほど頭よくないので、実際に一緒に使ってみて、その結果を見てみましょう。

ではまず、<P>タグと<DIV>タグを並べて使ってみます。

(記述例)

<div style="border:thin solid #000000;">
DIVタグを使って、<br />
ボックス(領域)の周囲に枠線を表示させてみます。<br />
</div>
<p style="boder:border:thin solid #000000;">
次にPタグを使って、<br />
ボックス(領域)の周囲に枠線を表示させてみます。<br />
</p>
(表示結果)

DIVタグを使って、
ボックス(領域)の周囲に枠線を表示させてみます。

次にPタグを使って、
ボックス(領域)の周囲に枠線を表示させてみます。

それでは次に、上と下(<DIV>と<P>)を入れ替えてみます。

(記述例)

<p style="boder:border:thin solid #000000;">
Pタグを使って、<br />
ボックス(領域)の周囲に枠線を表示させてみます。<br />
</p>
<div style="border:thin solid #000000;">
次にDIVタグを使って、<br />
ボックス(領域)の周囲に枠線を表示させてみます。<br />
</div>
(表示結果)

Pタグを使って、
ボックス(領域)の周囲に枠線を表示させてみます。

次にDIVタグを使って、
ボックス(領域)の周囲に枠線を表示させてみます。

い、いっしょですねぇ(汗)。

え、えーい、それなら入れ子にしちまえ。それならなんかわかるだろ(投げやり〜)。

(記述例)

<div style="border:thin solid #000000;">
外側にDIVタグを使って、<br />
ボックス(領域)の周囲に枠線を表示させてみます。<br />
<div style="border:thin solid #000000;">
内側にもDIVタグを使って、<br />
ボックス(領域)の周囲に枠線を表示させてみます。<br />
</div>
</div>
(表示結果)

外側にDIVタグを使って、
ボックス(領域)の周囲に枠線を表示させてみます。
内側にもDIVタグを使って、
ボックス(領域)の周囲に枠線を表示させてみます。

IEの方にはちょっとわかりにくいかもしれませんが、枠線(ブロック)の中に枠線(ブロック)が入っているのがわかります?
もうちょい見やすいように、ブロック間のマージンを設けるのもひとつの手なのですけど、ソースがこれ以上ややこしくなるのは避けたいので我慢してください。
で、表示結果としてはこちらが望んでいるとおりのものを得ることができました。

それでは次に<P>タグ同士で同じ事をやってみましょう。

(記述例)

<p style="border:thin solid #000000;">
外側にPタグを使って、<br />
ボックス(領域)の周囲に枠線を表示させてみます。<br />
<p style="border:thin solid #000000;">
内側にもPタグを使って、<br />
ボックス(領域)の周囲に枠線を表示させてみます。<br />
</p>
</p>
(表示結果)

外側にPタグを使って、
ボックス(領域)の周囲に枠線を表示させてみます。

内側にもPタグを使って、
ボックス(領域)の周囲に枠線を表示させてみます。

ネタとはいえ、なんだか普通こんなことしねぇよな。という事を正々堂々やるのはちょっと気持ちいい(?)ですね。
まぁ、そんなことは置いといて、なんか表示が変ですね?IEでは枠線が分割されてしまい、NNではひとつの大きな枠線になっちゃって、正体不明の小さな四角(枠線だと思われる)が中に現れちゃいました。
こちらが意図した表示にならない原因のひとつは、<P>タグの終了タグ(</p>)が省略可能だということがあると思われます。しかし、正確には省略してはいけません。ですから、ブラウザが勝手に<P>タグの次に<P>タグが来たので、先のタグが終了してしまったと判断したのが表示のおかしくなる原因でしょう。

それでは……<P>タグの中に<DIV>タグを放り込んだらどうなるでしょう?ま、だいたい予想ついていると思いますけど。

(記述例)

<p style="border:thin solid #000000;">
外側にPタグを使って、<br />
ボックス(領域)の周囲に枠線を表示させてみます。<br />
<div style="border:thin solid #000000;">
内側にDIVタグを使って、<br />
ボックス(領域)の周囲に枠線を表示させてみます。<br />
</div>
</p>
(表示結果)

外側にPタグを使って、
ボックス(領域)の周囲に枠線を表示させてみます。

内側にDIVタグを使って、
ボックス(領域)の周囲に枠線を表示させてみます。

同じような結果になりましたね。しかしIEの方では、枠線と枠線の隙間が無くなっています。これは<P>タグが段落を定義する際に改行が伴うのですが、<DIV>タグの場合は改行を伴わないという性質があるからです。
ここでわかるのは、<P>タグがブロック要素を作成した後タグを閉じていなくても、別のブロック要素が現れると、<P>タグのブロックはその場所からキャンセル(強制終了)されてしまうみたいだということ。つまり、<P>タグのブロック要素は、別のブロック要素を入れ子にする事はできないということですね。おっ、やっと違いらしいものが見えてきました。

それでは最後に、<DIV>の中に<P>を入れてみましょう。

(記述例)

<div style="border:thin solid #000000;">
外側にDIVタグを使って、<br />
ボックス(領域)の周囲に枠線を表示させてみます。<br />
<p style="border:thin solid #000000;">
内側にPタグを使って、<br />
ボックス(領域)の周囲に枠線を表示させてみます。<br />
</p>
</div>
(表示結果)

外側にDIVタグを使って、
ボックス(領域)の周囲に枠線を表示させてみます。

内側にPタグを使って、
ボックス(領域)の周囲に枠線を表示させてみます。

だいたい予想通りの結果になったでしょうか?
IE、NN共に、今までで一番わかりやすい表示結果が現れたと思います。パチパチパチ〜。
と、いうわけで。

結論

段落を表現する時は、<DIV>タグを優先して使い、<P>タグの中には、他のブロック要素を作成するタグを使うのは望ましくない(というか、使っちゃだめ)
ってことになります。
以上!!

最後に

先日、うちのトップページが字が小さくて読めない、とツッコミ入れられました。そこいらへんは自分はいろんな環境でこのページを見てもらえるように、基本的にはフォントのサイズを固定していませんので、ブラウザのフォントの表示設定を使えば見やすくすることができるようにしています。ちょっと面倒くさいかもしれませんが、そこいらへんはご了承を。
で、その時うちのページと比較で挙げられたのが、プロバイダのHPだったのですね。実際見てみると確かに……ある程度フォントの大きさが設定できるうえ、大きすぎもならない、小さすぎにもならない。うむむ……こりゃ、ちょっと見習うところがあるかもと思ってソースを見てみたのですが。
えーと、ホームページビルダーで作ってありました。ま、それはいいとします。ところが、使用されているタグを見てみると、HTML4.01非推奨のタグがわんさか出てくる出てくる。フォントの大きさを指定するのにも「こんなタグ使えるかー!」みたいな感じでして、結局のところ毎回ひいこらとタグをエディタで打ちこんでいる自分としては、HP作成ソフトを使うとこうも汚いHTMLが作成できるのか〜。と、そういう意味では勉強にはなりましたけども(笑)。

上のほうで”HTMLというものは本来文章を構造的に表現するためのプログラム言語”などと、偉そうに書いていますけど、実は今まで文章の構造なんてあんまり真剣に考えてHTMLを作ったことはないんですね。お恥ずかしいことに。このページを作った理由も、タグの知識をHP作成に役立てたいというのじゃなくて、いままでよくわかっていなかった事を実際に試してみて、せっかくだからそれをHPのネタにしよう。というただそれだけのことでして。このページ作るまで、<DIV>タグも<P>タグも改行を伴うかどうかぐらいの違いとしか認識していませんでした。すみません。所詮そんなもんです。
てなわけで今回は実際にこのページを作りながらタグの意味を考えて、ちょっと今までにないくらい真剣に作ってみましたよ。ほんと。

それでは、このページの<BODY>内でここまでで使われているタグを挙げてみますと、
<DIV>、<P>、<BR>、<H1>、<H2>、<STRONG>、<EM>
これだけですかね。意味は皆さんHTML辞典とかで引いてもらえればおわかりになるとおもいますが、これらそれぞれのタグはテキストの構造上の意味を論理的に定義するものばかりです。
それと今回はかなり意識して、テキストのマークアップをおこなってみました。ちなみにいま書いているここの文章は、
<div class="chapter">内の<div class="section">内の<div class="paragraph"内の段落(<P>)になります。現在まで自分の作ってきたHTML文の中では、一番正しい構造を示しているページではないでしょうか(おいおい)。
というわけで、そういう事に興味をお持ちの方は、一度このページのソースをご覧になってくださいな。
ではでは。

Webセーフカラー一覧作っといてよかった〜。便利やわ、これ。手前味噌ですんませんけど(笑)。


トップページに戻る