オートレイアウトのプロパティを調べる

はじめに

この機能を使用できるユーザー

すべてのチームまたはプランのユーザー。

ファイルの編集可のアクセス権があるユーザーは、フレームとオブジェクトにオートレイアウトを追加できます。

オートレイアウトのプロパティをよくご存じですか。オートレイアウトの使い方については、こちらを参照してください→

オートレイアウトはフレームとコンポーネントに追加できるプロパティです。拡大して埋めたり、縮小して調整したり、コンテンツの変更時に合わせたデザインを作成できます。デザインを変更する際に、新しいレイヤーの追加、長い文字列の入力、配置の保持が必要な場合に最適です。

オートレイアウトの使用方法はたくさんあります:

• テキストラベルの編集とともに拡大/縮小するボタンを作成します。
• アイテムの追加、削除、非表示に合わせたリストを作成します。
• オートレイアウトのフレームを組み合わせてインターフェースを構築します。

オートレイアウトは多くの可動パーツと用途がある強力な機能です。この記事では、各プロパティの機能について説明します。

オートレイアウトがあるフレームには、通常のフレームにはないさまざまなプロパティがあります。オートレイアウトを適用すると、右サイドバーの表示がいくつか変更されます。

オートレイアウトのフレームでは、次の操作ができません:

• 🚫 フレームにレイアウトグリッドを追加する
• 🚫 オブジェクトで絶対位置が有効になっていない限り、オートレイアウトのフレーム内のオブジェクトに制約を適用する
• 🚫 フレーム内の任意のオブジェクトでスマートセレクションを使用する

レイアウトフロー

方向

方向はオートレイアウトのフレームがフローする向きを表します。

• 縦: オブジェクトの追加、削除、並べ替えをy軸に沿って行います。例: リスト内のオブジェクト、ニュースフィードやタイムライン内の投稿
• 横: オブジェクトの追加、削除、並べ替えをx軸に沿って行います。例: ボタンの行、モバイルのナビゲーションメニューのアイコン
• 折り返す: オフジェクトをフレーム内の複数の行と列に配置します。オブジェクトは水平方向に並べられ、次の行に折り返されます。例: フォトギャラリー、タグのセット

キャンバスでのスタックの順序

複数のレイヤーの間隔が負の場合、スタックが作成されます。デフォルトでは、スタックの最後のオブジェクト(右端または一番下のオブジェクト)が一番上になります。

キャンバスで表示されるスタックの視覚的な順序を変更できます。

オートレイアウトのフレームを選択した状態で、右サイドバーのをクリックして詳細なレイアウト設定を開きます。[キャンバススタック]の横で、次を選択します。

• 最初が上: スタックの最初のレイヤーが一番上になります
• 最後が上:スタックの最後のレイヤーが一番上になります

絶対位置

絶対位置は、オブジェクトをオートレイアウトのフレームに保持したまま、オートレイアウトフローからオブジェクトを除外します。オブジェクトとその周囲の兄弟は、サイズを変更して移動しても、お互いを無視します。

CSSでの絶対位置同様に、絶対位置が有効になっているオブジェクトは、親コンテナに対して必要な場所に正確に配置できます。

絶対位置を持つオブジェクト は、通常のフレーム内のオブジェクトとして扱われます。つまり、制約を適用して、親のオートレイアウトのフレームのサイズが変更されたときにどのように応答するかを決定できます。サイズ変更や高度なレイアウトオプションなど、その他のオートレイアウト設定は、これらのオブジェクトでは使用できません。

絶対位置を有効にするには、オートレイアウトのフレームの子を選択し、右サイドバーのをクリックします。

間隔

アイテムの間隔

オートレイアウトのフレーム内のオブジェクト間の距離、すなわち配置を設定するには、アイテム間の間隔を使用します。

アイテム間の間隔には、次の2種類の設定があります。

• 自動: オブジェクト間の間隔ができるだけ大きな距離になるように設定します。フィールドに「自動」と入力するか、ドロップダウンメニューから選択します。
• 指定間隔: オブジェクトを離す距離を指定します。フィールドに値を入力するか、矢印キーを使用して値をナッジするか、カーソルを使用してフィールドをスクラブします。

この2つの設定を切り替えるには、整列ボックスをクリックしてXを押します。

オートレイアウトのフレームの方向が[縦]または[横]に設定されている場合、アイテムの水平方向の間隔を設定できます。フレームの方向が[折り返し]に設定されている場合、アイテムの水平方向と垂直方向の両方を間隔を設定できます。

