back / home ]

overflow

overflowは、内容が包含ブロックのボックスからはみ出す場合の視覚効果(はみだす、切り取られる等)を指定するプロパティです。

プロパティ

visible | hidden | scroll | auto | inherit
初期値 visible
適用対象 ブロックレベル要素,置換要素
継承性 なし
パーセント値 適用不可
メディアグループ visual

値には、次のものが指定できます。

visible
包含ブロックのボックスにはみ出して表示します。
hidden
はみ出した範囲を表示せず、スクロール機構も提供しません。
scroll
はみ出した範囲へアクセスするためのスクロール機構が提供されます。スクロール機構が提供されないメディア(print と projection)の場合は、オーバーフローした内容を印刷する。
auto
ユーザエージェントに依存します。オーバーフローする場合は、可能であればスクロール機構が提供されることが期待されます。

サンプル【見え方は、UA(ユーザーエージェント)の実装状況によって違います。】

overflow:hidden

はみ出した範囲を表示せず、スクロール機構も提供しません。

overflow:scroll

はみ出した範囲へアクセスするためのスクロール機構が提供されます。

overflow:auto

ユーザエージェントに依存します。

overflow: visible

包含ブロックのボックスにはみ出して表示します。

clip

clipは、切り取って見せる範囲を指定するプロパティです。

プロパティ

<shape> | auto | inherit
初期値 auto
適用対象 ブロックレベル要素,置換要素
継承性 なし
パーセント値 適用不可
メディアグループ visual

値には、次のものが指定できます。

auto
トリミングしません。要素のボックスサイズと同じだけ表示されます。
<shape>
矩形領域をボックスの四辺からの <length>で指定します。
矩形領域を指定する形式は次のように指定します:
rect(<top> <right> <bottom> <right>)。 それぞれの値は、<length> か auto の何れかで指定し、auto が 0 と同じ意味となります。

visibility

visibilityは、生成されたボックスを表示するか否かを指定するプロパティです。 非可視化されても、ボックスは生成されます。

プロパティ

visible | hidden | collapse | inherit
初期値 inherit
適用対象 すべての要素
継承性 なし
パーセント値 適用不可
メディアグループ visual

値には、次のものが指定できます。

visible
ボックスを可視化します。
hidden
ボックスを非可視化します。透明にはなりますが、ボックスは生成されるので後続のレンダリングに影響します。
collapse
列の 'visibility' の値が 'collapse' に指定する場合、 列のセルは非可視化され、他の列にまたがるセルはトリミングされます。 さらに、表の幅は切り取られた列の幅だけ狭くなります。その他の要素に指定した場合は、hidden と同じです。

サンプルコード

p.samp1{
    margin-bottom:0
}
p.samp2{
    margin-top:0
}

結果

このボックスの下には 'hidden' 指定されたボックスが定義されています。

このボックスは 'hidden' が指定されています。


back / home ]