Web講習会week2
2021/8/9-17
目標
googleのトップページをトレースする
https://gyazo.com/571897c548f08d6d67247c1149e3de5e
やること：先週の続き
cssで配置をきれいにする
検索inputの形状を揃える(角をとる)
画像を入れる
buttun？
いろいろ本物と違うところを直す
本物のやり方と、自分のやり方をちゃんとチェックする
今週のBefore
https://gyazo.com/4663647b7b1cb809924f4ff755c6332a
作業ログ
googleのトップページ、一つのdivにclassをたくさんつけてて見るのしんどい
結構使ってないclassも存在するし、、
flexboxまじで分からんになってきて渋い
配置が思ったようにできないことが今の問題
display: flex;
これをつけないと、中のコンテンツのpaddingとかが反映されない
上下の中央：align-items: center;
左右の中央：justify-content: center;
両端は端っこにくっつけて間は均等にする：justify-content: space-between;
↑に+して、ページ幅で折り返し：flex-wrap: wrap;
縦並び：flex-direction: column;
横並び：flex-direction: row;
横並び要素を互い違いに：flex-direction: row-reverse;
code:flexbox
.hoge {
display: flex;
justify-content: space-between;
}
.hoge {
display: flex;
flex-wrap: wrap;
}
.hoge {
display: flex;
align-items: center;
}
code:logo-menu
flexbotxでロゴとメニューを両端で分ける的なやつ必要な部分だけ抜き出すとこんな感じ！
ul {
display: flex;
li {
display: inline-block;
&:first-child {
margin-right: auto;
}
}
}
ポイントは、「margin-right: auto;」初めて知ったときは、めちゃくちゃ感動した。
この図が大変にわかりやすい(出典忘れた...techacademyの記事だったような...)
https://gyazo.com/aea972534d651216e3a419950fefccda
他資料
box-sizingって何？(ひとまず無視)
図形の角を丸くする
Feedback (2021/08/17)
できないこと解決
<a>の下線を消す
text-decoration: none;
Material Icon
ここからsvgをダウンロードできる
100vhを知る
min-height: 100vh;
bodyを100vhにして、中でflex-boxやってくと下に固定するfooterが設定できる
code:footer
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
footer {
margin-top: auto;
}
自分の作ったhtml/cssファイルの共有方法
↓ここに開発してるフォルダごとドラッグアンドドロップするのが一番早い
↑のサイトでDrag and Dropって書いてあるところに、HTML/CSSファイルをまとめたフォルダをぽいっとドラッグアンドドロップする
するとhttpsから始まるURLができるので、それをSlackに貼る
なんか知らんけど、VSCodeの実行でChromeに勝手に表示させる機能を発見した
After1→After2
Feedbackを受けて、2021/08/18の夜作業したログ
<a>の下線消す
text-decoration: none;
chromeのデフォルト設定でbodyにmargin 8pxが入ってるから消す
user agent stylesheet
bodyのcssにmargin 0px入れたら治った
svgとか画像入れる
material iconからDLして、imageフォルダ入れてhtmlでimgタグで入れた
search欄まわり
入力し始めると青い枠線が出てくるの消したい←どうやるんや
outline: none; で解決
“google検索“のところがなぜか上下中央にこないので確認
display: flex;を忘れていた
flexboxして、align-centerで解決
Chromeディベロッパーツールで登場する紫の網掛け
https://gyazo.com/531caf4c0031b004d4567b43c1799472
flexboxでcenterを指定していたり、配置を指定していると、それによって生まれた空白に対して出てくる
flexbox消したら消えた
文字にぴったりmargin始点合わせつつ、中央に揃えるにはどうしたらいいんだろう？
Before
https://gyazo.com/4663647b7b1cb809924f4ff755c6332a
After1 (Feedback時)
https://gyazo.com/968e64a1fa1257497a23bd25b440dfc3
After2 (Feedback後作業して)
https://gyazo.com/5519ed66778ee32d840ccacacca6d1d6
これが来週のbeforeになる