ホームページ作成いまさらHTML,CSS講座

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

■ ブロックレベル要素

見出し、段落など文書を構成する為の基本要素です。

また、ブロックレベル要素の中に、他のブロックレベル要素やインライン要素を置く事が出来ます。

■ インライン要素

ブロックレベル要素の内容を指し、指定した部位に様々な意味や機能を持たせます。

インライン要素の中に、他のインライン要素を置く事が出来ますが、ブロックレベル要素を置く事は出来ません。

また、DOCTYPE宣言で、HTMLをStrictのDTDで記述すると宣言した場合、body要素にインライン要素を直接記述することはできません。

body要素にインライン要素を記述する場合、div要素などのブロックレベル要素の中に記述するようにします。

インライン要素　誤りの記述

<body>
<img src="sample.gif" width="200" height="100" alt="サンプル画像">
<br>サンプル画像です。
</body>

画像を表示する為のimg要素は、インライン要素なので、bodyタグに直接記述できません。また、改行のbr要素も同様です。

インライン要素　正しい記述

<body>
<div> <img src="sample.gif" width="200" height="100" alt="サンプル画像">
<br>サンプル画像です。
</div>
</body>

但し、これは厳密な話で、一般的なブラウザでは、インライン要素をBODY要素内に記述しても、自動的にブラウザがブロックレベル要素を補完します。

しかしながら、ブラウザの性能に頼らない正しい文法での記述を心がけて下さい。

ホームページ作成 いまさらHTML,CSS講座