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
94
Media Queries
howdy39
May 11, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
540
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
170
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
3
1.5k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
640
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
670
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.6k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.4k
Promise
howdy39
1
380
カラーユニバーサルデザイン / color universal design
howdy39
0
920
Other Decks in Programming
See All in Programming
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
340
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
220
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
KATA
mclloyd
30
14k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
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