Web講習会week3

2021/8/18-

目標

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

https://gyazo.com/571897c548f08d6d67247c1149e3de5e

やること：先週の続き

footer的部分の配置、おかしいやんけ！！とかのポカを探す

なんとなく構造は掴めてきたけど、header的部分のdiv構造がどういう意図なのかよくわからん。整理する

検索欄周りをきれいにする

特にサイズと配置

googleで検索〜の文字サイズ、下の位置がおかしい

ログインのフォントがおかしいし、押せない

appのところも押せない

カーソルを合わせると下線が出てきたり、浮き上がったような動きをするのはどうやるんだろう？

実はgoogle検索とI'm Feeling Luckyのところはinputらしいのだが、よくわからない。調べる。

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

特にレスポンスとか

フォントとかフォントカラーとか

今週のBefore

feedback

今週：それらしくなる。inputにはline-height

来週：ホバー、レスポンシブを眺める(できればやってみる)(院試頑張る)

今日もらったコメント

検索ボックスのコメントいらない。入力欄と虫眼鏡を中心に揃える(上位のdivクラスmarginを消す)

inputはインライン？要素なので、heightは効いていなくて、line-height(文字行の高さ)をしてみる

floatは画像の周りに文字並べる時しかやらない

最終的にCSSは宗教戦争になるので、早めに信仰を捨てよ

来週以降

検索ボタンに影をつける

filter: drop-shadow(offset-x offset-y blur-radius color)

擬似クラス←ホバー要素

レスポンシブ

ログインボタンを押した時に開くとか→JS