セレクタ { clip : 形状 (top right bottom left ) ;}
セレクタ { clip : 形状 (top, right, bottom, left ) ;}
clipプロパティは絶対配置が指定された要素の表示領域の中で、特定の領域だけを切り抜いて表示することができます。CSS2 仕様では、ブロック要素または置換要素の中で overflowプロパティに "visible" 以外の値を持つ要素が適用対象でしたが、現状の UA の対応状況にあわせて、CSS2.1 より仕様が大きく改訂され、CSS2.1 仕様では positionプロパティに "absolute" の値をもつ要素に限られています。
rectautoinheritautoposition : absolute ;）の要素CSS2.1 で切り抜ける形状は矩形のみです。切り抜ける形状は、今後、増えると思われます。
rectautoキーワード "auto" の切り抜き領域の辺は、要素が生成するボックスの辺と同じになるので top（上）, right（右）, bottom（下）, left（左）に対応する部分の値に「0」を指定しているのと同じです。
適用対象の変更だけでなく、「top」「right」「bottom」「left」の順で指定する切り抜く領域においても、CSS2 では半角スペース、またはカンマ（,）のどちらかで区切って指定することになっていましたが、CSS2.1 ではカンマ（,）で区切らなければなりません。ただし、現状では CSS2 仕様に準拠している UA が多いことと、Windows版Internet Explorer 6 においては「top」「right」「bottom」「left」の部分に対応する値をカンマ（,）区切りにすると、表示に反映されないので、CSS2 仕様の半角スペース区切りによる指定を行う方が無難です。
また、「top」「right」「bottom」「left」に対応する部分の数値指定においても、CSS2 では表示領域の各辺の位置で、コンテンツ内容の左上を基点とした距離となっていましたが、CSS2.1 では次の図のように「top」「right」「bottom」「left」の表す領域が変更されています。
セレクタ { clip : 形状 (top right bottom left ) ;}セレクタ { clip : 形状 (top, right, bottom, left ) ;}
img.clip {
position : absolute ;
clip : rect(75px 200px 150px 40px) ;
}
a:hover img.clip {
clip : rect(0 320px 240px 0) ;
}
......
<p>これは何の写真かな？<br />
<a href="image.jpg"><img src="image.jpg" class="clip"
width="320" heihgt="240" alt="パイナップル" /></a></p>
<p style="margin-top:250px;">
カーソルをあわせると、正解の写真がでてくるよ！</p>
clipプロパティは、:hover疑似クラスや JavaScript と組み合わせて動的な表現を演出する際に良く利用されています。