CSS xywh() 関数でレイアウトに適した図形を描画する

コンテナに合わせてスケールするクリップされた矩形が必要だとします。clip-path を使おうとしますが、図形の定義が直感的ではありません。各エッジからのインセット値を計算すべきでしょうか?コンテナのサイズが変わったらどうなるのでしょうか?

CSS の xywh() 関数は、矩形を直感的な方法で定義できるようにすることで、この問題を解決します。つまり、開始点と寸法を指定するだけです。現在、すべてのエバーグリーンブラウザでベースラインサポートされており、本番環境対応のレスポンシブクリッピングに信頼できる選択肢となっています。

CSS xywh() 関数とは?

xywh() 関数は、4つの値を指定することで矩形の基本図形を作成します。左上隅の x 座標と y 座標、その後に幅と高さを指定します。この関数は、inset()、circle()、ellipse()、polygon() と並ぶ CSS 基本図形ファミリーに属しています。

.element {
  clip-path: xywh(10% 10% 80% 80%);
}

これは、左から10%、上から10%の位置から始まり、幅の80%、高さの80%にわたる矩形に要素をクリップします。4つの値すべてが任意の <length-percentage> 単位を受け入れるため、レスポンシブクリッピングが簡単になります。

ブラウザサポート:2025年に本番環境対応

xywh() 関数は Baseline 2024 ステータスに到達し、以下のブラウザで動作します:

• Chrome/Edge 119+
• Firefox 122+
• Safari 17.2+

これはフラグやポリフィルを必要とする実験的技術ではありません。xywh() を使用した最新の CSS 図形は、ユーザーが使用するすべての現行ブラウザで確実に動作します。

構文とパラメータ

この関数は、4つの必須値と1つのオプションキーワードを受け入れます:

clip-path: xywh(x y width height round border-radius);

位置値 (x, y): 参照ボックスの左端と上端からの距離。

寸法値 (width, height): 矩形のサイズ。これらは非負である必要があります。

Round キーワード: オプション。含まれている場合、border-radius と同じ構文を使用して角丸を有効にします。

/* 鋭角のコーナー */
clip-path: xywh(0 0 100% 100%);

/* 均一な丸み */
clip-path: xywh(5% 5% 90% 90% round 12px);

/* 非対称な丸み */
clip-path: xywh(0 0 100% 100% round 20px 0 20px 0);

パーセンテージによるレスポンシブクリッピング

xywh() の真の力は、パーセンテージ値を使用するときに発揮されます。固定ピクセル値とは異なり、パーセンテージはコンテナサイズの変更に自動的に対応します。

.card-image {
  clip-path: xywh(5% 5% 90% 90% round 8px);
}

これにより、カードの寸法に関係なく比例した間隔を維持するレスポンシブな clip-path レイアウトが作成されます。より複雑なレスポンシブパターンには、ビューポート単位や calc() と組み合わせます:

.hero-clip {
  clip-path: xywh(
    2vw 
    2vh 
    calc(100% - 4vw) 
    calc(100% - 4vh) 
    round 1rem
  );
}

xywh() vs. inset():適切な関数の選択

両方の関数は矩形を作成しますが、アプローチが異なります。

inset() を使用する場合は、各エッジからのマージンを定義するとき:

/* すべてのエッジから内側に20px */
clip-path: inset(20px);

xywh() を使用する場合は、明示的な位置とサイズの制御が必要なとき:

/* 特定の座標と特定の寸法を持つ矩形 */
clip-path: xywh(50px 50px 200px 150px);

xywh() 関数は、図形をアニメーション化する場合や、要素のエッジと直接相関しない矩形が必要な場合に優れています。inset() で図形を移動するには、4つのエッジ値すべてを再計算する必要があります。xywh() では、x 座標と y 座標のみを調整します。

実用的な応用例

一貫したパディングを持つ画像マスク:

.thumbnail {
  clip-path: xywh(4% 4% 92% 92% round 6px);
}

カードのコーナー処理:

.feature-card {
  clip-path: xywh(0 0 100% 100% round 16px 16px 0 0);
}

アニメーション表示効果:

.reveal {
  clip-path: xywh(0 0 0% 100%);
  transition: clip-path 0.3s ease-out;
}

.reveal:hover {
  clip-path: xywh(0 0 100% 100%);
}

今後の展望:shape() 関数

より新しい shape() 関数は、複雑なパスに対してさらに柔軟性を提供しますが、xywh() は矩形図形に適したツールであり続けます。よりシンプルで読みやすく、今日完全にサポートされています。

まとめ

CSS の xywh() 関数は、レスポンシブレイアウトに自然にスケールする矩形クリッピングのための、クリーンで直感的な構文を提供します。パーセンテージベースの値により、コンテナのサイズが変更されたときの手動計算が不要になり、角丸のための馴染みのある border-radius 構文により、コードの一貫性が保たれます。

静的マスクでもアニメーション表示でも、矩形を必要とする任意の clip-path レイアウトにおいて、xywh() は現在、すべての最新ブラウザで本番環境対応の選択肢となっています。

よくある質問

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..