忍者ブログ

ホームページ作成ビギナーズガイド

HTML4.01とCSSによるWeb標準のホームページ作成入門。

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

ブロック要素とインライン要素

ブロック要素(Block-level element)・インライン要素(Inline element)の区別はHTML・CSS両方で重要です。

ブロック要素(Block-level element)の特徴

body要素内に書くことができる、つまりbody要素の子要素にすることができる。
一般に、インライン要素や他のブロック要素を内容にすることができる。
視覚系ブラウザでは一般に、前後に改行が入る。

インライン要素(Inline element)の特徴

body要素内に直接書いてはいけない。
テキストや他のインライン要素を内容にすることができる。
ブロック要素を内容にすることはできない。
視覚系ブラウザでは一般に、前後に改行が入らない。

上記の特徴はHTML4.01仕様書の7.5.3 Block-level and inline elementsに書いてあることのまとめです。

しかしこれだけだとホームページ作成初心者は意味がわからないと思いますので、よくある間違いの例で説明したいと思います。

ブロック要素とインライン要素の包含関係の例

間違いの例

<body>
テキスト、<img src="aaa.jpg" alt="AAA">、<strong>テキスト</strong>、・・・etc
</body>

body内にテキストを直接書いたり、インライン要素を書くのはHTML4.01 Strictでは誤りです。
(Transitional、Framesetでは書くことができます)

正しい例

<body>
<p>
テキスト、<img src="aaa.jpg" alt="AAA">、<strong>テキスト</strong>、・・・etc
</p>
</body>

pなどのブロック要素内にテキストやインライン要素を書くのはOKです。

間違いの例

<em><p>テキスト</p></em>

emなどのインライン要素内に、pなどのブロック要素を書くのは誤りです。

間違いの例

<p>
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>
</p>

ブロック要素は他のブロック要素を内包できるものが多いですが、pはブロック要素を内包できないものの一つです。

CSS(スタイルシート)とブロック要素・インライン要素

CSSでも、margin・padding・border・text-alignなどの指定で、インライン要素かブロック要素かの違いは重要です。

ブロック要素とインライン要素の関連サイト

ブロック要素・インライン要素の各一覧、CSS記述の注意点などはこちらが参考になります。

PR

CSS(スタイルシート)入門講座1｜HOME｜brタグ(改行)

コメント

トラックバック

CSS(スタイルシート)入門講座1｜HOME｜brタグ(改行)

メニュー

カテゴリー

リンク

RSS

Appendix

リンクはご自由にどうぞ。

最終更新2008/07/09

Copyright © ホームページ作成ビギナーズガイド All Rights Reserved.

忍者ブログ[PR]