1. ウェブ
  2. CSS
  3. リファレンス
  4. プロパティ
  5. clip

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

clip

Deprecated

Avoid using this feature in new projects. The CSS Masking specification deprecated the clip property. This feature may be a candidate for removal from web standards or browsers.

Consider using the following features instead: clip-path.

警告: 作成者は、代わりに clip-path プロパティを使用することをお勧めします。

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

構文

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

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

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

値

rect()

rect() 関数を使用して、 rect(<top>, <right>, <bottom>, <left>) の形で定義された長方形。 <top> と <bottom> は、ボックス境界の上辺からのオフセットを表します。<right> と <left> は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。

<top>、<right>、<bottom>、<left> の値は <length> または auto のいずれかです。auto が指定されると、その辺の境界線の内側で切り取られます。

メモ: 非推奨の clip プロパティで使用される <shape> 関数の rect() は、 CSS で <basic-shape> を定義するために使用する CSS の rect() 関数とは異なります。

auto

要素はクリップされません（既定値）。ボックス境界で切り取る rect(auto, auto, auto, auto) とはまったく異なることに注意してください。

公式定義

初期値auto
適用対象絶対位置指定された要素
継承なし
計算値auto が指定されていれば auto、それ以外は 4 つの値をともなう矩形。矩形の場合、各値は auto が指定されていれば auto、それ以外では長さの計算値
アニメーションの種類rectangle

形式文法

clip = 
  <rect()>  |
  auto      

<rect()> = 
  rect( <top> , <right> , <bottom> , <left> )
この構文は CSS Masking Module Level 1 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

画像のクリップ

html
<p class="dotted-border">
  <img src="macarons.png" alt="Original graphic" />
  <img id="top-left" src="macarons.png" alt="Graphic clipped to upper left" />
  <img id="middle" src="macarons.png" alt="Graphic clipped towards middle" />
  <img
    id="bottom-right"
    src="macarons.png"
    alt="Graphic clipped to bottom right" />
</p>
css
.dotted-border {
  border: dotted;
  position: relative;
  width: 390px;
  height: 400px;
}

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

#top-left {
  left: 400px;
  clip: rect(0, 130px, 90px, 0);
}

#middle {
  left: 270px;
  clip: rect(100px, 260px, 190px, 130px);
}

#bottom-right {
  left: 140px;
  clip: rect(200px, 390px, 290px, 260px);
}

仕様書

仕様書
CSS Masking Module Level 1
# propdef-clip

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告