最終更新日 2021年6月6日

clipプロパティ

clipは、ボックスをクリッピングするためのプロパティです。

クリッピングとは、おもに出版業界や音楽業界で使用される用語で、「指定した範囲からはみだした部分を表示しないようにする処理」のことです。

クリッピング範囲の指定方法は、「rect」「inset」の2種類があります。

「rect」の場合は、「clip: rect(30px, 100px, 70px, 25px);」のように、ボックスの左または上からの距離を「px」「%」などの単位を付けて、上→右→下→左の順にカンマで区切って指定します。

「inset」の場合は、「clip: inset(30px, 0px, 30px, 25px);」のように、ボックスの四辺からの距離を「px」「%」などの単位を付けて、上→右→下→左の順にカンマで区切って指定します。

クリッピング範囲の指定方法

CSS3での変更点

・クリッピング範囲を「inset」で指定できるようになりました。

初期値	適用先	継承
auto	positionプロパティの「absolute」か「fixed」状態の要素	なし

値	説明
auto	クリッピングされません。ボックス全体が表示されます。（初期値）
rect(上, 右, 下, 左)	ボックスの左または上からの距離を「px」「%」などの単位を付けて、上→右→下→左の順にカンマで区切って指定します。
inset(上, 右, 下, 左)	ボックスの四辺からの距離を「px」「%」などの単位を付けて、上→右→下→左の順にカンマで区切って指定します。

サンプルコード

clip: auto;
clip: rect(30px, 100px, 70px, 25px);
clip: rect(30%, 100%, 70%, 25%);
clip: inset(30px, 0px, 30px, 25px);
clip: inset(30%, 0%, 30%, 25%);

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。