メディアクエリとは
本日の教材動画はこちら
今回からなにやら新しい単語いついて勉強していきます。
メディアクエリとは
メディアクエリとは、CSSを利用して各種デバイスに合わせた表示・出力方法を指定することができるものです。デバイスの種類や表示解像度などをもとに、随時適切なものを自動的に選択してくれるものになります。
メディアクエリ＝レスポンシブサイトの基本！って感じでしょうかね？次にこのメディアクエリを指定していく方法をみていきましょう。
htmlで指定する
＜link rel="stylsheet" href="xxxx.css" media="（ここにメディアクエリを記述）"＞ という方法で指定ができます。ただこの書き方だと、xxx.cssにしかクエリが適応されませんので注意が必要。上記は複数指定することができますので、htmlでメディアクエリを指定する場合はいくつかパターンを用意して使う事になります。（この方法はブレイクポイントと呼ばれるそうです）
cssで指定する
CSSで指定する場合は＠media （メディアクエリの記述）｛ （CSSの記述）｝という方法で指定します。html指定とは違い、外部CSSなら複数パターンを用意しておき、それをページに読み込ませることで様々なデバイスに対応させることができます。また、外部CSSですので、＠mediaの外側に書かれているCSSは当然全て適応されるようになります。
レスポンシブサイトにするために、各デバイスに合わせた設定を行いましょう！！ということはなんとなーく理解しましたが、使ったことがないので今回の勉強だけだといまいちイメージがわかないですね…。次回は更に踏み込んで教えてくれるみたいなのでそちらで理解が深まることを期待します！
【参考サイト】
