【CSS Modules】rect()関数の使い方

rect()関数は、CSSにおいて、要素のクリッピング領域（表示される部分）を定義するために使用されていた関数です。この関数は、主に非推奨となったclipプロパティの値として指定され、要素の特定の矩形領域だけを表示し、それ以外の部分を隠す役割を担っていました。

rect()関数は、rect(top, right, bottom, left)という形式で記述します。それぞれの引数にオフセット値を指定し、これらの値は要素のそれぞれの辺からの距離を表します。具体的には、topは要素の上端からクリッピング領域の上端までの距離、rightは要素の右端からクリッピング領域の右端までの距離、bottomは要素の下端からクリッピング領域の下端までの距離、leftは要素の左端からクリッピング領域の左端までの距離を示します。これらのオフセット値は、通常、ピクセル（px）やemなどの単位付きの数値、またはauto（クリッピングなし）で指定されました。例えば、clip: rect(10px, 20px, 50px, 30px);と指定した場合、要素の上端から10px、右端から20px、下端から50px、左端から30pxの位置に境界線が引かれ、その内側の矩形領域が表示されることになります。

しかし、現在ではclipプロパティは非推奨とされており、より柔軟で強力なclip-pathプロパティが推奨されています。clip-pathプロパティは、polygon(), circle(), ellipse(), inset()など、多様な関数を使用して要素のクリッピング領域を定義できます。rect()関数で実現していた四角形のクリッピングは、clip-pathプロパティのinset()関数で代替可能です。inset()関数はinset(top right bottom left)のように、四方からのオフセットを直感的に指定できるため、より簡単に同様の機能を実現できます。

この関数は互換性のために残されていますが、新規開発においてはclip-pathプロパティとinset()関数を使用することが強く推奨されます。

Copy
1clip: rect(10px, 50px, 40px, 20px);

rect()関数は4つの引数を取ります。それぞれの引数は、lengthの値またはautoキーワードです。

<length> | auto, <length> | auto, <length> | auto, <length> | auto

• top: 上端の位置を指定する<length>またはauto
• right: 右端の位置を指定する<length>またはauto
• bottom: 下端の位置を指定する<length>またはauto
• left: 左端の位置を指定する<length>またはauto

Shape

rect() 関数は、要素の矩形領域を定義するために使用され、その領域を表す Shape 型の値を返します。