Day 8-CSS入門　メディアクエリー編

★本日の学習成果まとめ

・メディアクエリーとはスマートフォンやデスクトップなどの表示領域が違う機器ごとに見え方を変える際に使用するもの。
最近ではスマートフォン向けにモバイルファーストと呼ばれる手法でコーディングするのが一般的。

・ブレイクポイントを複数指定するときは小さいブレイクポイントから記載すること。そうしないと後から記載したブレイクポイントが動作せずに終わってしまう。

・@media (min-width)や(max-width)でメディアクエリーを動作させる。
(min-width: 600px)にすると、600px以上の表示領域だと動作する設定である。

・要素を消したり、出現させたりすることができる。
メディアクエリー外でdisplay:noneしておき、メディアクエリー内でdisplay:block等でデフォルトに戻すことで常に消えるが表示領域が拡大したときに出現することができる。

※復習
・display:flexで要素を横並びに
display:blockで要素を縦並びにすることができる。
その状態で、justyfy-content:space-betweenによって軸線上に等間隔に並べることができる。
・calc(100% - 8px / 2)によって画面表示一杯から8px分余白を与えて半分ずつ表示させることができる。よく使う表現。

★ノート

・メディアクエリーとはスマホやPCなど表示領域が違う媒体で見え方を変えたいときに使用するもの。
例えば、
```
@media (min-width: 600px) {
  body {
    background-color: skyblue;
  }
}
```
と書けば、ビューポート(画面の表示領域)が600px以上になると背景色が切り替わるプログラムになる。

・ビューポートの幅でブレイクポイントを複数設定するときは小さいブレイクポイントから記載すること。そうしないと、後から書いたプロパティが優先されて思った通りにならないことがあるから。

・小さいブレイクポイントから記載することを「モバイルファースト」大きいブレイクポイントから記載することを「デスクトップファースト」と言っている。最近はモバイルファーストなんだろうな。

・ビューポートの幅で、コンテンツの動作を変えることがよくある。
例えば、

@media (min-width: 600px){

  .container {

    display:flex

  }

とすることで、ビューポートが600px以上になると、containerクラスをフレックスボックスにして、横並びに変えることができる。
また、この場合は2つのコンテンツが横並びにするときは、一方の幅を設定し、もう一方はflex:1;とすることで、画面いっぱいにコンテンツが広がる。フレックスボックス編でやっていたがすぐ忘れていた。

・要素を消すこともできる。
display:noneによって要素を消すことができる。

・要素を出現することもできる。
メディアクエリーの外でdisplay:none;しておいて、メディアクエリー内でdisplay:block;やdisplay:inline;でデフォルトの要素に戻すことで要素を出現させることができる。

・復習
フレックスボックスのレイアウトでjustify-content: space-between;とすることで、横の軸線上に等間隔に配置することができる。何度も復習が必要だな。

・メディアクエリー内でdisplay:noneとdisplay:brockを組み合わせることでメニューを切り替えたような表示ができる。

・復習
display:flexにすると、要素が横並びになり、display:brockにすると要素が縦並びになる。
また、calcで単位の違う計算をすることができる。
例えば、
ｃａｌｃ（100% - 8px / 2）とすれば、表示領域100%から間に8px引いた分の半分にそれぞれ表示させることができる