基本操作編 05 / 10 基本 約6分
余白｜内側・外側・要素間の使い分け
内側の余白と外側の余白の違いを図解し、どちらを使うべきかを判断できるようにします。要素間の間隔を親のギャップでまとめて指定する理由も解説します。
この教材で学べること
- 内側の余白と外側の余白の役割の違い
- 背景色の広がり方から使い分けを判断する方法
- 要素間の間隔を親でまとめて指定する利点
Studioの余白には「内側の余白」と「外側の余白」の2種類があります。名前が似ているだけで役割はまったく違い、ここを混同していると、直したい隙間が一向に変わらないという状態になります。
2種類の余白
使い分けの判断は「背景色をどこまで広げたいか」で決まります。ボタンを押しやすくしたいなら内側、セクション間をあけたいなら外側です。
どちらを使うかの対応表
| やりたいこと | 使う余白 | 理由 |
|---|---|---|
| ボタンの文字の周りを広げる | 内側 | ボタンの背景も一緒に広がってほしい |
| カードの中身と枠線を離す | 内側 | 枠の中にゆとりを作る |
| セクションどうしの間をあける | 外側 | 背景は広げずに距離だけ取る |
| 見出しと本文の間をあける | 外側、または親のギャップ | 要素間の距離の話 |
| セクション全体を画面端から離す | 内側（左右） | 背景色を端まで出したまま中身だけ寄せる |
要素間はギャップでまとめる
要素どうしの間隔は、外側の余白を1つずつ足すより、親ボックスの「子の間隔（ギャップ）」でまとめて指定したほうが後で崩れません。要素が増えても設定が1箇所で済みます。
| やり方 | 要素が増えたとき | 間隔を変えたいとき |
|---|---|---|
| 1つずつ外側の余白 | 新しい要素に余白を付け忘れる | 全部の要素を直す |
| 親のギャップ | 自動で同じ間隔になる | 1箇所だけ直す |
余白の値をそろえる：8・16・24・32…のように、使う数値を最初に決めておくと画面全体に統一感が出ます。バラバラの数値を感覚で入れると、なんとなく雑に見える原因になります。
次は、崩れの最大の原因であるサイズの決め方です。