【HTML&CSS】課題サイト①ヘッダーを作る

今日からスクールで本格的にコーディングの講座が始まりました！

勉強内容をどういう風に載せようかな…と悩んだのですが、全部書くときりがないので、HTMLとCSSは個人的に躓いたところを記録していこうと思います。

今日はトップページのヘッダーを途中まで作成しました。

上のようなヘッダーをコーディングしたい場合、次のようなCSSを記載する（赤マーカー部分が躓いたところ）

【CSS】
.header {
display: flex;
justify-content: space-between;
align-items: center;　←①
width: 100%;
max-width: 960px;　←②
margin: auto;
}

①ロゴとTEL番号・住所の高さを揃える

align-items: center;

②赤枠の要素を常に真ん中に揃える

max-width: 960px;

↓↓↓

『max-width』と『width』の違い
・『width』=表示する幅を固定するので、画面幅を縮めるとスクロールが出てしまう
・『max-width』=数値以上大きくならないので、指定した数値以下になると画面に合わせて幅を調整してくれる

たとえば、『width』で困るのはこんなとき
・スマートフォンやタブレットでは画面いっぱいに表示したい
・PCサイズの画面では固定幅にしたい
（※詳しくはサルワカさんのサイトを参照。私もふわっとしてたので復習します…）

今までずっと予習ばっかりだったので、ようやく講座が始まった－！という嬉しい気持ちと、あんなに予習したのに自分忘れてるやん…。という悲しみが両立しています。

今後はHTML＆CSSの講座がしばらく続くので、動画を見ながら予習する→講座を受ける→理解できたところをブログに書くというサイクルでいこうと思います！（つまりブログに書いたところが予習したけどできなかったところ。ブログに書けばさすがに覚えるんじゃなかろうか。）

あとは予習のストックが無くなると焦るので予習もどんどん進めねば。

やること沢山ですが頑張ります！