ボックスの角丸設定方法
STUDIOでは、ボックスの角を丸くする「角丸」機能があります。この機能を使うことで、デザインに柔らかさを加えたり、特定の要素を強調したりできます。
角丸設定のユースケース
ボタンデザイン:クリックしやすい印象を与える
画像ボックス:写真やイラストに柔らかな印象を加える
角丸の調整方法
角丸の調整には、以下の2つの方法があります:
四隅を一括で編集する
四隅を個別に編集する
便利なショートカット
Shiftキーを押しながらアンカーポイントを動かすと、10の倍数で数値が変化します。
option(WindowsではAlt)キーを押しながらアンカーポイントを操作すると、一括編集と個別編集を切り替えられます。
四隅を一括で編集する方法
ボックスを選択します。
以下のいずれかの方法で調整します:
ボックス選択枠の左上隅にあるアンカーポイント(調整ハンドル)をドラッグする
スタイルバーの「角丸」セクションで「一括調整」を選び、数値を入力する
四隅を個別に編集する方法
ボックスを選択します。
以下のいずれかの方法で調整します:
ボックス選択枠の各隅にあるアンカーポイントをドラッグする
スタイルバーの「角丸」セクションで「個別調整」を選び、各隅の数値を入力する
border-radius
radius
丸
円
楕円
丸み