Web講習会week1

2021/7/31-8/8

目標

googleのトップページをトレースする

https://gyazo.com/571897c548f08d6d67247c1149e3de5e

やること：googleのトップページをトレースする

htmlに要素を書き出す

cssで配置をきれいにする

検索inputの形状を揃える

画像を入れる

buttun？

いろいろ本物と違うところを直す

本物のやり方と、自分のやり方をちゃんとチェックする

やったこと

htmlに要素を書き出す

cssで配置をきれいにする→途中

bodyの配置をcenterにしたいと思ったら、揃わなくて断念した

Feedback

Before

https://gyazo.com/22da98594bd286d3cdd398053b1687d7

After

https://gyazo.com/4663647b7b1cb809924f4ff755c6332a

ディベロッパツールで、何がその配置たらしめているか確認する

注目すべき要素を見つける

階層構造を確認

上のdivを見ていく

チェックボックスを外してみて、その挙動が消えるかどうか

こうやってやるとこの動きができるんだ(ex. divを二重構造にしてこうやるとcenterになるな！)、を知っていく

今回の私は、flexbox→align-items

.LS8OJ {display: flex; flex-direction: column; align-items: center;}

出てきた用語はぐぐる。