clip

非推奨
この機能はウェブ標準から削除されました。まだ対応しているプラウザーがあるかもしれませんが、ゆくゆくはなくなるものです。使用を避け、できれば既存のコードを更新してください。このページの下部にあるブラウザーの対応を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

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> | auto
where 
<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 の定義		 勧告 初期定義

ブラウザー実装状況

 

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
clip
非推奨
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4
補足
完全対応 4
補足
補足 Before Internet Explorer 7, Internet Explorer incorrectly interprets clip: auto as clip: rect(auto, auto, auto, auto).
Opera 完全対応 7Safari 完全対応 1
補足
完全対応 1
補足
補足 Safari incorrectly interprets clip: auto as clip: rect(auto, auto, auto, auto).
WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 1
補足
完全対応 1
補足
補足 Safari incorrectly interprets clip: auto as clip: rect(auto, auto, auto, auto).
Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。

 

関連情報