なぜ入れ子で考えるのか

STUDIOのすべてのページには、一番外側にBaseと呼ばれる土台のボックスがあります。画面に置いたテキストや画像、セクションは、すべてこのBaseの中に直接、または別のボックスを経由して間接的に入っています。あるボックスが別のボックスの中に入っている、という関係を入れ子（親子関係）と呼びます。

入れ子を意識する理由は、ボックスの余白や配置の設定が、すべて直近の親を基準にして決まるからです。たとえば子ボックスに設定した余白は親ボックスの内側の空間を基準に広がり、子ボックスの横幅を100%にすれば、それは画面全体ではなく親ボックスの横幅いっぱいという意味になります。どの親の中に入っているかを見誤ると、思った通りの位置に置けなかったり、レスポンシブで崩れたときに原因を探せなかったりします。

逆にいえば、親子関係さえ正しく組めていれば、あとの余白調整やサイズ指定はその親子関係の上に乗せていくだけで済みます。STUDIOの公式ヘルプで最も記事数が多いカテゴリが「ボックスのデザイン設定」であることからも分かるとおり、ボックス操作はSTUDIO学習の中心です。このレッスンで親子関係の読み方を先に固めておくことが、Chapter 2全体の理解を早くします。

レイヤーパネルで構造を読む

入れ子の関係を画面上の見た目だけで判断するのは、要素が重なったり小さかったりすると難しくなります。そこで使うのが左パネルのレイヤーパネルです。レイヤーパネルには、ページ内のすべてのボックスが親子関係のまま、階層のインデント（字下げ）付きで一覧表示されます。

レイヤーパネルで特に重要なのは、パネル上の選択とキャンバス（スクリーン）上の選択が常に連動しているという点です。レイヤーパネルである行をクリックすると、キャンバス側でそのボックスに選択枠が表示されます。逆にキャンバス上で要素をクリックすると、レイヤーパネル側のその行がハイライトされます。

この連動は、あとの章で重なった要素をクリックできない、意図しない要素が動いてしまうといったトラブルを直すときにも使います。ボックスを触っているかどうかが画面上でははっきりしない場面では、レイヤーパネルを開いて名前と階層から狙った要素を探すのが最も確実な方法です。ボックスの並び順を入れ替えたいときも、レイヤーパネル上でドラッグして順序を変えられます。

グループ化と親子の選択切り替え

複数のボックスをまとめて動かしたい、まとめてスタイルを揃えたいというときは、グループ化を使います。グループ化は、選択した複数のボックスの外側に新しい親ボックスを1つ作る操作です。グループはあくまで一時的なまとめのための入れ子で、意味のある構造を新しく作るわけではないため、必要なくなればいつでも解除できます。

ボックスの選択そのものも、マウスのクリックだけに頼らずキーボードのショートカットで素早く切り替えられます。特にEnterとShift+Enterによる親子の行き来、Ctrl+Clickによる深い階層への直接ジャンプは、入れ子が数段になったセクションを編集するときに手放せない操作です。

グループ化とよく混同されるのが、あとのChapter 3で扱うリストやコンポーネントです。グループ化はあくまで、今その場で複数のボックスをまとめて動かすための一時的な操作で、リスト（同じレイアウトの繰り返し）やコンポーネント（複数ページで使い回す共通パーツ）とは目的が異なります。両者の違いは3-3で詳しく扱うため、ここではグループ化が一時的なまとめであることだけ押さえておきましょう。

入れ子は深くしすぎない

入れ子は画面を組み立てるための基本ですが、段数が増えるほど扱いにくくなります。STUDIOそのものに入れ子の段数を制限する機能はありませんが、実際の制作では入れ子が4〜5段を超えたあたりから、レイヤーパネルの行が縦に伸びすぎて、どの行がどのボックスなのか目で追いにくくなります。

この状態になると、編集したいつもりの箇所とは違うボックスをうっかり選択して、意図しない場所にスタイルを当ててしまう事故が起きやすくなります。特に似たような名前のボックスが並んでいる場合、階層が深いほど今どの箱を触っているかを見失いやすくなるのが実務上の問題です。