基本操作編 02 / 10 基本 約6分
ボックスと入れ子構造｜Studioの土台となる考え方
Studioの画面はボックスの入れ子でできています。「子は親の中でしか動けない」という原則を図解し、要素が思った方向に動かないときの直し方につなげます。
この教材で学べること
- ボックスの入れ子構造と、レイヤーとの対応関係
- 「子は親の中でしか動けない」という原則
- 動かないときに、どこを疑えばよいか
Studioの画面は、中身の入った箱を組み合わせて作られています。見出しも画像もボタンも、それぞれボックスの中に入っていて、そのボックスがさらに大きなボックスに入っています。この構造が分かっていないと、必ずどこかで手が止まります。
入れ子は、そのままレイヤーになる
キャンバス上の入れ子は、左のレイヤーの階層とぴったり対応しています。見た目で分からなくなったら、レイヤーを見れば構造が確認できます。
子は、親の中でしか動けない
覚えるべき原則はひとつだけです。要素を右に寄せたいのに動かないときは、その要素自体ではなく、親のボックスの設定を疑ってください。並べ方も揃え方も、決めているのは親です。
| やりたいこと | 設定する対象 | よくある間違い |
|---|---|---|
| 要素を中央に置きたい | 親のボックス | 要素そのものをドラッグして動かそうとする |
| カードを横に並べたい | 親のボックス | カードを1枚ずつ位置指定する |
| 要素どうしの間隔をあけたい | 親のボックス | 1つずつ外側の余白を足す |
| この要素だけずらしたい | その要素 | 親の設定を変えて他まで動く |
構造を整えると後が楽になる
入れ子は深くしすぎても浅すぎても扱いにくくなります。目安は「意味のまとまりごとに1つのボックス」です。セクション → 見出しのまとまり → カードのまとまり、という粒度で作ると、後からの修正もレスポンシブ対応も素直に進みます。
名前をつけておく：レイヤーの各ボックスには名前をつけられます。「セクション1」「カード群」など役割で名付けておくと、数日後の自分と、引き継ぐ相手が助かります。案件で複数人が触る場合はとくに効きます。
次は、その親ボックスが決める並べ方（縦積みと横並び）です。