<< |シンプル解説(作者のページ) |リンク集 |ヘルプ |>>

シンプル解説(作者のページ) >(1、参照の1ページ目>


以下の文書は、私が勝手に、仕様書をわかりやすくするために、独自解釈したものです。よって、信頼に足る文書ではなく、標準情報からは、ほど遠いものであることをご了承下さい。

HTML言語:要素について

要素には、入れ子方式で入れられる要素が限られています。例えば、P要素の中へ、DIV要素を入れることが出来ないのです。

これを考えてみると、要素は、3種類に分類できます。「大きな要素>中くらいの要素>小さな要素」です。さっそく、この意味を考えていきましょう。

要素にはどんな種類があるの?

まず、HTML言語には、「要素」があります。これが基本ですので、ぜひ覚えてください。

仮に、A要素というのは、「<a href="http://weo.htm">リンクします</a>」のような文章全体を指します。もう少し、HTML言語の基本を学びたい方は、HTML学習辞典で解説をしていますので、それをお読み下さい。
>>「HTML言語の基礎知識

その要素は、大きく分けて、3つに分類することが出来ます。それが、ブロック要素(block-level element)とインライン要素(inline-level element)と空(からと読むらしい)要素(empty element)です。

空要素は終了タグがないものです。ですから、要素の内容文もなく、開始タグだけなので、から要素と呼ばれるのでしょう。例えば、img要素(<img src="sample.png">)も、この仲間です。

ブロック要素は、みな、p(段落)要素のように、始まりと終りが、自動的に改行される(さらに空白が付けられる場合もある)のが、特徴です。

ブロックとインラインは大小の箱のごとし

ブロック要素とインライン要素の違いは、下の図を見てくだされば分かると思います。HTML言語は入れ子方式で、ある要素を別の要素で囲むことが出来るのです。要素を箱に例えると分かりやすいでしょう。

大きな箱と小さな箱の図(4.9k)

入れ子方式が分からない人は、上の図のように、大きな箱の中に、小さな箱が入っているのを想像してみてください。さらに、その小さな箱には別の箱を入れることが出来ます。

要素の仕組みがおわかりいただけたでしょうか。上の図では、ブロック要素を大きな箱にたとえ、インライン要素は小さな箱に例えてみました。

ですから、逆に、小さな箱の中へ無理矢理、大きな箱を入れることができないように、インライン要素がブロック要素を囲むことも出来ないのです。

「<インライン><ブロック></ブロック></インライン>」は誤っています。

また、他にも決まりとして、

  1. body要素の次は、インライン要素であってはならない。つまり、インライン要素はブロック要素に常に囲まれているはずである。
  2. div要素など、中にブロック要素を入れても構わないブロック要素は限られている。
  3. ブロックとインラインの違いは、見た目にも、影響を及ぼす。
  4. ブロック要素は、インライン要素などをいくらでも入れても良い。

がありますが、3については、詳しく2ページ目で述べましょう。

分類しよう

ブロック要素には以下のものがあります。

空要素は以下の通りです。

上以外はインライン要素です。
ただ、例外があって、ins,del(挿入、削除)要素はブロック要素にも、インライン要素にもなり得ます。この要素は、ブロック要素の中にあるときは、インライン要素の振る舞いをするため、別の要素を囲むことが出来なくなります。

次に、ブロックの約束事を解説していきましょう。

次のページへ進みます
シンプル

>>HTML学習辞典へ戻る

>>この章の関連リンク集が見たい

simple by dhr(Eメールでdhrname@mail.goo.ne.jp