角丸

角丸

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

Info要点
角の丸みでは、要素の角をどの程度丸くするかを設定し、見た目に柔らかさを加えます。角の形状は、要素内のコンテンツに応じて、丸みのない角から緩やかな曲線、より大きな丸み、完全な円形や楕円形まで調整できます。

1. 説明

角の丸みでは、要素*要素ページへのリンク*の四隅の曲がり具合を指定します。たとえば、値を0pxにすると角が丸みのない直角になり、値を大きくするほど角が丸くなって、要素が柔らかく親しみやすい印象になります。［角丸］オプションを選択すると丸みが最大になり、正方形の要素は完全な円形、長方形の要素は楕円形になります。

  

2. 設定可能な値

角の丸みはドロップダウンから選択でき、0～24ピクセルの値と［角丸］オプションを使用できます。

値 動作
0px 要素のコンテナーの角を完全な直角にし、シャープで整った印象にします。

適している用途：区切り線、全面表示の画像、グリッドレイアウト。
6px～24pxのオプション 角の曲がり具合を、シャープな形状からより丸みのある形状へと段階的に大きくします。

適している用途：小さい値では、全体的に長方形の形状を保ちながら、わずかに柔らかな印象を与えます。入力欄、タグ、情報量の多いUI要素によく使用されます。大きい値では、明確な丸みのある形状になり、ヒーローセクションや装飾バナーに適しています。
［角丸］ 丸みを最大にし、正方形の要素は円形、長方形の要素は楕円形で表示します。

適している用途：アバターのコンテナー、アイコンバッジ、プロフィール画像、完全に丸く表示する要素。

3. 見た目の例

   

  

4. 角の丸みを設定するには

  1. 編集領域で要素を選択し、マウスを重ねたときに表示されるツールバーの［三点リーダー］をクリックして、右側に［プロパティ］パネルを開きます。
  2. パネル内の［角の丸み］アコーディオンをクリックして開きます。
  3. ドロップダウンをクリックし、［0px］、［6px］、［12px］、［16px］、［24px］、または［角丸］から目的のプリセット値を選択します。
  4. 変更内容を保持するには、右上の［保存］をクリックします。

5. 適用可能な要素

角の丸みは、以下の基本要素と複合要素で使用できます。また、すべてのプリセットにもスタイルプロパティとして表示されます。

  1. テキスト
  2. 画像
  3. アイコン
  4. キャンバス
  5. Hスタック
  6. Vスタック
  7. メニュー
  8. ボタン
  9. ポータルフォーム
  10. 埋め込み

6. メモ

  1. 角丸の動作：正方形の要素に［角丸］オプションを適用すると円形になり、長方形の要素に適用すると楕円形になります。完全な円形にするには、［角丸］を適用する前に、［レイアウト］*レイアウトのドキュメントへのリンク*で［幅］と［高さ］を同じ値に設定します。
  2. 角の丸みに合わせた枠線の切り抜き：［枠線］*枠線のドキュメントへのリンク*と［角の丸み］の両方を設定すると、枠線が丸みのある形状に沿い、角に合わせて切り抜かれます。
  3. 角の丸みに合わせた背景画像の切り抜き：［角の丸み］と［背景］*背景のドキュメントへのリンク*の画像の両方を設定すると、背景画像が丸みに合わせて切り抜かれます。

その他のプロパティ

  1. 配置
  2. レイアウト
  3. パディング
  4. マージン
  5. フォント
  6. 背景
  7. 枠線
  8. 影
  9. 不透明度
  10. 画像とアイコンのスタイル
  11. タブのスタイル
  12. スタック