要素の一部を切り取って表示する
CSSの書き方
clip:rect(上座標 右座標 下座標 左座標) ;
|
|||||||||||||||||||||||||||||||||||||||||
解説
一度表示した要素は「clip」プロパティでその一部を切り取ることができます。ただし、「clip」プロパティを指定する要素には同時に「position:absolute;」が指定されていなければなりません。
値の指定の仕方
「clip」プロパティは切り取る部分ではなく、切り取った残りの部分を座標によって指定します。値は「clip:rect(上 右 下 左);」のように、右回り（clockwise）で指定します。基準となる点は、「clip」プロパティを指定する要素の左上です。
切り取った残りの部分を要素の左上を基準に指定しますので、上と左の座標は切り取る長さを、下と右については切り取られて残った長さを指定することになります。
従って、例えば縦横100ピクセルの要素の周囲を10ピクセル削る場合は、「clip:rect(10px 90px 90px 10px);」と記述します。
CSS/HTMLサンプル
p {
width:200px;
height:200px;
background-color:#ffdff9;
position:absolute;
top:50px;
left:50px;
}
p.del { left:300px; clip:rect(20px 180px 180px 20px); }
通常の段落要素と周囲を20ピクセル削った要素を並べて表示 サンプル
