clipプロパティの説明
clip
は、要素を切り抜いて可視化する範囲を指定します。この機能は、
position
で絶対位置を指定された要素に対してのみ有効です。
切り抜く範囲はボックスと同じ大きさになり、
top
、
right
、
bottom
、
left
という4つの値によって、ボックスの各辺からの距離を指定します。切り抜かれた部分の外側については、
overflow
で表示方法を指定します。
clip
の役目は終了しました。新しく作成するページには、より新しい
clip-path
を採用して下さい。
clipに指定できる値
切り抜きを行いません。自動的にボックスの境界で切り抜く
rect(auto, auto, auto, auto)
とは異なることに注意して下さい。これが初期値です。
<shape>
rect()
で表す短形の値です。
top
と
bottom
は、ボックスの範囲において上辺からのオフセットを表します。
right
と
left
は、ボックスの範囲において左辺からのオフセットを表します。
clipの実例
それでは実際に
clip
プロパティの書き方を見ていきましょう。以下の例では、300x200pxの画像を
clip
でトリミングした場合に、どのように表示されるかを確認します。この効果を期待する要素には、
position
で絶対位置の値を指定しなければなりません。
.samp_box {
margin: 1rem 0 0;
padding: 0 1rem 1rem 1rem;
.samp_box > div {
position: relative;
margin-top: 1rem;
#clip > img {
position: absolute;
top: 1rem;
left: 0;
clip: rect(20px, 200px, 100px, 20px);
<section class="samp_box">
<div>元画像です。</div>
<img src="../images/sample_img300x200.png" alt="参考画像">
<div id="clip">
<div>clip: rect(20px, 200px, 100px, 20px);</div>
<img src="../images/sample_img300x200.png" alt="参考画像">
</section>
