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

inset()関数は、CSSの図形関数の一つで、主に要素の表示領域を定義したり、テキストの回り込み形状を設定したりするために使用される、矩形（四角形）のパスを作成する関数です。この関数は、要素の上下左右の辺から内側へ指定した距離だけオフセットされた四角形を定義します。

具体的には、clip-pathプロパティに指定することで要素の一部を矩形に沿って切り抜いたり、shape-outsideプロパティに指定することでテキストが要素の周囲をどのように回り込むかを制御したりする際に利用されます。

inset()関数には、オフセットの距離を一つから四つまで指定できます。例えば、inset(10px)と指定すると、要素の上下左右すべての辺から内側に10ピクセル分のオフセットを持つ矩形が作成されます。inset(10px 20px)のように二つの値を指定すると、最初の値が上下のオフセット、二番目の値が左右のオフセットとなります。また、inset(10px 20px 30px 40px)のように四つの値を指定すると、上、右、下、左の順（時計回り）にそれぞれの辺からのオフセット距離を指定できます。

さらに、オプションとしてroundキーワードとborder-radiusの値を組み合わせることで、作成される矩形の角を丸くすることも可能です。例えば、inset(10px round 5px)は、四辺から10ピクセル内側にオフセットされ、かつ角が5ピクセル丸められた矩形を定義します。

このようにinset()関数は、複雑なパス定義をすることなく、基本的な四角形ベースの図形操作を簡潔に記述できるため、Webデザインやレイアウトにおいて柔軟な表現を可能にします。

Copy
1clip-path: inset(10px 20px 30px 40px);

top <length-percentage>, right <length-percentage>, bottom <length-percentage>, left <length-percentage>, round <border-radius>

• top: 要素の上辺からのオフセットを指定します。単位は長さ（px、emなど）またはパーセンテージで指定できます。
• right: 要素の右辺からのオフセットを指定します。単位は長さ（px、emなど）またはパーセンテージで指定できます。
• bottom: 要素の下辺からのオフセットを指定します。単位は長さ（px、emなど）またはパーセンテージで指定できます。
• left: 要素の左辺からのオフセットを指定します。単位は長さ（px、emなど）またはパーセンテージで指定できます。
• round: 角丸の半径を指定します。border-radius プロパティと同様の値を指定できます。

戻り値なし

戻り値はありません