HTMLのネタ~ブロックレベル要素&インライン要素

2011.08.27

HTMLのネタとしてあげているが、XHTMLとCSSのデザインにおいて基本となる事にブロックレベル要素とインライン要素があるります。

HTMLの基本となる事柄だが、いままでは余り意識しなくてもよかったのですが、CSSを考えるならよく理解して欲しい事柄です。

HTMLの基本のせいか、余りCSSの指南書などにも詳しく書かれていないような気がします。

インラインブロック要素なんてくくりをする場合もありますが、その辺は余り深く考える必要はありません。

 

ブロックレベル要素

ブロックレベル要素は、ページの基本要素を作る為の要素といえます。 ブロックレベル要素の中にブロックレベル要素を記述出来ますが、基本的にはDiv要素以外は余り使いません。 通常はFloat指定しなければ横並びできない要素と言えます。この部分がCSSデザインの肝といえます。 厳格な記述を目指すなら、HTMLのなかにあるテキストは全て何らかのブロック要素の中に無ければならないはずです。

 

主なブロックレベル要素

<div><h?><p><table><ul><address><ol><form>など

 

インライン要素

ブロックレベル要素の装飾や機能を持たす為の要素です。 インライン要素に他のインライン要素をかさねる事は出来ますが、インライン要素の中にブロック要素を入れる事は出来ません。

 

主なインライン要素

<a><b><br><em><font><i><img><input><select><strong><textarea><u>など

 

BODY要素

ブロックレベル要素とインライン要素を理解する為には、親子関係を理解する必要があります。 インライン要素の親要素がブロックレベル要素、ブロックレベルの親要素がBODY要素です。すなわち、BODY要素の直下にインライン要素は置けない事になります。

現在のCSSデザインのトレンドでは、まずページ全体をDiv要素で大きくくくりますのでこの事は余り気にする必要はないとは思いますが、考え方として理解しておく必要があります。

全ての要素において、タグの入れ子関係を崩さないように記述する事がポイントになります。