【CSS Modules】clipプロパティの使い方

clipプロパティは、要素の表示される範囲を、矩形（四角形）に切り取って指定するためのプロパティです。このプロパティを使用すると、要素の全体ではなく、指定した矩形の領域内だけが可視化され、その外側の部分は非表示になります。これにより、要素の表示部分を限定的に制御することが可能です。

clipプロパティの値は、主にrect(top, right, bottom, left)という形式で記述します。ここで、top、right、bottom、leftは、それぞれ要素の左上隅を基準とした、上、右、下、左からのオフセット値（距離）を示します。これらの距離を指定することで、要素内で表示する正確な四角形の範囲を定義します。例えば、大きな画像の一部だけを表示したい場合などに利用できます。

ただし、clipプロパティが有効になるのは、対象の要素にpositionプロパティでabsoluteまたはfixedが設定されている場合に限られます。これらの指定がない場合、clipプロパティは効果を発揮しません。このプロパティは、特定の領域だけを見せたい、あるいは一時的に要素の一部を隠したいといった状況で活用されます。

Copy
1clip: rect(top, right, bottom, left);

引数なし

引数はありません

戻り値なし

戻り値はありません