はみ出しの原因を見つけて直す

いちばん多いのがこれ。どこかに width: 480px; のような数字の幅が残っていると、画面がそれより狭くなった瞬間にはみ出す。

直し方は割合にすること。数字の幅を持っていいのは入れ物だけ、と決めておくと探しやすいよ。

幅は 100% なのにはみ出すときは、余白か枠線が外へ足されている。box-sizing: border-box; が抜けている箱だね。

入れ子になった箱のどこか1つで抜けていると、そこだけ外へ出る。まとめて指定するのが確実だよ。

画像はもとの大きさを持っている。CSS で何も言わないと、外の箱より大きくても縮まない。

width: 100%; と書けば外の箱に合わせてくれる。写真を扱うページでは必ず書いておこう。

探す順番も決めておくと早い。

• いちばん外の帯 … 数字の幅が入っていないか
• 入れ物 … 幅と余白の数え方
• カード … 割合の合計と余白
• 画像 … 100% を書いたか

外から内へ。1つ直すたびにプレビューを見れば、どれが効いたか分かるよ。ここから書いてみよう。