パディング

パディングはオートレイアウトのフレームの境界とフレームの子オブジェクトの間の空またはホワイトのスペースを制御します。パディングは縦横とも均一に設定することも、上下左右で異なる値に設定することもできます。

右サイドバーのキャンバスコントロールまたは間隔フィールドを使用して、パディングを調整します。

キャンバスコントロールにアクセスするには、オートレイアウトのフレームを選択し、そのフレームにカーソルを合わせます。スマートセレクションと同様に、ピンクのハンドルが表示されます。

• ハンドルをクリックして入力フィールドを開き、数値を入力します
• または、ハンドルをクリックしてドラッグし、間隔を変更します

右サイドバーのパディングコントロールは、デフォルトでは垂直(上下)パディングと水平(左右)パディングに分けられています。

• 個別のパディングを設定するには、をクリックして上、右、下、左のパディングフィールドを使用します。
• パディングを上下左右同じに設定したり、CSS一括指定を使用したりするには、⌘ CommandまたはControlを押したまま、任意のパディングフィールドをクリックします。CSS一括指定も可能です。たとえば1,2,3,4と入力すると、上、右、下、左がそれぞれ1、2、3、4に設定されます。1,2と入力すると、上と下が 1、左と右が 2に設定されます。

• 右サイドバーでをクリックします。 上、右、下、左のパディング用に4つのフィールドが表示されます
• ⌘ Command(Macの場合)またはCtrl(Windowsの場合)を押したまま、任意のパディングボックスをクリックします。パディングフィールドが1つ表示されます。1つの値を入力して上下左右に同じパディングを設定するか、CSS一括指定を使用して個別の値を設定します。たとえば1,2,3,4と入力した場合、設定される値は、それぞれ上: 1、右: 2、下: 3、左: 4です。また1,2と入力すると、設定される値は上/下: 1、左/右: 2です。

レイアウトのストローク

デフォルトでは、オブジェクトのサイズを計算するときにストロークは考慮されないため、親フレームや周囲の兄弟には影響しません。

CSSが境界線をレンダリングする方法を正確に表していないため、開発者のハンドオフ時には理想的ではない場合があります。

詳細レイアウト設定に移動し、[線]の横にあるドロップダウンを使用して[レイアウトに含める]または[レイアウトから除外する]を選択して、ストロークがオートレイアウトのフレームのスペースを占めるかどうかを選択します。

配置

子オブジェクトの配置を設定する

オートレイアウトのフレーム内の子オブジェクトの配置方法を選択します。オートレイアウトのフレームの方向と配置(アイテムの間隔)によって、使用できる整列オプションが決まります。

通常のフレーム内のオブジェクトとは異なり、オブジェクトの配置を個別に制御することはできません。このため、親のオートレイアウトのフレームで子オブジェクトの配置を設定します。

右サイドバーにある配置ボックスで、フレーム内の子のレイアウトを9つのオプションから選択します。

• ボックスを選択して、矢印キーで配置設定を切り替えます。
• ボックスを選択し、W/A/S/Dを押して配置をフレームの端に設定します。

アイテムの間隔が[自動]に設定されている場合、それぞれの方向に3つのオプションがあります。

• 縦のオートレイアウト:左、中央、右
• 横のオートレイアウト:上、中央、下

アイテムの間隔が特定の数値に設定されている場合は、それぞれの方向に同じ9個のオプションがあります。

• 左上
• 中央上
• 右上
• 左
• 中央
• 右
• 左下
• 中央下
• 右下

テキストベースラインの配置

さまざまな高さのレイヤーが、水平方向のオートレイアウトに配置されたときに垂直方向の中央に配置される場合。 ただし、サイズの異なるテキストレイヤーや、アイコン付きのボタンなどのオブジェクトを含むテキストの場合は、代わりにベースラインを揃える必要があります。

レイヤーをベースラインで整列させるには、整列するレイヤーを選択し、右サイドバーからをクリックして詳細なレイアウト設定を開きます。テキストベースラインの配置の横にあるをクリックして、ベースラインの配置を有効にします。

サイズ変更

オートレイアウトの最も強力な機能の1つは、オートレイアウトのフレームでオブジェクトの寸法を制御できることです。

親のオートレイアウトのフレームのサイズ変更の動作を設定して、子オブジェクトの変更にすべて適用します。サイズ変更設定は、右サイドバーのドロップダウンメニューを使用して、X軸とY軸で個別にオブジェクトに適用できます。

