非推奨
この機能はウェブ標準から削除されました。まだ対応しているプラウザーがあるかもしれませんが、ゆくゆくはなくなるものです。使用を避け、できれば既存のコードを更新してください。このページの下部にあるブラウザーの対応を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
CSS の clip プロパティは、要素のどの部分が可視であるかを定義します。clip プロパティは絶対配置された要素、つまり position:absolute または position:fixed を持つ要素だけに適用されます。
/* キーワード値 */ clip: auto; /* <shape> 値 */ clip: rect(1px 10em 3rem 2ch); clip: rect(1px, 10em, 3rem, 2ch); /* グローバル値 */ clip: inherit; clip: initial; clip: unset;
構文
警告: このプロパティは非推奨です。代わりに clip-path を使ってください。
| 初期値 | auto |
|---|---|
| 適用対象 | 絶対位置指定された要素 |
| 継承 | なし |
| メディア | 視覚 |
| 計算値 | auto 指定されていれば auto、それ以外は 4 つの値をともなう矩形。矩形の場合、各値は auto 指定されていれば auto、それ以外では計算値 |
| アニメーションの種類 | rectangle |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
値
<shape>rect(<top>, <right>, <bottom>, <left>)またはrect(<top> <right> <bottom> <left>)(こちらの構文のほうが後方互換性がある) という<shape>の形式で記述した矩形です。<top>と<bottom>は、ボックス境界の上辺からのオフセットを表します。<right>と<left>は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。<top>、<right>、<bottom>、<left>の値は<length>またはautoのいずれかです。autoが指定されると、その辺のボックス境界で切り取られます。auto- 要素はクリップされません (デフォルト値)。ボックス境界で切り取る
rect(auto, auto, auto, auto)とは全く異なることに注意してください。
形式的構文
<shape> | autowhere
<shape> = rect(<top>, <right>, <bottom>, <left>)
例
CSS
.dotted-border {
border: dotted;
position: relative;
width: 536px;
height: 350px;
}
#top-left, #middle, #bottom-right {
position: absolute;
top: 0px;
}
#top-left {
left: 360px;
clip: rect(0px, 175px, 113px, 0px);
}
#middle {
left: 280px;
clip: rect(119px, 255px, 229px, 80px);
/* 標準的な構文。Internet Explorer 4-7 では非サポート */
}
#bottom-right {
left: 200px;
clip: rect(235px 335px 345px 160px);
/* 非標準的な構文。Firefox と IE を含む主要ブラウザすべてでサポートされています */
}
HTML
<p class="dotted-border"> <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic"> <img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left"> <img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle"> <img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right"> </p>
結果
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Masking Module Level 1 clip の定義 |
勧告候補 | clip プロパティを非推奨とし、代わりに clip-path を提案。 |
| CSS Transitions clip の定義 |
草案 | clip をアニメーション可能として定義。 |
| CSS Level 2 (Revision 1) clip の定義 |
勧告 | 初期定義 |
ブラウザー実装状況
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
clip | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 1 | IE
完全対応
4
| Opera 完全対応 7 | Safari
完全対応
1
| WebView Android 完全対応 37 | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android ? | Safari iOS
完全対応
1
| Samsung Internet Android ? |
凡例
- 完全対応
- 完全対応
- 実装状況不明
- 実装状況不明
- 非推奨。新しいウェブサイトでは使用しないでください。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 実装ノートを参照してください。
- 実装ノートを参照してください。
関連情報
- このプロパティは非推奨です。代わりに
clip-pathを使ってください。 - 関連する CSS プロパティ:
text-overflow,white-space,overflow-x,overflow-y,overflow,display,position