会員限定 オートレイアウト

• 要素をオートレイアウト化する
• レイアウトの設定をする
• フレーム内に要素を追加する
• オートレイアウトを使用したボタンの作り方

今回は、ボタンやカードなどの要素を規則的に並べるレイアウトを簡単に作成できる機能のオートレイアウトについて説明します。

要素をオートレイアウト化する

オートレイアウトフレームを作成する

オートレイアウト化したい要素を複数選択した状態で、右クリックメニューから「オートレイアウトの追加」またはショートカットキー（Shift + A）を選択します。すると、選択範囲の周りにオートレイアウトフレームが作成されます。

レイアウトの設定をする

1. 要素間の隙間を調整する
   オートレイアウトフレームを選択すると、右側にレイアウト設定が表示されます。
   ここで、要素の並べる方向や要素間の隙間などを調整することができます。

   

   

   右のパネルに表示されている「58」は要素間の隙間の数値になります。

   

   セレクトボックスから選択または、数値を入力することで間隔を調整することができます。
2. 要素を横並びにする
   オートレイアウトパネルの矢印アイコンから要素の並ぶ方向を横向きしたり、ある一定の横幅を超えると折り返す設定にすることもできます。

   

   横並びにする場合、「→」アイコンをクリックして選択する。