clip: rect(***);
- ブラウザ
- 特性
- clip
clip は、要素の切り抜き領域を指定するプロパティです。
※この指定は、positionプロパティで absolute または fixed を指定している場合に有効です。
このプロパティをimg要素に対して設定すると、画像を切り抜くことができます。
img {
position: absolute;
clip: rect(50px 500px 300px 100px);
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| clip | rect(上 右 下 左) | 各辺までの距離を数値+単位（px 等）で指定 |
初期値は auto（切り抜かない）です。
【値の指定方法】
rect( ) … ( ) 内に、上、右、下、左の順で4つの値を指定します。それぞれの値は半角スペースで区切って記述します。
※CSS 2.1の仕様に従う場合は、半角スペースではなくカンマ（ , ）で区切る必要があります。（ただし、カンマ区切りはIEでは対応していません）
【領域の指定方法】
表示される領域を、画像（実際の領域）の上端と左端からの距離で指定します。
rect(上辺の距離 右辺の距離 下辺の距離 左辺の距離)
- 上辺の距離 … 画像の上端から「上辺」までの距離を指定
- 右辺の距離 … 画像の左端から「右辺」までの距離を指定
- 下辺の距離 … 画像の上端から「下辺」までの距離を指定
- 左辺の距離 … 画像の左端から「左辺」までの距離を指定
例えば次のように指定されている場合は、「表示される領域」の大きさは 400px×250px になります。
rect(50px 500px 300px 100px)
また、次のように auto（切り抜かない）を指定することもできます。
rect(50px auto auto 100px)
領域の指定方法については、ブラウザの対応状況の関係上、CSS 2.1の仕様をベースにして説明しています。（CSS 2とCSS 2.1では、領域の指定方法が大きく異なります）
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
p.example {
height: 300px;
margin-bottom: 1em;
position: relative;
}
p.example img {
position: absolute;
clip: rect(50px 250px 190px 40px);
}
</style>
</head>
<body>
<p class="example"><img src="tama.jpg" alt="［写真］" width="300" height="225"></p>
</body>
</html>
表示例
※以下の写真が元の大きさになります。
- サイト内検索