固定幅または固定高さ

オートレイアウトのフレームが固定幅または固定高さに設定されている場合、フレームの寸法の値はその中のコンテンツにかかわらず変更されません。フレームのサイズは、長さが変わるテキストの文字列のように、中のオブジェクトの変更に応じて変わることはありません。

最小および最大サイズ

最小または最大の幅と高さを任意のオートレイアウトのフレームおよび子に設定できます。

• [幅]ドロップダウンを開くと、 [最小幅を追加]と [最大幅を追加]があります
• [高さ]ドロップダウンを開くと、 [最小高さを追加]と [最大高さを追加]があります

オプションを選択し、表示される新しいフィールドに新しい値を入力します。ドロップダウンを開いて、数値バリアブルを適用することもできます。

オブジェクトに最小または最大サイズが追加されている場合、それぞれの幅または高さアイコンの両側にそれを示す2本の線があります。アイコンにカーソルを合わせて、キャンバス上のサイズ制限のプレビューを確認できます。

最小値または最大値の設定を削除するには、[幅]または[高さ]ドロップダウンを開き、[最小と最大を削除]を選択します。

コンテンツを内包

オートレイアウトのフレームのサイズが子オブジェクトに応じて変わるようにするには、[コンテンツを内包]に設定します。フレームの寸法は、内包するコンテンツの周囲のサイズができるだけ小さくなるように設定されます。ただしパディング値は維持されます。

コンテナに合わせて拡大

[コンテナに合わせて拡大]に設定されたオートレイアウトのフレーム内のオブジェクトは、親フレームの幅/高さまで伸縮します。

制約に関するメモ

オートレイアウトのフレーム内では、子オブジェクトに制約を適用できません (オブジェクトで絶対位置が有効になっていない限り)。代わりにサイズ変更プロパティを使用して、フレームまたはフレーム内のオブジェクトのサイズ変更にオブジェクトが対応する方法を設定できます。

オートレイアウトのフレームが通常のフレーム内にネストされている場合、オートレイアウトのフレームに制約を適用できます。[制約] セクションとサイズ変更オプションが表示されて、オートレイアウトのフレームおよびその中のオブジェクトのサイズ変更動作の制約を設定できます。

例: オートレイアウトを使用してタグのセットを作成した場合、さまざまな画面サイズに応じてそのセットを調整したいことがあります。制約を使用することで、親フレームのサイズの変化にナビゲーションバーを正しく対応させることができます。また、サイズ変更を使用して、ナビゲーションバー内のオブジェクトを変更にどのように対応させるかをコントロールできます。

制約の詳細はこちら→

キーボードショートカットガイド

基本的なショートカット

アクション	Mac	Windows
オートレイアウトを追加する	⇧ Shift A	⇧ Shift A
オートレイアウトを解除する	⌥ Option ⇧ Shift A	Alt ⇧ Shift A
(右サイドバーから)上下左右のパディングを編集する	⌘ Command + パディング入力フィールドをクリック	Ctrl + パディング入力フィールドをクリック

配置ボックスから

以下を行うには、右サイドバーの配置ボックスをクリックし、次のキーを押します。

アクション	MacおよびWindows
配置を設定する	↓ / → / ← / ↑
配置を端に設定する	W / A / S / D
ベースラインの配置を切り替える	B
間隔を切り替える	X

キャンバスから

以下を行うには、次のキーボードショートカットを使用しながら、キャンバス上のハンドルをドラッグします。

アクション	Mac	Windows
反対側のパディングを設定する	⌥ Option	Alt
上下左右のパディングを設定する	⌥ Option⇧ Shift	Alt⇧ Shift
大きな調整でパディングまたは間隔を設定する	⇧ Shift	⇧ Shift

以下を行うには、次のキーボードショートカットを使用し、オートレイアウトのフレーム内の特定の領域をクリックします。

アクション	Mac	Windows
反対側のパディング値を入力する	⌥ Option + パディング領域をクリック	Alt + パディング領域をクリック
上下左右のパディング値を入力する	⌥ Option⇧ Shift + パディング領域をクリック	Alt⇧ Shift + パディング領域をクリック
「コンテンツを内包」を設定する	垂直方向または水平方向の辺をダブルクリック	垂直方向または水平方向の辺をダブルクリック
「コンテナに合わせて拡大」を設定する	⌥ Option + 垂直方向または水平方向の辺をダブルクリック	Alt + 垂直方向または水平方向の辺をダブルクリック