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

親子ボックス

Studio エディタで、ボックス同士を親子関係にして入れ子構造を作る方法を説明します。

親子ボックスとは

Studioでのサイトレイアウトは、箱を重ねて作る「ボックスモデル」を採用しています。

ボックスの中に別のボックスを配置することで、ボックス同士が親子関係(入れ子構造)になります。

  • 内包したボックス:「親ボックス」と呼びます。

  • 内包されたボックス:「子ボックス」と呼びます。

1つの親ボックスには、複数の子ボックスを内包できます。また、子ボックスの中にさらに他のボックスを入れて階層を深めることができます。

このようにサイトを構成することで、複雑なサイトレイアウトを実現できます。


ボックス内に別のボックスを入れて親子関係にする方法

ボックスに他のボックスを内包して、親子関係の構造にする方法は3つあります。

スクリーン上でドラッグして操作する方法

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

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

Tips:子ボックスを、より小さい親ボックスに内包したい場合は、Shiftキーを推しながらドラッグします。

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

  1. 画面左のナビゲーションで、レイヤーパネルをクリックします。

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

追加パネルから挿入する方法

  1. スクリーン上またはレイヤーパネル上で、親ボックスを選択します。

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

ボックス同士の親子関係を確認する方法

要素の親子関係は、画面左のレイヤーパネルで確認できます。

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