Media Queries 2018/5/11 第5回 TG社フロントエンド勉強会

Media Queries Media Queries（メディアクエリ）を使用することで デバイスの画面幅や向きなどに応じて表示を変えることができる /* 横幅768px以下のすべてのデバイス */ @media all and (max-width: 768px) { body { background-color: orange; } } メディアクエリは次の２つを利用して該当する条件を指定する ● Media Type（メディアタイプ）→ デバイスを指定 ● Media Feature（メディア特性）→ 特性を指定

LevelごとのW3Cプロセス ※ 引用 HTML標準仕様などを決める、W3Cによる勧告のプロセスとは？ https://www.buildinsider.net/web/htmltips/0001 Media Queries Level 3 Media Queries Level 4 今日話すのは 主にコレ

メディアタイプ 次の4つだけ覚えれば OK ※ 省略時は all 他にも次のような Media Type があるが Level 4で非推奨になる予定 tty, tv, projection, handheld, braille, embossed, aural all 全てに合致 print プリンタ/ブラウザの印刷プレビューに合致 screen print にも speech にも合致しないものすべてに合致 speech スクリーンリーダーなどの読み上げるものに合致

メディア特性 メディア特性は丸括弧()で括る ()の中には1つのメディア特性しか入れられない よく使われるやつだけ紹介 ● width ● height ● device-width ● device-height ● orientation ● etc...

width min-width と max-width を使い、横幅によって切り替える ※レスポンシブデザインでよく使う /* 横幅が768px以下のときのスタイル */ @media (max-width: 768px) { … } /* 横幅が769px以上のときのスタイル */ @media (min-width: 769px) { … } デモ1（CSS でメディアクエリを使用） https://howdy39.github.io/study-media-queries/demo1.html デモ2（link タグの media 属性でメディアクエリを使用） https://howdy39.github.io/study-media-queries/demo2.html

orientation portrait と landscape を使い、デバイスの向きに対応する /* 縦向きのスタイル */ @media (orientation: portrait) { … } /* 横向きのスタイル */ @media (orientation: landscape) { … } デモ https://howdy39.github.io/study-media-queries/demo3.html

複数の条件を設定 “and“ 例）screen かつ 768px以下 @media screen and (max-width: 768px) { } “,” 例）screen または print @media screen, print { }

おまけ

Script からもつかえる const mql = window.matchMedia("(max-width: 768px)"); if (mql.matches) { alert('横幅768px以下です'); } https://www.w3.org/TR/cssom-view/#dom-window-matchmedia https://caniuse.com/#search=matchMedia

検索エンジンに、モバイルサイトの存在を知らせるため によく使用される

参考サイト Media Queries Level 3 https://www.w3.org/TR/css3-mediaqueries/ Media Queries Level 4 https://www.w3.org/TR/mediaqueries-4/ MDN | Media Queries https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_quer ies