ワイジェイブログ

文系大学生のエンジニアに挑戦の話

HTML&CSSわからんけど Progate道場コース 初級編をやってみた ~float:left;で全て消える!??~

HTML&CSSの初級、中級編が終わり、次は上級!

、、とその前に復習がてら道場コースが用意されていた。

 

内容としてはいつもの塗り絵的なノリがほとんど無く、自由帳的なノリだ(笑)

むずい(笑)

 

ミスをここに書いとく。

それは 

float:left;

で横並びにしようと、header-logoにそれを打ち込んでって、

f:id:arowoftree:20190629233959p:plain

途中までうまくいってた

header-list liにも打ち込んだら、画面が真っ白になったのだ。

f:id:arowoftree:20190629234153p:plain

真っ白になっちゃった

 跡形もなく全部消えたよねw

 

 

原因を自分なりに「 float  全部消える 」とググる

 

以下のブログがヒットした。 

 

読んでみると、親ボックス、小ボックス、とよくわからん単語が出てきたけれど、

 

最も簡単な対処法は親ボックスに高さをつけることらしい。

 

、、なるほど。

 

ということで、親ボックス?と考えられるheaderに高さをつけた。

f:id:arowoftree:20190629235614p:plain

見事解決!!

 

見事解決した!!!

 

 

やってみて。。。

 今まで塗り絵的なノリで学習していて知識がちゃんと身についているか不安だったけれど、何回も打ち込んでいるコードに関しては結構理解できていて驚いた。

 

 しかし、自分が打ち込まない(塗り絵的なノリで言うと、すでに塗ってあるところ)に関してはほとんど理解できていなかった。

 

 そのため、かなり単純なコードではあったけれど、めちゃめちゃむずかった。だから、仕様書通りできたときの快感が半端ない。

 

とりあえず、道場コースクリアしたいね。

 

 

why you gotta kick me when i'm down?

why you gotta kick me when i'm down?

  • Bring Me The Horizon
  • ロック
  • ¥250
  • provided courtesy of iTunes

 なんだかんだamoをめっちゃ聞いてる梅雨入り前。