HTML講習

視覚効果（PDF 素材 復習素材 参照1 参照2 参照3）

ブロック要素の内容は、ボックスの内容領域の範囲内に限定される。以下の場合、ボックスから一部または全部がはみ出す事がある。

• 行が改行されず行ボックスがブロックより、大きくなる場合。
• ブロックが包含ブロックより大きすぎる場合。
• 要素の高さが、包含ブロックの高さを超える場合。
• ボックスが絶対配置されている場合。
• マージンでマイナス指定されている場合。

切り抜き方法（overflow）

内容がはみ出す場合に、はみ出す部分をどのように表示するかを指定するプロパティ。
ブロック要素もしくは、置換要素のみに適用。

visible（内容を切り抜かない。内容はボックスの外側にも表示される。デフォルト。）

hidden（内容を切り抜く。内容はボックスの内側しか表示されない。はみ出した部分を見ることが出来なくなる。）

scroll（内容を切り抜く。スクロールバーではみ出した部分を表示する事ができる。）

auto（ ブラウザ依存。スクロールされる。）

x軸とy軸を個別指定する「overflow-x」「overflow-y」がIEのみサポートされている。今後全てのブラウザで採用される。

切り抜き領域（clip）

表示済み要素の内容のうち、可視範囲を切り抜き領域といい、任意の切り抜き領域を指定するプロパティ。

rect(top, right, bottom, left)（切り抜き領域をボックスの四辺からの距離で指定する。マイナス指定可能。auto ＜0と同等＞ で指定可。）

auto（切り抜き領域は、ボックスと同じ大きさと位置。デフォルト。）

position: absolute;　の指定は必須。数値指定は、ボックス左上から指定する。

 例）top・leftは、実数値で。rightは、leftからの距離数値。bottomは、topからの距離数値

可視・不可視（visibility）

生成するボックスの可視・不可視を指定するプロパティ。

visible（ボックスを可視にする。デフォルト。）

hidden（ボックスを不可視にして、透明化する。ただし、大きさ・位置は残る。）
<==> display: none;（ボックスの生成はされない。）

hiddenにしても、大きさと位置は残る。透明化したのみ。