01 / 05
今までの横並び
ここまで横に並べるときは float を使ってきたね。並べたい子に float: left; を書いて、最後に clear: both; の箱でしめる。
この3点セットが今のところ唯一のやり方だよ。
.item { float: left; width: 150px;}.clear { clear: both;}ならべ方をあやつる
INPUT · スライド
01 / 05
ここまで横に並べるときは float を使ってきたね。並べたい子に float: left; を書いて、最後に clear: both; の箱でしめる。
この3点セットが今のところ唯一のやり方だよ。
.item { float: left; width: 150px;}.clear { clear: both;}02 / 05
動くけれど、気になるところがいくつかある。
clear 用の箱が要る並べるたびに考えることが多いんだ。
03 / 05
この章で覚えるのは、たった1行で並べてしまう書き方。親のほうに1行足すだけだよ。
子には何も書かない。clear の箱も要らない。
.menu { display: flex;}04 / 05
順番にこう進んでいく。
今までのレイアウトの悩みが、ほとんどここで片づくよ。
05 / 05
新しいやり方のありがたみは、古いやり方を一度きちんと組んでみると分かる。
このレッスンの演習は float の復習だよ。ここから書いてみよう。