１年をターゲットとして考えると、スマホでの閲覧の対応は絶対必要！
なので、スマホでの閲覧の対応→レスポンシブデザインに挑戦しようと思う。
レスポンシブデザイン
・メディアクエリを使う
メディアクエリとは画面のサイズに合わせて、cssを設定すること。らしい。
つまりpcのときと、スマホのときのcssを同じCSSでやることだと思う。
やりかたは@media(条件）{...}
そして条件訳の際に考慮することの一つとしてブレイクポイントがある。
スマホ ～670px
タブレット ～1000px
pc ～それ以上
progateでは上記の3段階でコーディングしてるが、今回はめんどくさそうなので、スマホ、PCの2段階でやろうと思う。
よってブレイクポイントは670px!!
・viewportを使う
これをつかわないと行けないらしい。
・全体のwidthを100％にする
中級編では1170pxにしていたらしいが、それだとスマホに対応できないらしい。
おまけ
box-sizing:border-box で widthの中に paddingとborderが入る
これで
%のレイアウト崩れを防げるらしい
くわえて*{ }のアスタリスクカッコですべてのCSSに反映するのがおすすめらしい。
・レスポンシブデザインのメニューバーがpcサイズでも表示されてる。。。
どうやらdisplay: none;
が無効化されてるみたいだ。
セレクタを詳しく指定するのを、通常とメディアクエリの両方に適用したら解決した！！
cssの背景が映らない。。
親要素、子要素に高さをつける
スラッシュバーの向きが標準/から\ちゃんとした向きに変える
で
解決。
画像が縦に伸びる。
flexを指定している親要素と子要素の間にdiv入れれば解決
