![見出し画像](https://assets.st-note.com/production/uploads/images/138264219/rectangle_large_type_2_1b86e8c16641d7d3f96a7c219ba35f05.png?width=800)
Photo by
mania_note
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%
→画面から横幅が出ないように設定する
この記事が気に入ったらサポートをしてみませんか?