Media Queries

Media Queries

5abf9d4714b77a15beea063d08586560?s=128

howdy39

May 11, 2018
Tweet

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; } } メディアクエリは次の2つを利用して該当する条件を指定する • 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