HTML CSS 講座 トップページへ

ホームページ作成 いまさらHTML,CSS講座
|  Home  |  ホームページ作成の知識  |  HTML 講座  |  HTML TABLE 講座  |  スタイルシート(CSS) 講座  |  携帯サイト 作成 講座  |
[HTMLテンプレートカテゴリ] [未分類カテゴリ]

いまさら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要素内に記述しても、自動的にブラウザがブロックレベル要素を補完します。
しかしながら、ブラウザの性能に頼らない正しい文法での記述を心がけて下さい。

(C) いまさらHTML CSS講座 2002-2008 All right reserved