crip

前回、【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.

11.1.2 Clipping: the 'clip' property : CSS 2.1

CLIPプロパティがもてる値

上記の3つを持つことが出来ます。 CSS 2.1での、唯一有効な<shape>値は、 rect()のみ です。

CLIPプロパティにautoを指定すると、要素はクリップしません。

そして、もうひとつ大事なことは、Applies to:にあるように、絶対位置のエレメントであること。これは、 position: absolute でなければいけないということ。

では、その唯一の<shape>値rectの使い方です。

THE RECT() FUNCTION

bubble-85009_64

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

11.1.2 Clipping: the 'clip' propertyの図

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' for and , 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をフルサイズで表示したい場合、

と、上記のように記載することが出来ます。

サポートブラウザ

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以下を対象とする場合は、以下のように記載します。

CSSのCLIPプロパティを使ってみる

デモを作ってみました。

対応ブラウザ Google Chrome / Safari / Firefox / Opera/ InternetExplorer

デモのコード

画像のサイズは、300px × 225px です。

/* HTML */ /* CSS */

デモを作成する際につまずいたこと

2点つまずきました。

  • IE6 でのホバー時の動作が上手くいかない
  • clip: auto;を試してみたらIEでは動作しない

このうちの、IE6 でのホバー時の動作が上手くいかないは、こちらのサイトで解決方法があり、参考にさせていただきました。

これを追記することで正常に動作しました。

次の、clip: auto;を試してみたらIEでは動作しないというのは、

だと、正常に動作したのですが、clip: auto; での解決方法は未だ見つからずです。

まとめ

はてな?が頭に浮かぶこと山の如しぐらいになりましたが、そのはてなが多く出たのが以下の2点。

  • CSS2の仕様とCSS2.1の仕様の変更を理解する
  • RECT()関数がどのように動作するかを理解する

CSS2の仕様とCSS2.1の仕様の違いを先に見てしまい、実動作を見なかったので、脳内でいろいろとグルグルしました。

こういったことは、実際手を動かすとあっさり解決してしますこと多々あるので、とりあえず書け!!だなと痛感。

最後に、clip プロパティは、ちょっと仕様が複雑な手強いプロパティだな。

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る