--- title: clip slug: Web/CSS/clip tags: - CSS - CSS Reference translation_of: Web/CSS/clip ---
{{CSSRef}}

clip は CSS のプロパティで、要素のどの部分が可視であるかを定義します。 clip プロパティは絶対配置された要素、つまり {{cssxref("position","position:absolute")}} または {{cssxref("position","position:fixed")}} を持つ要素だけに適用されます。

/* キーワード値 */
clip: auto;

/* <shape> 値 */
clip: rect(1px, 10em, 3rem, 2ch);

/* グローバル値 */
clip: inherit;
clip: initial;
clip: unset;

構文

注: 可能であれば、より新しい {{cssxref("clip-path")}} を使うことをお勧めします。

値

{{cssxref("<shape>")}}
rect(<top>, <right>, <bottom>, <left>) 形式の矩形の {{cssxref("<shape>")}} です。 <top> と <bottom> は、ボックス境界の上辺からのオフセットを表します。<right> と <left> は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。
<top>、<right>、<bottom>、<left> の値は {{cssxref("<length>")}} または auto のいずれかです。auto が指定されると、その辺のボックス境界で切り取られます。
auto
要素はクリップされません (既定値)。ボックス境界で切り取る rect(auto, auto, auto, auto) とはまったく異なることに注意してください。

公式定義

{{cssinfo}}

形式文法

{{csssyntax}}

例

画像の切り抜き

CSS

.dotted-border {
  border: dotted;
  position: relative;
  width: 536px;
  height: 350px;
}

#top-left,
#middle,
#bottom-right {
  position: absolute;
  top: 0;
}

#top-left {
  left: 360px;
  clip: rect(0, 175px, 113px, 0);
}


#middle {
  left: 280px;
  clip: rect(119px, 255px, 229px, 80px);
}

#bottom-right {
  left: 200px;
  clip: rect(235px, 335px, 345px, 160px);
}

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>

結果

{{EmbedLiveSample('Clipping_an_image', '689px', '410px')}}

仕様書

仕様書 状態 備考
{{SpecName('CSS Masks', '#clip-property', 'clip')}} {{Spec2('CSS Masks')}} clip プロパティを非推奨とし、代わりに {{cssxref("clip-path")}} を提案。
{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}} {{Spec2('CSS2.1')}} 初回定義

ブラウザーの互換性

{{Compat("css.properties.clip")}}

関連情報