clip

対応状況
N7.0 Win	N6.0 Win	e6.0 Win	e5.5 Win	e5.0 Win	e5.0 Mac	e4.5 Mac	O7.0 Win	O6.0 Win
×	×	×	×	×	×	×	×	×

可視範囲を指定します。'overflow'に[visible]以外の値を持つ要素に適用されます。

キーワード解説

auto

切り抜き領域はボックスと同じ大きさ・形になります。

<型>

CSS2では、値の種類<型>として正当な値は矩形のみです。 <top> <right> <bottom> <left>という四つの値によって、ボックスの各辺からの距離を指定します。

<top>、<right>、<bottom>、<left>という4つの値の種類はいずれも、<長さ>か又は[auto]を採ります。0時から時計回り、と覚えると良いです。ほかの簡略化プロパティと異なり、省略は出来ません。

[auto]という値を指定すると、切り抜き領域の辺は、要素が生成するボックスの辺と同じになります。つまり"0"と同じです。

<left>と<right>の和が要素の幅に等しくなる、又はそれ以上になる時(同様に<top>と<bottom>の和が要素の高さに等しくなる、又はそれ以上になる時)はすべて切り取られ、何も残さないようにするべき、逆に和がゼロの時、内容は全く切り抜かれるべきでは無いとされています。

次の2つの規則集合は、
p { clip: rect(5px, 10px, 10px, 5px); } p { clip: rect(5px, -5px, 10px, 5px); }
以下の図に破線で示した矩形の切り抜き領域を作り出します。

色んな祖先要素が('overflow'の値が[visible]では無い場合に)切り抜き領域を持つ事もあり得ます。その場合、様々な切り抜き領域の共通部分が表示されます。

切り抜き領域がUAの表示領域からはみ出す場合、その場の動作環境に応じて内容がウィンドウに切り抜かれる事もあります。

CSS2では矩形の切り抜きしか出来ません。将来はほかの切り抜き方も出来るようになるでしょう。イメージマップのように、円形と多角形は欲しいところです。

問題点