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
Kyotojs15_-_handy-media-query.pdf
Search
1natsu
January 12, 2019
Technology
1
1.1k
Kyotojs15_-_handy-media-query.pdf
Kyoto,js 15で話したスライドです
styled-componentsやemotionでメディアクエリをパッとやるという内容で喋りました
1natsu
January 12, 2019
Tweet
Share
More Decks by 1natsu
See All by 1natsu
ところでアジャイル開発のアジャイルってなんなんですか?
1natsu172
1
2.7k
文脈の多いこのご時世にユーザーフレンドリーなモジュールをnpm-publish - Kyoto.js16
1natsu172
1
310
AZUSA for Mac 2011を解説したスライド
1natsu172
0
5k
Other Decks in Technology
See All in Technology
Rebase エンジニアリング組織の現状とこれから
rebase_engineering
0
120
フロントエンドがTypeScriptなら、バックエンドはPHPでもいいじゃない/php-is-not-bad
hanhan1978
8
12k
Postman AI エージェントビルダー最新情報
nagix
0
120
オープンソースとビジネス: 位置情報の世界からみえる流れ / 札幌IT石狩鍋#2
sorami
0
220
ITエンジニアを取り巻く環境とキャリアパス / A career path for Japanese IT engineers
takatama
3
1.5k
Redmineの意外と知らない便利機能 (Redmine 6.0対応版)
vividtone
0
810
TerraformとGitHub Actionsで手軽に実装するECSのCI/CD
k___tkg
0
230
CloudTrailも、GuardDutyも、VPC Flow logsも… ログ多すぎ問題の整理術
nikuyoshi
5
570
Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
0
290
変化に強いテーブル設計の勘所 / Table design that is resistant to changes
soudai
PRO
50
13k
Okayama WordPress Meetup #12 | そのバックアップ、本当に復元できますか? リストアやってみた!
takeshifurusato
0
100
君だけのオリジナル async / await を作ろう / TSKaigi 2025
susisu
17
12k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.9k
The Cult of Friendly URLs
andyhume
78
6.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
Fireside Chat
paigeccino
37
3.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Automating Front-end Workflow
addyosmani
1370
200k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Balancing Empowerment & Direction
lara
1
73
Six Lessons from altMBA
skipperchong
28
3.8k
Transcript
1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ ࣗݾհ
1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ υۓு ࣗݾհ
1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ υۓு དྷͨͱ͖͓ෲݮͬͯͳ͔ͬͨΜͰ͢… ࣗݾհ
ແ 1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ υۓு དྷͨͱ͖͓ෲݮͬͯͳ͔ͬͨΜͰ͢… ࣗݾհ
$44JO+4Ͱ ϝσΟΞΫΤϦΛ ύοͱΔ
TUZMFEDPNQPOFOUTͰ ϝσΟΞΫΤϦΛ ύοͱΔ
FNPUJPOͰ ϝσΟΞΫΤϦΛ ύοͱΔ
ಥવͰ͕͢
͜ͷͳ͔ʹ ϝσΟΞΫΤϦͷه๏͕ ύοͱग़Δ͓ํ ͍Βͬ͠Ό͍·͔͢ʁ
ग़Δͻͱ
εΰΠ
ग़ͳ͍ͻͱ
None
ReactͷίϯϙʔωϯτΛ ॻ͍͍ͯͨΜͰ͢Α ͋Δ
None
ϝσΟΞΫΤϦͷ ॻ͖͔ͨࣗମ͕ ύοͱΘ͔Βͳ͍
@media all and (max-width: 12450px) { … }
@media all and (max-width: 12450px) { … } ؙׅހͰғ͏
@media all and (max-width: 12450px) { … } ؙׅހͰғ͏ ϓϨϑΟοΫεmin-͔max-
@media all and (max-width: 12450px) { … } ؙׅހͰғ͏ ϓϨϑΟοΫεmin-͔max-
͜Ε͕media-feature
@media all and (max-width: 12450px) { … } ؙׅހͰғ͏ ϓϨϑΟοΫεmin-͔max-
͜Ε͕media-feature ίϩϯ
@media all and (max-width: 12450px) { … } ؙׅހͰғ͏ ϓϨϑΟοΫεmin-͔max-
͜Ε͕media-feature ίϩϯ ΫΦʔτͰғΘͳ͍
None
ͦͦ
ຖճॻ͘ͷݫ͍͠
୯Ґ͕͋ΔͷͰ emͰॻ͖͍ͨ https://zellwk.com/blog/media-query-units/
ϒϨʔΫϙΠϯτ ͍͍ܾͨͯ·ͬͯ͘ΔͷͰ ཧͱͯ͜͠͏ॻ͖͍ͨ
ίϯϙʔωϯτಠࣗͷ ΞϓϦέʔγϣϯͰ ڞ௨Ͱͳ͍ہॴతͳ ϝσΟΞΫΤϦ͕ग़͖ͯͨ
ͳΜ͔ ͏·͍͜ͱ ͳΒΜ͔ͳʙ
͋Δ͜ͱʹ͋Δ
TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ
ϒϨʔΫϙΠϯτఆٛ TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ
ϒϨʔΫϙΠϯτఆٛ TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ styled-componentsઐ༻ ϝσΟΞΫΤϦϥούʔͳ ΦϒδΣΫτΛ࡞
ϒϨʔΫϙΠϯτఆٛ TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ styled-componentsઐ༻ ϝσΟΞΫΤϦϥούʔͳ ΦϒδΣΫτΛ࡞ ͍ͬͯ͘ (ςϯϓϨʔτϦςϥϧ͕ ೖΕࢠʹͳΔ)
ϒϨʔΫϙΠϯτఆٛ TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ styled-componentsઐ༻ ϝσΟΞΫΤϦϥούʔͳ ΦϒδΣΫτΛ࡞ Αͦ͞͏Ͱ͋Δ͕…ઐ༻ ͍ͬͯ͘ (ςϯϓϨʔτϦςϥϧ͕ ೖΕࢠʹͳΔ)
FNPUJPOͷGBDFQBJOUΛ͏ྫ
ྻͰϒϨʔΫϙΠϯτ FNPUJPOͷGBDFQBJOUΛ͏ྫ
ϝσΟΞΫΤϦ࡞ ྻͰϒϨʔΫϙΠϯτ FNPUJPOͷGBDFQBJOUΛ͏ྫ
ϝσΟΞΫΤϦ࡞ ྻͰCSSΛॻ͘ ॱ൪ϝσΟΞΫΤϦॱ ྻͰϒϨʔΫϙΠϯτ FNPUJPOͷGBDFQBJOUΛ͏ྫ
ϝσΟΞΫΤϦ࡞ ྻͰCSSΛॻ͘ ॱ൪ϝσΟΞΫΤϦॱ ྻͰϒϨʔΫϙΠϯτ ύοͱΈͯΘ͔ΒΜ͘ͳ͍ʁ FNPUJPOͷGBDFQBJOUΛ͏ྫ
ͳΜ͔ ͏·͍͜ͱ ͳΒΜ͔ͳʙ
ͳΜ͔ ͏·͍͜ͱ ͳΒΜ͔ͳʙ ͦΜͳ͏·͍ͳ͍
͏·͍͜ͱ ͢Δ͔͠ͳ͍
yarn add @1natsu/handy-media-query
TypeScriptͰॻ͍͍ͯ·͢
None
Α͏͢ΔʹϝσΟΞΫΤϦ͘Μ
Φϓγϣϯ͋ΔΑ
None
͔͍͔ͭͨ
mediaQuery.js
mediaQuery.js ϝσΟΞΫΤϦ͘Μ
mediaQuery.js ϝσΟΞΫΤϦ͘Μ ϝσΟΞΫΤϦ ͓·ͱΊ͘Μ
mediaQuery.js ϝσΟΞΫΤϦ͘Μ ϝσΟΞΫΤϦ ͓·ͱΊ͘Μ px→emม͘Μ
mediaQuery.js
mediaQuery.js Α͘͏ϒϨʔΫϙΠϯτΛఆٛ (breakpoints.jsΈ͍ͨͳผϑΝΠϧʹΓग़ͯ͠OK)
mediaQuery.js
mediaQuery.js value͕’@media~’ͷΦϒδΣΫτΛ৯ΘͤΔ
mediaQuery.js খ͍͠ϝσΟΞΫΤϦఘΊͯॻ͘… value͕’@media~’ͷΦϒδΣΫτΛ৯ΘͤΔ
mediaQuery.js ໊͍લͰΤΫεϙʔτ͢Δͱศར
None
None
ఆٛͨ͠ϝσΟΞΫΤϦΦϒδΣΫτΛimport
ఆٛͨ͠ϝσΟΞΫΤϦΦϒδΣΫτΛimport ςϯϓϨʔτϦςϥϧͳͷͰ ఆ͓͍ٛͯͨ͠ϝσΟΞΫΤϦΛల։͢ΕOK
ఆٛͨ͠ϝσΟΞΫΤϦΦϒδΣΫτΛimport ςϯϓϨʔτϦςϥϧͳͷͰ ఆ͓͍ٛͯͨ͠ϝσΟΞΫΤϦΛల։͢ΕOK ہॴతͳϒϨʔΫϙΠϯτ͕ग़ͯγϡοͱॻ͚Δ
ൺֱ
ൺֱ
ݟ௨͕͠Α͘ͳͬͯ ͳΜͱͳ͘εοΩϦ
• ϝσΟΞΫΤϦΛύοͱੜ • pxΛ͚ͩ͢ • emʹมࡁΈ • TSϑϨϯυϦʔ
• ϝσΟΞΫΤϦΛύοͱੜ • pxΛ͚ͩ͢ • emʹมࡁΈ • TSϑϨϯυϦʔ • APIͷ౷ҰͰύοͱͳΔ
• mqΦϒδΣΫτΛݟΕΑ͍ • ہॴతͳϝσΟΞΫΤϦOK • ݟ௨͕͠Α͘ͳΔ
• ϝσΟΞΫΤϦΛύοͱੜ • pxΛ͚ͩ͢ • emʹมࡁΈ • TSϑϨϯυϦʔ • APIͷ౷ҰͰύοͱͳΔ
• mqΦϒδΣΫτΛݟΕΑ͍ • ہॴతͳϝσΟΞΫΤϦOK • ݟ௨͕͠Α͘ͳΔ • ϥΠϒϥϦʹґଘ͍ͯ͠ͳ͍ • CSS in JSଆͷΞοϓσʔτͰ ഁ໓͠ͳ͍(͔)
ϝσΟΞΫΤϦΛ ύοͱΕΔΑ͏ʹͳͬͯ ͢͜͠Α͘ͳͬͨ (ݸਓൺ)
ϝσΟΞΫΤϦΛ ύοͱΔͳ͠Ͱͨ͠ ऴ