9-6a ブロックレベル要素

前ページでも説明 致しましたが、ブロックレベル要素とは、文章構造の枠組みを決める要素の事です(家で云う所の『台所』や『居間』、『部屋』みたいな物だと思って下されば大体正解です)。

IEなどの視覚系のブラウザでは前後に改行が入るので大変判り易いです。ブロックレベル要素の中身には他のブロックレベル要素(中身にもよります)やインライン要素を入れる事が出来ます。しかしインライン要素の中身にブロックレベル要素が入る事は出来ません。 (ブロックレベル要素の中で代表的なタグに <h1> <div> <p> <ul> <ol> <blockquote> <hr> 等があります)

[ 関連事項 : HP-TIPS > CSS > ページのレイアウト ]

9-6b インライン要素

インライン要素とは、文字(inline)が示す通り「行内」という意味で、個々のテキストを修飾したり意味を持たせたりする要素の事です。 (インライン要素の中で代表的なタグに <br> <a> <span> <img> <em> <strong> 等があります)。

ブロックレベル要素が『台所』や『居間』ならば、こちらは『居間』の中の「テーブル」や「テレビ」に当たります。 インライン要素の中身には同じインライン要素しか使用出来ません。(テーブルの中に台所が入らないのと同じような物だと思って下されば大体正解です^^;)

9-6-1 インライン要素、ブロックレベル要素の見本

【 インライン要素の中身 】

<strong><a href="link.html">リンクのページに行く</a></strong>

強調を表す<strong>の中に<a>要素が使用されております。どちらも 『インライン要素』 なのでこの使い方はOKです。

<strong><p>強調したい文章を記載する</p></strong>

強調を表す<strong>の中に段落を表す<p>要素が使用されております。 これは 『インライン要素』 の<strong>が 『ブロックレベル要素』 の<p>を挟んでいるので文法的にNGです。正しく記載する為には、
<p><strong>強調したい文章を記載する</strong></p> として下さい。


【 ブロックレベル要素の中身 】

<p>
文章その1
<hr>
文章その2
</p>

段落を表す<p>の中に仕切り線を表す<hr>が使用されております。これはどちらも 『ブロックレベル要素』 なのでこの使い方はNGです。正しく記載する為には、
<p>文章その1</p><hr><p>文章その2</p> として下さい。