Media Queries

Transcript

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

2. Media Queries Media Queries（メディアクエリ）を使用することで デバイスの画面幅や向きなどに応じて表示を変えることができる /* 横幅768px以下のすべてのデバイス */ @media all

   and (max-width: 768px) { body { background-color: orange; } } メディアクエリは次の２つを利用して該当する条件を指定する • Media Type（メディアタイプ）→ デバイスを指定 • Media Feature（メディア特性）→ 特性を指定

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

   Queries Level 4 今日話すのは 主にコレ

4. メディアタイプ 次の4つだけ覚えれば OK ※ 省略時は all 他にも次のような Media Type があるが

   Level 4で非推奨になる予定 tty, tv, projection, handheld, braille, embossed, aural all 全てに合致 print プリンタ/ブラウザの印刷プレビューに合致 screen print にも speech にも合致しないものすべてに合致 speech スクリーンリーダーなどの読み上げるものに合致

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

   • device-height • orientation • etc...

6. 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

7. orientation portrait と landscape を使い、デバイスの向きに対応する /* 縦向きのスタイル */ @media (orientation:

   portrait) { … } /* 横向きのスタイル */ @media (orientation: landscape) { … } デモ https://howdy39.github.io/study-media-queries/demo3.html

8. 複数の条件を設定 “and“ 例）screen かつ 768px以下 @media screen and (max-width: 768px)

   { } “,” 例）screen または print @media screen, print { }

9. おまけ

10. Script からもつかえる <script> const mql = window.matchMedia("(max-width: 768px)"); if (mql.matches)

    { alert('横幅768px以下です'); } </script> https://www.w3.org/TR/cssom-view/#dom-window-matchmedia https://caniuse.com/#search=matchMedia

11. 検索エンジンに、モバイルサイトの存在を知らせるため によく使用される <link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.yahoo.co.jp/">

    <link rel="alternate" media="handheld" href="http://m.tabelog.com" />

12. 参考サイト 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