メインコンテンツにスキップ

親子ボックス

Studio エディターでボックス同士を親子関係にして入れ子構造を作る方法を説明します。エディター上の操作と、レイヤーパネルを使った操作の 2 ストリートを紹介します。

今日アップデートされました

Studioでは、箱を重ねたり箱の中を入れたりしてレイアウトを作る「ボックスモデル」を採用しています。 この仕組みにより、単純なレイアウトだけでなく入れ子構造の複雑なレイアウトも作成できます。

Studioでは、ボックス同士を親子関係にすることで入れ子構造を実現します。 要素の親子関係は、画面左のレイヤーパネルで確認できます。

ボックス内に別のボックスを追加する方法

ボックス内に別のボックスを追加する方法は、エディタ上で操作する方法とレイヤーパネル上で操作する方法の 2 種類があります。

エディタ上で操作する方法

  1. 子ボックスにしたいボックスをドラッグし、親ボックスの中にドラッグします。

  2. 着地地点を示すオレンジの影が親ボックス内に表示されている事を確認してドロップします。

子ボックスが親ボックスより大きい場合は、中に追加できません。 サイズを調整するか、レイヤーパネル上で操作してください。

Tips:ドラッグせずに配置する方法

以下の方法で、ドラッグしなくても子要素として追加できます。ドラッグでは意図する場所に配置できない場合にご利用ください。

  1. スクリーン上の親ボックスを選択します。

  2. 画面左の追加パネル内の要素をShiftを押しながらクリックします。

レイヤーパネル上で操作する方法

  1. デザインエディタ左のナビゲーションで、レイヤーパネルをクリックします。

  2. 移動したいボックスのレイヤーをドラッグし、親にしたいボックスのレイヤーに重ねてドロップします。

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