【clip】見える範囲を指定する

clipプロパティでは、ボックスの見える範囲を指定し、切り抜いたように表示(クリッピング)することができます。

切り抜いて表示したい範囲をrect(上,右,下,左)というように記述し、見える範囲を矩形で指定して下さい。 「上」と「下」の部分には、ボックスのボーダーの上からの距離、「右」と「左」には、ボックスのボーダーの左からの距離を指定します。 この時基準となるのは、ボックスのボーダーの外側の辺となりますが、マージンは含まれないので気を付けて下さい。

rect(上,右,下,左)の設定方法

また上下左右には、数値に単位を付けて指定する他、autoを設定することもできます。 他にも数値に負の値を指定する事も可能です。

なお上記はCSS2.1での指定方法となりますが、CSS2の仕様では「ボックスの四辺の端から内側への距離」を指定することになっています。 ですが一般的なブラウザの場合は、CSS2.1の仕様に準拠していますので注意して下さい。

clipプロパティを有効にするには、併せてpositionプロパティで「absolute」または「fixed」を指定する必要があります。

※Internet Explorer7以下の場合は、上下左右の部分をカンマ「,」で区切るのではなく、半角スペースで区切らないと正しく適用されないようです。

書式

  • clip : ……… 見える範囲を指定する

★:rect(上,右,下,左)、inherit

auto
ボックス全体を表示します。切り抜きは行われません(初期値)
rect(上,右,下,左)
見える範囲を矩形で指定します。ボックスの上辺と左辺を基準として、そこからの距離をカンマ「,」で区切って順番に指定します。

使用した時の例

div {min-height:150px;}
img {position:absolute; width:200px; height:150px;}

.sample1 {clip: rect(30px,150px,140px,40px);}
.sample2 {clip: rect(30px 150px 140px 40px);}
<div>
  <p>通常の画像</p>
  <img src="image.jpg">
</div>
<div>
  <p>clip(カンマ区切りの場合)</p>
  <img class="sample1" src="image.jpg">
</div>
<div>
  <p>clip(スペース区切りの場合)</p>
  <img class="sample2" src="image.jpg">
</div>

ブラウザ上の表示例

通常の画像

clip(カンマ区切りの場合)

clip(スペース区切りの場合)

対応ブラウザなどのデータ

初期値 auto 値の継承 継承しない
適用可能な要素 positionプロパティのabsolute、fixedで絶対配置されてる要素
メディア visual / positioning
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera7~ , Safari1~

関連情報