デザイン さらに詳細 D · 日常使用または特別用途の名前

Border Radius & Squircle — Learning Bundle

ボーダー半径 & スクァークル — ラーニングバンドル

このガイドは3つのアイデアを分けています。それは標準的なCSSのborder-radius、試作コーナー形状:スクワイアクル、その他のスクワイアクルに似た形状やプラットフォームマスクです。このバンドルは標準的なデザイン用語ではありません。

仕組みを見る
そう呼ぶかもしれません Border Radius & Squircle — Learning Bundleボーダー半径 vs スクァークル ラーニングバンドル角形のレッスンスーパーエリプス比較プラットフォームアイコンマスク

仕組みを見る

元の作業例ボーダー半径 & スクァークル — ラーニングバンドル

もう一つの例

design-systemのエンジニアは、24 pxのborder-radiusのフォールバックをテストします。対応しているブラウザには、ドラフト版のsquircle cornerも適用されます。メモには、app-icon maskは別のプラットフォーム用アセットと書かれています。だからといって、そのCSSのキーワードが使われていることの証明にはなりません。

主な部分

  1. 01Content surface
  2. 02Distinct visual treatment
  3. 03Action and readability check

以下の場合に使用します

角の形状、ブラウザサポート、フォールバック動作を選択し記録するには、このガイドを使用してください。また、ウェブの角とカスタムまたはプラットフォームの形状を分けています。

以下の場合は使用しないでください

すべての角丸四角形がスクワイクルというわけではない。大きな半径はドラフト CSS 値ではない。フェールバックとクリッピングをテストせずに実験的な角を出荷してはいけない。

コードで使用する名前

border-radius + @supports (corner-shape: squircle)

出荷前に

Check that every member concept has its own name and link. Show all members in the same situation. Give a visible rule for when each one applies and which groups are valid. Never present the bundle as one canonical pattern or as parts that can be swapped freely.

コピーできるリクエスト

Outcome:Complete the task with ボーダー半径 & スクァークル — ラーニングバンドル (Border Radius & Squircle — Learning Bundle)。 User context:design-systemのエンジニアは、24 pxのborder-radiusのフォールバックをテストします。対応しているブラウザには、ドラフト版のsquircle cornerも適用されます。メモには、app-icon maskは別のプラットフォーム用アセットと書かれています。だからといって、そのCSSのキーワードが使われていることの証明にはなりません。 Learning bundle to unpack:ボーダー半径 & スクァークル — ラーニングバンドル (Border Radius & Squircle — Learning Bundle)。 Canonical members:CSSボーダー半径 (CSS Border Radius)、CSSスクワークリコーナー (CSS Squircle Corner) Why this comparison helps:角の形状、ブラウザサポート、フォールバック動作を選択し記録するには、このガイドを使用してください。また、ウェブの角とカスタムまたはプラットフォームの形状を分けています。 Do not treat the bundle as one pattern when:すべての角丸四角形がスクワイクルというわけではない。大きな半径はドラフト CSS 値ではない。フェールバックとクリッピングをテストせずに実験的な角を出荷してはいけない。 Comparison requirements: Name every member concept on its own. Explain its job and limits. Show every member in the same real situation. Give a visible sign for when to use, combine, or leave out each member. Decision quality: Keep platform and evidence limits clear. Show which members can work together. Point out false matches, unsafe swaps, and cases that need another concept. Acceptance criteria: A reader can explain each member in one sentence and tell them apart in the example. They can defend the chosen member or valid group and open every canonical guide. Evidence and limits (evidence boundary):これは規範的な標準ではありません。その名前、制限、および期待される挙動は、情報源によって変わる可能性があります。 Unknowns to confirm: Target platform, decision setting, limits, and evidence needed to use, combine, or leave out members.

このリクエストを確認する

Review how ボーダー半径 & スクァークル — ラーニングバンドル (Border Radius & Squircle — Learning Bundle) is used now. Definition: このガイドは3つのアイデアを分けています。それは標準的なCSSのborder-radius、試作コーナー形状:スクワイアクル、その他のスクワイアクルに似た形状やプラットフォームマスクです。このバンドルは標準的なデザイン用語ではありません。 Release checks: Check that every member concept has its own name and link. Show all members in the same situation. Give a visible rule for when each one applies and which groups are valid. Never present the bundle as one canonical pattern or as parts that can be swapped freely. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.

D
この用語はどれくらい公式か?

日常使用または特別用途の名前

これは日常的または古い名前、1つの会社で使用される名前、またはVibularyのカテゴリである可能性があります。情報源は実践や制限をサポートする場合がありますが、名前を定義するものではありません。

これは規範的な標準ではありません。その名前、制限、および期待される挙動は、情報源によって変わる可能性があります。

範囲
単一の正式文書ですべてをカバーしていません
ドキュメントステータス
該当なし
チェックオン
2026-07-30

証拠の情報源と範囲

背景ソース単一の権威ある定義なしこの名前は職場で使われますが、公式な情報源で全てを定義しているものはありません。Vibularyは学習の助けとしてこの意味と例を書きました。

自分でコピーする

ブラウザはこれをコピーできませんでした。下のリクエストを選択して自分でコピーしてください。