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

references

ＨＴＭＬのネタとしてあげているが、ＸＨＴＭＬとＣＳＳのデザインにおいて基本となる事にブロックレベル要素とインライン要素があるります。

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

ＨＴＭＬの基本のせいか、余りＣＳＳの指南書などにも詳しく書かれていないような気がします。

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

ブロックレベル要素は、ページの基本要素を作る為の要素といえます。

ブロックレベル要素の中にブロックレベル要素を記述出来ますが、基本的にはＤｉｖ要素以外は余り使いません。

通常はＦｌｏａｔ指定しなければ横並びできない要素と言えます。この部分がＣＳＳデザインの肝といえます。

厳格な記述を目指すなら、ＨＴＭＬのなかにあるテキストは全て何らかのブロック要素の中に無ければならないはずです。

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

ブロックレベル要素の装飾や機能を持たす為の要素です。

インライン要素に他のインライン要素をかさねる事は出来ますが、インライン要素の中にブロック要素を入れる事は出来ません。

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

ブロックレベル要素とインライン要素を理解する為には、親子関係を理解する必要があります。

インライン要素の親要素がブロックレベル要素、ブロックレベルの親要素がＢＯＤＹ要素です。すなわち、ＢＯＤＹ要素の直下にインライン要素は置けない事になります。

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

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