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
80
Media Queries
howdy39
May 11, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
1
190
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
49
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
0
1.1k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
520
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
560
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.4k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.2k
Promise
howdy39
1
290
カラーユニバーサルデザイン / color universal design
howdy39
0
750
Other Decks in Programming
See All in Programming
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
1
150
Go製CLIツールGatling Commanderによる負荷試験実施の自動化
okmtz
3
650
"noncopyable types" の使いどころについて考えてみた
andpad
0
130
CDKを活用した 大規模コンテナ移行 プロジェクトの紹介
yoyoyopg
0
230
データサイエンスのフルサイクル開発を実現する機械学習パイプライン
xcnkx
2
460
AWS CDKを用いたセキュアなCI/CDパイプラインの構築 / Build a secure CI/CD pipeline using AWS CDK
seike460
PRO
3
500
Интеграционное тестирование: как приручить хаос
mariyasaygina
0
480
Modern Functional Fluent CFML REST by Luis Majano
ortus24
0
120
◯◯エンジニアになった理由
gessy0129
PRO
0
590
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
160
個人開発で使ってるやつを紹介する回
yohfee
1
650
標準ライブラリの動向とイテレータのパフォーマンス
makki_d
3
190
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
What's in a price? How to price your products and services
michaelherold
243
11k
Gamification - CAS2011
davidbonilla
80
5k
Practical Orchestrator
shlominoach
185
10k
Design by the Numbers
sachag
278
19k
A better future with KSS
kneath
235
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Mobile First: as difficult as doing things right
swwweet
222
8.8k
How STYLIGHT went responsive
nonsquared
94
5.1k
Designing for humans not robots
tammielis
249
25k
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