コーディング授業復習　レスポンシブ対応

レスポンシブ対応の授業復習です。

レスポンシブ対応させるためには、
①viewportを設定する
②CSSを上書きしていく

CSS（スタイルシート）のメディアクエリをmax-width: 750pxのように指定してあげることで、画面のサイズが750pxまではモバイル向けの表示になり、751px以上でPC版の表示に切り替えてくれる。

・メディアクエリとは
デバイスの解像度やウィンドウの幅（画面サイズ）、向きなどの指定条件に合わせて、パソコンとスマホで別々のCSSを適用できる機能のことをいう。
そのためには、ブレイクポイントの設定をする。

・ブレイクポイントとは
CSSソース内で適用スタイルを区切る位置のこと。 だいたいは画面の横幅サイズを使ってブレイクポイントを設定する。

・viewportとは
表示領域のこと。Webページの横幅がviewportとなる。
viewportを指定することで、画面幅いっぱいにコンテンツがおさまるようなる。

CSSは以下のように書く

@media screen and (max-width:1000px) {

​}

{}の中に、いつも通りCSSを書く。

表記はmax-widthとmin-widthで書く。

ちょっと諸事情によりここまででおわり。