clip

Updated / Published

clipプロパティは絶対位置決めの要素の表示領域の中で、特定の領域だけを切り抜いて表示することができます。

CSS2 仕様では、ブロックボックスを形成する要素または置換インライン要素の中で overflowプロパティに "visible" 以外の値を持つ要素が適用対象でしたが、UA の対応状況にあわせて、CSS2.1 より仕様が大きく改訂され、CSS2.1 仕様ではpositionプロパテに"absolute" の値をもつ絶対位置決めの要素に限られています。

値
初期値
auto
適用対象
絶対位置決めの要素（position : absolute ;）
継承
しない
メディア
visual

clipプロパティの値

CSS2.1 で切り抜ける形状は矩形（四角形）のみです。なお、CSS3仕様でも切り抜ける形状は増えていません。

rect
top（上）, right（右）, bottom（下）, left（左）の時計回りの順に矩形の切り抜き領域を数値指定
auto
もとの内容と同じ大きさ・形で表示（切り抜かれない）

キーワード "auto" の切り抜き領域の辺は、要素が生成するボックスの辺と同じになるので top（上）, right（右）, bottom（下）, left（左）に対応する部分の値に「0」を指定しているのと同じです。

CSS2 仕様と CSS2.1 仕様の変更点

適用対象の変更だけでなく、「top」「right」「bottom」「left」の順で指定する切り抜く領域においても、CSS2 では半角スペース、またはカンマ（,）のどちらかで区切って指定することになっていましたが、CSS2.1 ではカンマ（,）で区切らなければなりません。

Inetrenet Explorer6, 7はCSS2仕様にのみ適合しており、「top」「right」「bottom」「left」の部分に対応する値がカンマ（,）区切り指定だと無効になるため、Inetrenet Explorer6, 7用のフォールバックとしてCSS2 仕様の半角スペース区切り指定もあわせて行う必要があります。

また、「top」「right」「bottom」「left」に対応する部分の数値指定においても、CSS2 では表示領域の各辺の位置で、コンテンツ内容の左上を基点とした距離となっていましたが、CSS2.1 では次の図のように「top」「right」「bottom」「left」の表す領域が変更されています。

CSS2
セレクタ { clip : rect (top right bottom left ) ;}
CSS2 における上、右、下、左に対応する値が表す領域
CSS2.1
セレクタ { clip : rect (top, right, bottom, left ) ;}
CSS2.1 より変更された上、右、下、左に対応する値が表す領域

clipプロパティの実装状況

IE
◯：IE 6, 7 は数値のカンマ区切りを未サポート、IE8よりカンマ区切りをサポート
Firefox
◯
Opera
◯
Chrome
◯
Safari
◯
iOS
◯
Android
◯

現在の最新UAは、半角スペース区切りもカンマ（,）区切りも両方をサポートしていますが、半角スペース区切りの今後もサポートし続けるのかは不明なため、現時点ではIE6, 7対応の必要に応じて半角スペース区切りとカンマ（,）区切りを併用しておくと良いでしょう。

サンプル

img.clip {
position : absolute ;
clip : rect(75px 200px 150px 40px) ; /*IE6,7用フォールバック*/
clip : rect(75px, 200px, 150px, 40px) ;
}
a:hover img.clip {
clip : rect(0 320px 240px 0) ; /*IE6,7用フォールバック*/
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 と組み合わせて動的な表現を演出する際に良く利用されています。