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.2k
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.9k
文脈の多いこのご時世にユーザーフレンドリーなモジュールをnpm-publish - Kyoto.js16
1natsu172
1
320
AZUSA for Mac 2011を解説したスライド
1natsu172
0
5k
Other Decks in Technology
See All in Technology
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
420
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
gotalab555
10
17k
ビズリーチ求職者検索におけるPLMとLLMの活用 / Search Engineering MEET UP_2-1
visional_engineering_and_design
1
180
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
3
2k
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
5.2k
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
500
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
190
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
0
190
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
110
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
340
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
A better future with KSS
kneath
239
18k
Typedesign – Prime Four
hannesfritz
42
2.8k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Making Projects Easy
brettharned
120
6.4k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Documentation Writing (for coders)
carmenintech
75
5.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
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ଆͷΞοϓσʔτͰ ഁ໓͠ͳ͍(͔)
ϝσΟΞΫΤϦΛ ύοͱΕΔΑ͏ʹͳͬͯ ͢͜͠Α͘ͳͬͨ (ݸਓൺ)
ϝσΟΞΫΤϦΛ ύοͱΔͳ͠Ͱͨ͠ ऴ