目次を飛ばして本文へ パン屑リストへ
Powered by Google

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
× × × × × × × × ×
<型> | auto | inherit
初期値 auto
適用 ブロック要素 及び 置換要素
継承 しない
レベル 2-
メディア visual

可視範囲を指定します。'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では矩形の切り抜きしか出来ません。将来はほかの切り抜き方も出来るようになるでしょう。イメージマップのように、円形と多角形は欲しいところです。

問題点
  1. <型>の値で[auto]を使用する意味がありません。
関連プロパティ

page top
最終更新日:2004年02月28日
Copyright © 2002-2004 ばあど All Rights Reserved.