HTML講習

ボックスモデルの視覚整形（PDF 素材 参照1・参照2）

ボックスモデルの視覚整形

ボックスには、大きく分けて【ブロックボックス】と【インラインボックス】がある。

• ブロックボックス　h1〜h6、p、blockquote、div、addressなど
• インラインボックス　a、img、em、spanなど

包含ボックス

親ボックスで、パディングやマージンなどで決定された位置や大きさを表すボックス。

インラインボックスは、包含ブロックに流し込まれるかたちで配置され、自動的に改行や折り返しが起こり複数の行を生成する。

匿名ブロックボックス

包含ブロック内に、インラインでもブロックでもない【テキスト】のみあった場合、CSSでは、ブロックボックスとして扱われる。このようなブロックボックスを匿名ブロックボックスという。

匿名インラインボックス

包含ブロック内に、インラインでもブロックでもない【テキスト】とインラインボックスがあった場合、【テキスト】もインラインブロックとして扱われる。このようなインラインボックスを匿名インラインボックスという。

ランインボックス

指定した要素の後にブロックボックスが続く場合、指定した要素をそのブロックぼっくのの最初のインラインボックスとして表示するためのフォーマット。

表示方法（display）

要素の表示方法（生成するボックスの種類）を指定するプロパティ。

block（ブロックボックスとして生成）

記述例 display: block;

inline（インラインボックスとして生成）

run-in（ランインボックスとして生成）

none（非表示化）

配置方法（position）

要素の配置方法を指定するプロパティ。

static（通常配置。top・right・left・bottomの各プロパティは無効）

記述例 position: static;

relative（相対配置。top・right・left・bottomの各プロパティで位置を指定。）

生成された本来の位置より相対的に移動されて配置される。後に続くボックスは、本来の位置から移動されていないものとして配置される。（位置が重なる。）

absolute（絶対配置。 top・right・left・bottomの各プロパティで位置を指定。）

後に続く要素の配置に影響しない。独立した配置として扱われる。

fixed（固定配置。absoluteと同じ。それに合わせてウィンドウスクロールの領域移動に対して固定となる。）

位置（top、right、bottom、left）

positionプロパティのrelative・absolute・fixedで利用。

• 長さ 相対配置の時は、要素本来の位置からの距離。絶対・固定配置の時は包含ブロックの四辺からの距離。マイナス値も指定可能。
• パーセンテージ 幅と高さを基準にとする。マイナス値も可能。
  ただ、top・bottomの場合、包含ブロックの高さが明確でなく内容量に依存する場合[line-height及びheightが指定されていない場合]、autoとして解釈される。
• auto　 他の要素がautoで指定しているかに依存する。

記述例 top: -125px;

絶対配置の場合、body要素の左上端を基準に配置する点に注意。