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
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
3
280
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
220
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
0
120
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
210
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
2
900
BirdCLEF+2025 Noir 5位解法紹介
myso
0
200
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
130
自動テストのコストと向き合ってみた
qa
0
190
VCC 2025 Write-up
bata_24
0
180
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
2
260
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
1k
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
220
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
For a Future-Friendly Web
brad_frost
180
9.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Designing for humans not robots
tammielis
254
25k
Faster Mobile Websites
deanohume
310
31k
Why Our Code Smells
bkeepers
PRO
339
57k
Scaling GitHub
holman
463
140k
We Have a Design System, Now What?
morganepeng
53
7.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ଆͷΞοϓσʔτͰ ഁ໓͠ͳ͍(͔)
ϝσΟΞΫΤϦΛ ύοͱΕΔΑ͏ʹͳͬͯ ͢͜͠Α͘ͳͬͨ (ݸਓൺ)
ϝσΟΞΫΤϦΛ ύοͱΔͳ͠Ͱͨ͠ ऴ