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
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
2k
文脈の多いこのご時世にユーザーフレンドリーなモジュールをnpm-publish - Kyoto.js16
1natsu172
1
260
AZUSA for Mac 2011を解説したスライド
1natsu172
0
5k
Other Decks in Technology
See All in Technology
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
Classmethod Odyssey 登壇資料
yamahiro
0
390
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.7k
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Agile that works and the tools we love
rasmusluckow
325
20k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Building an army of robots
kneath
301
42k
Designing for humans not robots
tammielis
247
25k
The Language of Interfaces
destraynor
151
23k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Designing Experiences People Love
moore
136
23k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
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ଆͷΞοϓσʔτͰ ഁ໓͠ͳ͍(͔)
ϝσΟΞΫΤϦΛ ύοͱΕΔΑ͏ʹͳͬͯ ͢͜͠Α͘ͳͬͨ (ݸਓൺ)
ϝσΟΞΫΤϦΛ ύοͱΔͳ͠Ͱͨ͠ ऴ