デイトラ7日目完了

レシポンシブデザインのコーディング。
iPhoneXに合わせる設定。

PC版の設定を後から上書きしていく感じ。
主な作業はfloatの無効化。
各要素の幅の設定。

ヘッダー部分の3つ並ぶメニューが左によってしまう問題。
PC版ではfloatに設定。
レシポンシブではflexに設定。
PC版でfloatに設定するとき、
float(浮いている)要素をcontent=""という疑似要素を作り上げそこに格納していき、display:block; としたものをいじる感じだった。
floatとは違ってflexは実態があるイメージかな。
だから右端の余白をなくす処理が疑似要素のcontentをnoneにするものだった。

float->浮いている要素を空の箱を作りそこに入れてあげる。
flex->要素がそれぞれ実体をもって動く。空の箱を作る必要なし。

明日から二日間は復習。
動画を見ずにコーディング完成まで目標4時間。
できるかな・・・
目標時間をオーバーしても、完成したなら今はめげず前に進むのみ!
絶対慣れてくる!!


この記事が気に入ったらサポートをしてみませんか?