基本操作編 06 / 10 基本 約6分
サイズの決め方｜固定・可変・自動
幅と高さの3つの指定方法を比較表で整理します。スマホで崩れる原因のほとんどはここにあり、選び方を覚えるだけで崩れの大半は防げます。
この教材で学べること
- 固定・可変・自動の3つの指定の違い
- それぞれが画面幅の変化にどう反応するか
- 崩れたときに最初に疑うべき設定
幅と高さの指定には3つの考え方があります。この選択がスマホ表示の崩れに直結するので、意味を取り違えないでください。表記はエディタの版によって多少違いますが、考え方は共通です。
3つの指定
| 指定 | 意味 | 向いている場面 | スマホでの挙動 |
|---|---|---|---|
| 固定 | 数値でぴったり決める（例：320px） | アイコン・ロゴなど、大きさを変えたくないもの | 画面が狭いとはみ出す |
| 可変（親に合わせる） | 親ボックスの幅いっぱいに伸び縮みする | 本文の入るボックス、セクション全体 | 自動で収まる |
| 自動（中身に合わせる） | 中の文字や画像の分だけの大きさになる | ボタン、タグ、見出し | 中身に応じて変わる |
高さは指定しないのが基本
幅と違い、高さは基本的に指定しません。中身の量で自然に決まるようにしておくのが安全です。高さを固定すると、文字が増えたときに中身がはみ出したり切れたりします。
| 状況 | 推奨 | 固定するとどうなるか |
|---|---|---|
| 本文の入るボックス | 指定しない | 文字が増えると溢れる |
| カードの高さをそろえたい | 親の設定で伸ばす | 1枚だけ内容が長いと崩れる |
| メインビジュアル | 画面高さに対する割合で指定 | スマホで異様に縦長・縦短になる |
| アイコン・ロゴ | 固定でよい | — |
崩れたときの最初の確認：スマホで横スクロールが出る場合、原因はほぼ「幅が固定のまま画面幅より大きい要素」です。レイヤーを上から順に見て、固定になっている要素を探すと、たいてい犯人が見つかります。詳しい手順は第3章で扱います。
次は文字まわりの設定、テキストの扱いです。