---
title: clip
slug: Web/CSS/clip
tags:
- CSS
- CSS Reference
translation_of: Web/CSS/clip
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><strong><code>clip</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のどの部分が可視であるかを定義します。 <code>clip</code> プロパティは絶対配置された要素、つまり {{cssxref("position","position:absolute")}} または {{cssxref("position","position:fixed")}} を持つ要素だけに適用されます。</span></p>
<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
clip: auto;
/* <shape> 値 */
clip: rect(1px, 10em, 3rem, 2ch);
/* グローバル値 */
clip: inherit;
clip: initial;
clip: unset;</pre>
<h2 id="Syntax" name="Syntax">構文</h2>
<div class="note">
<p><strong>注:</strong> 可能であれば、より新しい {{cssxref("clip-path")}} を使うことをお勧めします。</p>
</div>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt>{{cssxref("<shape>")}}</dt>
<dd><code>rect(<top>, <right>, <bottom>, <left>)</code> 形式の矩形の {{cssxref("<shape>")}} です。 <code><top></code> と <code><bottom></code> は、ボックス境界の上辺からのオフセットを表します。<code><right></code> と <code><left></code> は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。</dd>
<dd><code><top></code>、<code><right></code>、<code><bottom></code>、<code><left></code> の値は {{cssxref("<length>")}} または <code>auto</code> のいずれかです。<code>auto</code> が指定されると、その辺のボックス境界で切り取られます。</dd>
<dt><code>auto</code></dt>
<dd>要素はクリップされません (既定値)。ボックス境界で切り取る <code>rect(auto, auto, auto, auto)</code> とはまったく異なることに注意してください。</dd>
</dl>
<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
<p>{{cssinfo}}</p>
<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Clipping_an_image" name="Clipping_an_image">画像の切り抜き</h3>
<h4 id="CSS">CSS</h4>
<pre class="brush:css notranslate">.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);
}</pre>
<h4 id="HTML">HTML</h4>
<pre class="brush:html notranslate"><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></pre>
<h4 id="Result" name="Result">結果</h4>
<p>{{EmbedLiveSample('Clipping_an_image', '689px', '410px')}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS Masks', '#clip-property', 'clip')}}</td>
<td>{{Spec2('CSS Masks')}}</td>
<td><code>clip</code> プロパティを非推奨とし、代わりに {{cssxref("clip-path")}} を提案。</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("css.properties.clip")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>このプロパティは非推奨です。代わりに {{cssxref("clip-path")}} を使ってください。</li>
<li>関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}, {{cssxref("overflow")}}, {{cssxref("display")}}, {{cssxref("position")}}</li>
</ul>