スマホで見ると崩れる
パソコンで作ったページをスマホで見ると
ここまでのページは、横に広い画面を前提に組み立ててきました。写真は 160px、作品カードは 3 列、ナビは横一列。パソコンで見るとちょうどよく見えます。ところがスマホの画面幅は 400px 前後しかありません。中身が入りきらないと、ページは横に長くはみ出し、横にスクロールしないと読めない状態になります。
画面の幅に合わせて見た目が変わるようにすることを、レスポンシブデザインと呼びます。この章はまるごとその話です。
はみ出しを止める考え方
はみ出しの原因は、幅を数値で固定していることです。width: 160px と書くと、画面が 320px しかなくても 160px のまま居座ります。そこで、上限だけを決めて、あとは画面に合わせて縮むようにします。
max-width: 100% は「親要素より大きくならない」という指定で、画像のはみ出しを止める定番です。あわせて height: auto を書いておくと、縦横の比率を保ったまま縮みます。
書くこと
プロフィール写真に max-width と height: auto を足します。もうひとつ、入力欄の文字サイズを 16px にします。iPhone の Safari は、文字が 16px より小さい入力欄に触れると画面を勝手に拡大します。ここを 16px にしておくと、その拡大が起きません。メディアクエリはまだ使いません。まずは固定値をゆるめるところからです。
課題
.profile-photoにmax-width: 100%とheight: autoを足して、写真がはみ出さないようにする.form-inputにfont-size: 16pxを足して、スマホで入力欄に触れても拡大されないようにする