完成イメージと3つの色

STUDIOの右パネルで余白の項目を開くと、種類ごとに違う色でキャンバス上にプレビューが表示されます。この色分けが、そのまま3種類の余白の性質を覚える手がかりになります。

仕上がりの見た目そのものより、数値をどこに入れたときに何が起きるかを、色の変化で追えるようになることが、このレッスンの目的です。

STEP 1：パディング（内側の余白）

パディングは、テキストや画像とボックスの縁との間を空けるための余白です。背景色や枠線と一緒に広がるのがパディングの最大の特徴で、キャンバス上ではグリーンの帯として表示されます。カードの中の文字が縁にぴったりくっついて窮屈に見えるときは、多くの場合パディング不足が原因です。

STEP 2：マージン（外側の余白）

マージンは、ボックスの外側に確保する距離で、隣り合うボックスどうしの間隔や、セクションの外周の余白を作るときに使います。パディングとの違いは、色の広がり方だけでなく効果が及ぶ範囲にもあります。パディングはボックス自身の見た目（背景色・枠線）を押し広げますが、マージンはボックスの位置だけを動かし、見た目のサイズ自体は変えません。

ドラッグ操作でのスナップは、数値入力の手間を減らすための機能です。細かい微調整をしたいときだけCtrlを押しながら1px単位に切り替えると覚えておきましょう。

STEP 3：ギャップ（兄弟の間隔）

ギャップは、同じ親を持つ兄弟ボックスどうしの間隔をまとめて指定する余白です。特徴は、子ではなく親ボックスに1回設定するだけで、すべての兄弟の間隔に反映される点にあります。子が3つでも5つでも、親のギャップを1箇所変えるだけで全体の間隔を揃えられるため、カードを横に並べたレイアウトでは定番の設定になります。

これに対して、子ボックス1つずつにマージンを付けて間隔を作ろうとすると、修正のたびに複数の数値を個別に合わせる必要があり、どれか1つの数値がずれるだけで間隔が不揃いになります。兄弟どうしの間隔を作りたいときは、まずギャップで実現できないかを先に検討しましょう。

STEP 4：3つの余白を比べる