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
96
Media Queries
howdy39
May 11, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
560
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
180
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
3
1.6k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
670
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
670
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.7k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.5k
Promise
howdy39
1
380
カラーユニバーサルデザイン / color universal design
howdy39
0
940
Other Decks in Programming
See All in Programming
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
300
testingを眺める
matumoto
1
130
AIコーディングAgentとの向き合い方
eycjur
0
260
時間軸から考えるTerraformを使う理由と留意点
fufuhu
14
4.4k
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
310
速いWebフレームワークを作る
yusukebe
5
1.7k
OSS開発者という働き方
andpad
5
1.7k
ソフトウェアテスト徹底指南書の紹介
goyoki
1
140
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
380
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
18
9.7k
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
430
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Fireside Chat
paigeccino
39
3.6k
Optimizing for Happiness
mojombo
379
70k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
The World Runs on Bad Software
bkeepers
PRO
70
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
Agile that works and the tools we love
rasmusluckow
330
21k
Gamification - CAS2011
davidbonilla
81
5.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Being A Developer After 40
akosma
90
590k
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