codejump課題1 詰まったところメモ

できなかったところ

・flexboxで横並びにしたリストを中心に配置する

・上記を画面幅によって画像サイズを変える

答え合わせをして気づいたところ

・classだけでなくidをつけている

・ヘッダーやセクションのクラス名がwrapperになっている
→横幅のサイズを指定するために共通クラスを作成している

・100vhは画面の縦幅いっぱいのサイズ

次から取り入れたいこと

・htmlにfont-size:100%
→ユーザーがブラウザで設定したfontsizeが正しく反映される

・headerにalign-items: center
→ヘッダーの要素の高さが中央になる

・paddingとmarginの使い分け
→borderの間に余白を入れたい時はpadding
→borderの外に余白を入れたい時はmarginを使う

・flex-boxの要素の縦並びはflex-direction: column

・liのwidthをパーセントで設定
→画面幅を狭めた際に画像の横幅も狭まる
→スマホの場合は、「width: 100%;」で画像を横幅いっぱいまで広げる

・img max-width 100%
→画面から横幅が出ないように設定する