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
86
Media Queries
howdy39
May 11, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
460
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
84
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
0
1.2k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
590
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
610
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.5k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.3k
Promise
howdy39
1
340
カラーユニバーサルデザイン / color universal design
howdy39
0
840
Other Decks in Programming
See All in Programming
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
790
「個人開発マネタイズ大全」が教えてくれたこと
bani24884
1
190
Jakarta EE meets AI
ivargrimstad
0
370
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
540
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
890
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
280
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
140
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
17
3.9k
CloudNativePGを布教したい
nnaka2992
0
110
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.6k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Fireside Chat
paigeccino
34
3.2k
Speed Design
sergeychernyshev
27
810
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Facilitating Awesome Meetings
lara
52
6.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Making Projects Easy
brettharned
116
6k
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