Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Media Queries
Search
howdy39
May 11, 2018
Programming
0
79
Media Queries
howdy39
May 11, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
0
1k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
510
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
550
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.3k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.2k
Promise
howdy39
1
290
カラーユニバーサルデザイン / color universal design
howdy39
0
740
Geolocation API
howdy39
0
95
Chrome DevTools の Console を使いこなす/Using the Chrome dev tool
howdy39
0
190
Other Decks in Programming
See All in Programming
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
daichi_igarashi
0
220
Swift Concurrencyとレースコンディション
objectiveaudio
1
390
Meet BrowserEngineKit
swiftty
0
300
The Future of Frontend i18n : Intl.MessageFormat
sajikix
1
2.4k
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
360
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
220
私の考える初学者がBlazorできるまでの学習方法
tomokusaba
1
250
ECMAScript仕様を読むのに必要な知識 - ダイジェスト版
syumai
4
2.6k
1人で挑むSwiftコンパイラ 〜型システム入門編〜
s_shimotori
0
320
New Order in Cascade Sorting Order
mugi_uno
3
2.5k
LangChainの現在とv0.3にむけて
os1ma
3
740
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
110
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
How to Think Like a Performance Engineer
csswizardry
15
920
How to name files
jennybc
75
98k
Writing Fast Ruby
sferik
623
60k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Become a Pro
speakerdeck
PRO
22
4.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Git: the NoSQL Database
bkeepers
PRO
425
64k
StorybookのUI Testing Handbookを読んだ
zakiyama
25
5k
How to train your dragon (web standard)
notwaldorf
85
5.6k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
From Idea to $5000 a Month in 5 Months
shpigford
378
46k
Transcript
Media Queries 2018/5/11 第5回 TG社フロントエンド勉強会
Media Queries Media Queries(メディアクエリ)を使用することで デバイスの画面幅や向きなどに応じて表示を変えることができる /* 横幅768px以下のすべてのデバイス */ @media all
and (max-width: 768px) { body { background-color: orange; } } メディアクエリは次の2つを利用して該当する条件を指定する • 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 からもつかえる <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
検索エンジンに、モバイルサイトの存在を知らせるため によく使用される <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" />
参考サイト 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