前回、【CSS】『clip 』プロパティを使ってイメージ(画像)を素敵に魅せるチュートリアル という記事を書いたのですが、紹介させていただいたサイトにCLIPプロパティについても詳細にかかれていたので、まとめてみました。
CSSのCLIPプロパティを理解する
以下は、CSS2.1の仕様です。
Value: <shape> | auto | inherit Initial: auto Applies to: absolutely positioned elements Inherited: no Percentages: N/A Media: visual auto The element does not clip.
CLIPプロパティがもてる値
1 2 3 |
clip: rect()//shape値 clip: auto clip: inherit |
上記の3つを持つことが出来ます。 CSS 2.1での、唯一有効な<shape>値は、 rect()のみ です。
CLIPプロパティにautoを指定すると、要素はクリップしません。
そして、もうひとつ大事なことは、Applies to:にあるように、絶対位置のエレメントであること。これは、 position: absolute でなければいけないということ。
では、その唯一の<shape>値rectの使い方です。
THE RECT() FUNCTION

1 |
clip: rect(<top>, <right>, <bottom>, <left>); |
<top>と<bottom>はボックスの上部の境界エッジからのオフセットを指定し、<right> 、と<left>はボックスの左の境界線の端からのオフセットを指定します。

11.1.2 Clipping: the 'clip' propertyの図
Percentages: パーセンテージは、N/Aなので使えません。
そして、それらの値は、カンマを使って区切っていきます。
このそれぞれの値には、autoと負の値を指定することが出来ます。
RECT()のautoについて
The value 'auto' means that a given edge of the clipping region will be the same as the edge of the element's generated border box (ie, 'auto' means the same as '0' forand , the same as the used value of the height plus the sum of vertical padding and border widths for , and the same as the used value of the width plus the sum of the horizontal padding and border widths for , such that four 'auto' values result in the clipping region being the same as the element's border box).
要素の生成された境界ボックスの辺と同じになることを意味するから'auto'は '0'と同じ意味です。というようなことが書かれています。
これは、width:100px, height: 100pxをフルサイズで表示したい場合、
1 2 3 4 5 |
rect(0, 100px, 100px, 0) //または rect(0, auto, auto, 0) |
と、上記のように記載することが出来ます。
サポートブラウザ
Feature | Chrome | Firefox (Gecko) | IE | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Support | 1.0 | 1.0(1.0) | 4.0(カンマなし) 8.0(カンマあり) | 7.0 | 1.0(85) |
上記でカンマで区切って記載すると書きましたが、IE7以下については、カンマなしでないと動作しません。
ですので、IE7以下を対象とする場合は、以下のように記載します。
1 2 3 4 5 |
.clip-element { position: absolute; clip: rect(10px 350px 170px 0); /* IE4 to IE7 */ clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */ } |
CSSのCLIPプロパティを使ってみる
デモを作ってみました。
デモのコード
画像のサイズは、300px × 225px です。
/* HTML */
1 2 3 4 5 6 |
<div id="Demo"> <p class="clipSample"> <a href="#"> <img src="image.jpg" width="300" height="225" alt="サンプル画像" /> </a></p> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
body#Demo { margin:20px auto 0 auto; width:300px; text-align:left; } p.clipSample { position: relative; top: 0; left: 100px; } p.clipSample a img { position: absolute; top: 0; left: 0; clip: rect(50px 205px 155px 80px); clip: rect(50px, 205px, 155px, 80px); } p.clipSample a:hover { border: none; } p.clipSample a:hover img { clip: rect(0 300px 225px 0); clip: rect(0, 300px, 225px, 0); } |
デモを作成する際につまずいたこと
2点つまずきました。
- IE6 でのホバー時の動作が上手くいかない
- clip: auto;を試してみたらIEでは動作しない
このうちの、IE6 でのホバー時の動作が上手くいかないは、こちらのサイトで解決方法があり、参考にさせていただきました。
1 |
border: none; |
これを追記することで正常に動作しました。
次の、clip: auto;を試してみたらIEでは動作しないというのは、
1 |
clip: rect(0 auto auto 0); |
だと、正常に動作したのですが、clip: auto; での解決方法は未だ見つからずです。
まとめ
はてな?が頭に浮かぶこと山の如しぐらいになりましたが、そのはてなが多く出たのが以下の2点。
- CSS2の仕様とCSS2.1の仕様の変更を理解する
- RECT()関数がどのように動作するかを理解する
CSS2の仕様とCSS2.1の仕様の違いを先に見てしまい、実動作を見なかったので、脳内でいろいろとグルグルしました。
こういったことは、実際手を動かすとあっさり解決してしますこと多々あるので、とりあえず書け!!だなと痛感。
最後に、clip プロパティは、ちょっと仕様が複雑な手強いプロパティだな。