-本日のアジェンダ-
1限目
学科 CSS基礎③
メディアクエリについて
2限目
学科 CSS基礎③
メディアクエリの記述方法
3限目
学科 CSS基礎③
CSSの優先順位について
4限目
学科 CSS基礎③
実践トレーニング
5限目
学科 CSS基礎③
実践トレーニング
本日のテーマ
マルチデバイスに慣れましょう
“メディアクエリ”とは、主にスマホ対応するレスポンシブデザインに必須となるタグで、メディアタイプやメディア特性によって各種対応するデバイスや、分岐条件（widthを用いた横幅のサイズ）などを指定することによって、Webサイトを各種デバイスに適した形で見せることができ、最近ではheadタグやcssに必ずと言って良いほど記述されていると思われます。
訪問ユーザーが使用するデバイスの幅に合わせたWebの見せ方を可能にするもので、スマホからアクセスした際にPC用のページが表示されると当然文字が小さくて閲覧しにくい…といったユーザビリティを考慮して画面サイズに適したデザイン表示させるために必要なタグです。
media=”screen and (max-width:767px)“メデイアタイプ
all・・・すべてのデバイスに適した
braille (点字)
embossed
handheld (ハンドヘルドコンピュータ)
print・・・印刷に適用
projection
screen・・・PCやスマホなど画面に適した
speech
tty
tv
メディア特性
これは主にブレイクポイントと呼ばれるデバイスの横幅といった意味で、上記の場合だと横幅最大767pxまでのデバイスを対象とするわけです。（767px以下のスマホを対象とする。）
iPhone/iPad/Apple Watch解像度(画面サイズ)早見表
◆メディアクエリの記述方法
・書き方は２種類
読み込むcssファイルそのものをデバイスによって変える（外部ファイルとして指定するパターン）
読み込むスタイルをデバイスによって変える（直接記述するパターン）
【大前提】
このメディアクエリはビューポートがあってはじめて機能するので、基本となる以下のタグもhead内に必ず記述してください。
①外部ファイルとして指定するパターン＝htmlに記述する
②直接記述するパターン＝cssに記述する
@media screen and (min-width: 768px) {
（ここにPC用スタイルを記述）
}
@media screen and (max-width: 767px) {
（ここにモバイル用スタイルを記述）
}
中間としてタブレットを指定する場合
@media only screen and (min-width: 767px) and (max-width: 1280px) {
（ここにタブレット用スタイルを記述）
}
▼おすすめの書き方
先にPC用のCSSを書く
@media screen and (max-width:767px) {
（ここにモバイルにだけ適用したいスタイルを記述）
}