【CSS Modules】xywh()関数の使い方
xywh()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
xywh()関数は、ウェブページ上で四角形の領域を定義するために使用されるCSS関数です。この関数は、主にclip-pathやshape-outsideといったCSSプロパティの値として利用され、要素の表示範囲を特定の四角形に限定したり、テキストの回り込み形状を制御したりする際に役立ちます。
xywh()関数は4つの引数を取ります。最初の2つの引数「x」と「y」は、定義する四角形の左上隅の水平位置（X座標）と垂直位置（Y座標）を指定します。これらの座標は、通常、対象となる要素の参照ボックス（例えば、親要素や自身）の左上隅を基準として計測されます。続く2つの引数「width」と「height」は、それぞれ四角形の幅と高さを定義します。これらの引数には、ピクセル（px）、パーセンテージ（%）、ビューポート単位（vw, vh）、またはその他の適切なCSS単位を指定できます。
例えば、clip-path: xywh(10% 20% 50% 30%)と記述すると、要素の表示領域は、その参照ボックスの左上から10%右、20%下の位置を始点とし、幅が参照ボックスの50%、高さが30%の四角形に切り抜かれます。このように、xywh()関数を使用することで、コンテンツのレイアウトやデザインに柔軟な整形と視覚的な効果をもたらすことが可能です。
構文(syntax)
1xywh(0px, 0px, 100%, 200px)
引数(parameters)
<length-percentage>, <length-percentage>, <length-percentage>, <length-percentage>
- <length-percentage>: 要素の左端からのX座標を指定する長さまたはパーセンテージ
- <length-percentage>: 要素の上端からのY座標を指定する長さまたはパーセンテージ
- <length-percentage>: 要素の幅を指定する長さまたはパーセンテージ
- <length-percentage>: 要素の高さを指定する長さまたはパーセンテージ
戻り値(return)
xywh() 関数は、矩形（長方形）の形状を定義する <basic-shape> 型の値を返します。この値は、CSS における要素の形状をクリッピングしたり、レイアウトの基準点やサイズを指定したりする際に使用されます。