メインコンテンツにスキップ
ボックスの角丸設定

ボックスに角丸を設定する

Saika avatar
対応者:Saika
2か月以上前に更新

ボックスの角丸設定方法

STUDIOでは、ボックスの角を丸くする「角丸」機能があります。この機能を使うことで、デザインに柔らかさを加えたり、特定の要素を強調したりできます。

角丸設定のユースケース

  • ボタンデザイン:クリックしやすい印象を与える

  • 画像ボックス:写真やイラストに柔らかな印象を加える

角丸の調整方法

角丸の調整には、以下の2つの方法があります:

  1. 四隅を一括で編集する

  2. 四隅を個別に編集する

便利なショートカット

  • Shiftキーを押しながらアンカーポイントを動かすと、10の倍数で数値が変化します。

  • option(WindowsではAlt)キーを押しながらアンカーポイントを操作すると、一括編集と個別編集を切り替えられます。

四隅を一括で編集する方法

  1. ボックスを選択します。

  2. 以下のいずれかの方法で調整します:

    • ボックス選択枠の左上隅にあるアンカーポイント(調整ハンドル)をドラッグする

    • スタイルバーの「角丸」セクションで「一括調整」を選び、数値を入力する

四隅を個別に編集する方法

  1. ボックスを選択します。

  2. 以下のいずれかの方法で調整します:

    • ボックス選択枠の各隅にあるアンカーポイントをドラッグする

    • スタイルバーの「角丸」セクションで「個別調整」を選び、各隅の数値を入力する

border-radius radius 楕円 丸み

こちらの回答で解決しましたか?