clip
切り抜き
| ブラウザ |
|
|---|---|
| 適用対象 |
|
| 継承 | 継承しない |
| 初期値 |
auto
|
| メディア |
|
要素の切り抜き領域を指定するプロパティです。
この指定は、positionプロパティで absolute または fixed を指定している場合に有効です。
- このプロパティについては、ブラウザの対応状況の関係上、CSS 2.1の仕様をベースにして説明しています。
clip: rect(50px 500px 300px 100px);
| プロパティ名 | 値 | 説明 |
|---|---|---|
clip |
auto |
切り抜かない （初期値） |
rect(長さ) |
数値+単位（px 等） |
- 長さには、上、右、下、左の順で4つ値を指定します。それぞれの値は、カンマ（
,）または半角スペースで区切って記述します。（IEではカンマ区切りに対応していないため、半角スペースで区切ることをお勧めします）（ただし、CSS 2.1の仕様では、カンマで区切る必要があるとされています）
切り抜き領域の指定方法
rect(上辺の距離 右辺の距離 下辺の距離 左辺の距離)
上記の図のように、それぞれの値はボックス（実際の領域）の上端と左端を基準とした距離で指定することになります。
rect(50px 500px 300px 100px)
例えば上記のように指定されている場合は、表示される領域の大きさは 400px×250px になります。
500px（右辺） - 100px（左辺） = 400px（幅）
300px（下辺） - 50px（上辺） = 250px（高さ）
- このプロパティに関連する目的別リファレンス
- 画像を切り抜く