01 / 05
画面幅に合わせる
INPUT · スライド
幅ごとに変える前の下地を作る
02 / 05
下地は3層でできている
ページの1区画は、いつもこの3層で組める。
- 帯 … 画面の端から端まで。背景色と上下の余白を持つ
- 入れ物 … 幅を決めてまん中に置く。中身の左右をそろえる
- カード … 入れ物の中に並ぶ部品。幅は割合で持つ
名前が変わっても役目は同じ。この3つを見分けられると、どこを直せばいいか迷わなくなるよ。
<div class="events"> <div class="inner"> <div class="card"></div> </div></div>03 / 05
数字の幅は入れ物だけが持つ
幅を数字で決めるのは入れ物だけ。カードは割合で持つ。
こうすると、幅を変えたいときに書き直すのは入れ物の1行だけになる。カードは割合なので自動でついてくるんだ。
.inner { width: 320px; margin: 0 auto;}.card { width: 30%;}04 / 05
数え方は最初にそろえる
下地でいちばん先に書くのは box-sizing: border-box;。あとから足すと、それまでに決めた幅がぜんぶずれてしまう。
カンマで並べて、使う箱をまとめて指定しておこう。
.inner, .card { box-sizing: border-box;}05 / 05
土台を組んでみよう
このレッスンでは @media を1つも書かない。広い画面用の形だけを、崩れにくい書き方でていねいに作る。
ここから書いてみよう。