HTML(タグ)の基礎のブログ版です。ホームページを作成するためのタグなどについてのFAQを主に解説しています。徐々に足していきます。
主に頂いたお便りからの回答を元に作成していますが、もしかすると私が誤った回答をしているばあいもありますので、気づかれた方はお知らせいただけますと助かります。
SELECTED ENTRIES
ここから下はこのFAQブログ内ではなく、自サイトのHTMLの基礎のほうへリンクしています。FAQではなく要素などの意味や使い方を調べたい、と言う方は以下からリファレンスの方へ飛ぶ事ができます。
HTMLの基礎:目的別
HTMLの基礎:タグ別
※下記のものは主なタグだけです。他にも掲載しています。
サイト概要
<< リストのマークに画像を使用したい |main | 警告ダイアログを出したい >>

インラインレベル要素・ブロックレベル要素

「<span>の間になぜ、<p>をいれてはいけないのでしょうか?」 という質問です。タイトルにもあげた様に、ここではインラインレベル要素、 ブロックレベル要素についての説明を簡単にします。

ウェブページを作成するには、タグで文書の基本構造を記述していきます。 <b>あああ</b>などのように、タグでマークアップした一つのかたまりを 「要素」と呼び、その要素を大きく分類すると・・・


「ブロックレベル要素」
p(段落)や h1(見出し)の様に一般的に前後に改行が入る1つのまとまった要素


「インラインレベル要素」
strong(強調)や img(画像)といった、文字列のように小さな範囲で扱う要素

に分けることが出来ます。(※例外もあり、別扱いになる要素・どちらにも 使える要素もあるのですが、ここでは説明しません。)


【簡単な例】
▼ブロックレベル要素
<p style="background-color:#ff9999;">
あああああ
</p>

▼インラインレベル要素
<span style="background-color:#ff9999;">
あああああ
</span>

それぞれの要素にスタイルシートで背景色を指定しています。 これをページ上で表示させると以下のようになります。 背景色の変化している部分が、その要素の範囲です。(※ コピーして表示させたとしても全てが以下のような表示になるとは限りません。 参考程度に見て下さい。)


▼ブロックレベル要素

あああああ

▼インラインレベル要素

  あああああ

要素がどのタイプに属するのかはそれぞれ決まっています。 通常、「インラインレベル要素」の中に「ブロックレベル要素」を含める事 は出来ないという決まりがあり、


「<span>の間になぜ、<p>をいれてはいけないのでしょうか?」

という質問に簡単に答えると、span はインラインレベル要素であり、 p はブロックレベル要素で、「インラインレベル要素」の中に「ブロックレベル要素」 を含める事は出来ないという決まりがあるからだといえます。

要素の意味を考えればなんとなく理解しやすいと思います。 普通に考えると段落レベルで扱われる要素を、文字レベルで扱う要素で囲むのは おかしい事だとわかります。もしもきちんと表示されていたとしても、それはブラウザの 仕様であり、文書の構造上は間違っている事になります。


<strong>
<p>
段落です。
</p>
</strong>

上記は間違いであり、この場合は以下のようにブロックレベル要素の内側に、 インラインレベル要素を記述します。


<p>
<strong>
段落です。
</strong>
</p>

スタイルシートを正確に記述するならば、「インラインレベル要素」 「ブロックレベル要素」はきちんと理解して頭に入れておく必要があります。 スタイルシートのプロパティの中には、ブロックレベル要素にしか適用されないもの、 インラインレベル要素しか適用されないものがあり、きちんと記述しないと 意図したとおりに表示させる事が出来ない場合もあるからです。

全部丸ごとスタイルシート:HTMLの基本構造
ブロックレベル・インラインレベルなどそれぞれに属する要素などを掲載しています。

| 2006.04.30 Sunday | ykr414 | FAQ【HTML基本構造】 | - |
url: http://ykr414.ykr.main.jp/trackback/29