デイトラ7日目完了
レシポンシブデザインのコーディング。
iPhoneXに合わせる設定。
PC版の設定を後から上書きしていく感じ。
主な作業はfloatの無効化。
各要素の幅の設定。
ヘッダー部分の3つ並ぶメニューが左によってしまう問題。
PC版ではfloatに設定。
レシポンシブではflexに設定。
PC版でfloatに設定するとき、
float(浮いている)要素をcontent=""という疑似要素を作り上げそこに格納していき、display:block; としたものをいじる感じだった。
floatとは違ってflexは実態があるイメージかな。
だから右端の余白をなくす処理が疑似要素のcontentをnoneにするものだった。
float->浮いている要素を空の箱を作りそこに入れてあげる。
flex->要素がそれぞれ実体をもって動く。空の箱を作る必要なし。
明日から二日間は復習。
動画を見ずにコーディング完成まで目標4時間。
できるかな・・・
目標時間をオーバーしても、完成したなら今はめげず前に進むのみ!
絶対慣れてくる!!