CSSリファレンス

実践向けCSSリファレンス

要素を切り抜き表示(クリッピング)をする clip

概要

CSSプロパティ「clip」は、要素を切り抜き表示(クリッピング)をすることができます。切り抜き可能な形状は矩形のみとなっています。また、適用可能なプロパティとして、要素にposition プロパティの 「absolute」か「fixed」 が指定されている場合に限ります。

<div>
  <img src="http://www-creators.com/wp-content/uploads/2017/11/food_sample.jpg" width="150" height="187"> 
  <img class="clip" src="http://www-creators.com/wp-content/uploads/2017/11/food_sample.jpg" width="150" height="187"> 
</div>
<style>
div {
  border: 1px solid #000;
  position: relative;
}
.clip {
  position: absolute;
  top: 0px;
  left: 150px;
  clip: rect(20px, 200px, 100px, 20px);
}
</style>

値の指定方法

値はキーワードに続いて、切り取りたい距離を指定します。

{ clip: キーワード(値1, 値2, 値3, 値4); }
キーワード説明
auto初期値です。切り抜きは行われません
rectボックスの左上端を起点に上、右、下、左の順で距離を指定します

使用例

一つの画像の指定範囲を変えてみてみます。

<div> 
  <img class="clip" src="http://www-creators.com/wp-content/uploads/2017/11/food_sample.jpg" width="200" height="187">
  <img class="clip-2" src="http://www-creators.com/wp-content/uploads/2017/11/food_sample.jpg" width="200" height="187"> 
  <img class="clip-3" src="http://www-creators.com/wp-content/uploads/2017/11/food_sample.jpg" width="200" height="187"> 
</div>
<style>
  div {
    position: relative;
  }
  .clip {
    position: absolute;
    top: 0px;
    left: 0px;
    clip: rect(0px, 200px, 100px, 20px);
  }
  .clip-2 {
    position: absolute;
    top: 80px;
    left: 0px;
    clip: rect(50px, 100px, 120px, 20px);
  }
  .clip-3 {
    position: absolute;
    top: 150px;
    left: 0px;
    clip: rect(80px, 200px, 150px, 20px);
  }
</style>

仕様書

関連CSSプロパティ

閉じる