メインコンテンツにスキップ
親子ボックス

Studioエディタでボックスの入れ子構造(親子ボックス)を作る方法をご紹介します。エディタ上またはレイヤーパネルから操作できます。

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

Studioでボックスの入れ子構造を作る

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

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

ボックスの親子関係をレイヤーパネルで確認する画面

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

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

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

  1. 親となるボックスを選択します。

  2. 画面左の追加メニュー、または既に配置してあるデザインから、追加したいボックスを親ボックスにドラッグします。着地地点を示すオレンジの影が親ボックス内に表示されていることを確認して、ドロップしてください。

※子ボックスが親ボックスより大きいと中に追加できません。サイズを調整するか、レイヤーパネル上で操作しましょう

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

  1. レイヤーパネルを開きます。

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

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