01 / 05
画面幅に合わせる
INPUT · スライド
せまい画面で崩れるのを見る
02 / 05
固定した幅には逃げ場がない
width: 600px; と書いた箱は、どんな画面でも 600px のまま。
広い画面ではちょうどよくても、せまい画面では外へはみ出す。横にスクロールしないと読めないページになってしまう。
.panel { width: 600px;}03 / 05
割合なら画面についてくる
幅を % で書くと、外側の箱に対する割合になる。外が狭くなれば中身も狭くなるから、はみ出さない。
これだけでも崩れはずいぶん減るよ。
.panel { width: 100%;}04 / 05
それでも足りないところがある
割合だけでは直らないものもある。
- 横に3枚並べたカードが、せまい画面では細すぎて読めない
- 大きな見出しが窮屈につぶれる
- 余白が広すぎて中身の場所がなくなる
「せまいときだけ別のCSSを当てる」しくみが必要で、それが次のレッスンの話だよ。
05 / 05
まずは崩れを見てみよう
演習では固定した幅と割合の幅を書きくらべる。プレビューを見ながら、形がどう変わるか確かめてみよう。
ここから書いてみよう。