概要
CSSプロパティ｢clip｣は、要素を切り抜き表示（クリッピング）をすることができます。切り抜き可能な形状は矩形のみとなっています。また、適用可能なプロパティとして、要素にposition プロパティの ｢absolute｣か｢fixed｣ が指定されている場合に限ります。
<div>
<img src="https://www-creators.com/wp-content/uploads/2017/11/food_sample.jpg" width="150" height="187">
<img class="clip" src="https://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="https://www-creators.com/wp-content/uploads/2017/11/food_sample.jpg" width="200" height="187">
<img class="clip-2" src="https://www-creators.com/wp-content/uploads/2017/11/food_sample.jpg" width="200" height="187">
<img class="clip-3" src="https://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>