Kyotojs15_-_handy-media-query.pdf

Transcript

1. 1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ ࣗݾ঺հ

2. 1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ υۓு ࣗݾ঺հ

3. 1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ υۓு
 དྷͨͱ͖͸͓ෲݮͬͯͳ͔ͬͨΜͰ͢… ࣗݾ঺հ

4. ແ 1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ υۓு
 དྷͨͱ͖͸͓ෲݮͬͯͳ͔ͬͨΜͰ͢… ࣗݾ঺հ

5. $44
   JO
   +4Ͱ
   ϝσΟΞΫΤϦΛ
   ύοͱ΍Δ

6. TUZMFEDPNQPOFOUTͰ
   ϝσΟΞΫΤϦΛ
   ύοͱ΍Δ

7. FNPUJPOͰ
   ϝσΟΞΫΤϦΛ
   ύοͱ΍Δ

8. ಥવͰ͕͢

9. ͜ͷͳ͔ʹ ϝσΟΞΫΤϦͷه๏͕ ύοͱग़Δ͓ํ͸ ͍Βͬ͠Ό͍·͔͢ʁ

10. ग़Δͻͱ

11. εΰΠ

12. ग़ͳ͍ͻͱ

13. None

14. ReactͷίϯϙʔωϯτΛ ॻ͍͍ͯͨΜͰ͢Α ͋Δ೔

15. None

16. ϝσΟΞΫΤϦͷ ॻ͖͔ͨࣗମ͕ ύοͱΘ͔Βͳ͍

17. @media all and (max-width: 12450px) { … }

18. @media all and (max-width: 12450px) { … } ؙׅހͰғ͏

19. @media all and (max-width: 12450px) { … } ؙׅހͰғ͏ ϓϨϑΟοΫε͸min-͔max-

20. @media all and (max-width: 12450px) { … } ؙׅހͰғ͏ ϓϨϑΟοΫε͸min-͔max-

    ͜Ε͕media-feature

21. @media all and (max-width: 12450px) { … } ؙׅހͰғ͏ ϓϨϑΟοΫε͸min-͔max-

    ͜Ε͕media-feature ίϩϯ

22. @media all and (max-width: 12450px) { … } ؙׅހͰғ͏ ϓϨϑΟοΫε͸min-͔max-

    ͜Ε͕media-feature ίϩϯ ΫΦʔτͰғΘͳ͍
23. None

24. ͦ΋ͦ΋

25. ຖճॻ͘ͷݫ͍͠

26. ୯Ґ໰୊͕͋ΔͷͰ emͰॻ͖͍ͨ https://zellwk.com/blog/media-query-units/

27. ϒϨʔΫϙΠϯτ͸ ͍͍ܾͨͯ·ͬͯ͘ΔͷͰ ཧ૝ͱͯ͠͸͜͏ॻ͖͍ͨ

28. ίϯϙʔωϯτಠࣗͷ ΞϓϦέʔγϣϯͰ ڞ௨Ͱ͸ͳ͍ہॴతͳ ϝσΟΞΫΤϦ͕ग़͖ͯͨ

29. ͳΜ͔ ͏·͍͜ͱ ͳΒΜ͔ͳʙ

30. ͋Δ͜ͱʹ͸͋Δ

31. TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ

32. ϒϨʔΫϙΠϯτఆٛ TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ

33. ϒϨʔΫϙΠϯτఆٛ TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ styled-componentsઐ༻ ϝσΟΞΫΤϦϥούʔͳ ΦϒδΣΫτΛ࡞੒

34. ϒϨʔΫϙΠϯτఆٛ TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ styled-componentsઐ༻ ϝσΟΞΫΤϦϥούʔͳ ΦϒδΣΫτΛ࡞੒ ࢖͍ͬͯ͘ (ςϯϓϨʔτϦςϥϧ͕ ೖΕࢠʹͳΔ)

35. ϒϨʔΫϙΠϯτఆٛ TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ styled-componentsઐ༻ ϝσΟΞΫΤϦϥούʔͳ ΦϒδΣΫτΛ࡞੒ Αͦ͞͏Ͱ͸͋Δ͕…ઐ༻ ࢖͍ͬͯ͘ (ςϯϓϨʔτϦςϥϧ͕ ೖΕࢠʹͳΔ)

36. FNPUJPOͷGBDFQBJOUΛ࢖͏ྫ

37. ഑ྻͰϒϨʔΫϙΠϯτ FNPUJPOͷGBDFQBJOUΛ࢖͏ྫ

38. ϝσΟΞΫΤϦ࡞੒ ഑ྻͰϒϨʔΫϙΠϯτ FNPUJPOͷGBDFQBJOUΛ࢖͏ྫ

39. ϝσΟΞΫΤϦ࡞੒ ഑ྻͰCSSΛॻ͘ ॱ൪͸ϝσΟΞΫΤϦॱ ഑ྻͰϒϨʔΫϙΠϯτ FNPUJPOͷGBDFQBJOUΛ࢖͏ྫ

40. ϝσΟΞΫΤϦ࡞੒ ഑ྻͰCSSΛॻ͘ ॱ൪͸ϝσΟΞΫΤϦॱ ഑ྻͰϒϨʔΫϙΠϯτ ύοͱΈͯΘ͔ΒΜ͘ͳ͍ʁ FNPUJPOͷGBDFQBJOUΛ࢖͏ྫ

41. ͳΜ͔ ͏·͍͜ͱ ͳΒΜ͔ͳʙ

42. ͳΜ͔ ͏·͍͜ͱ ͳΒΜ͔ͳʙ ͦΜͳ͏·͍࿩͸ͳ͍

43. ͏·͍͜ͱ ͢Δ͔͠ͳ͍

44. yarn add @1natsu/handy-media-query

45. TypeScriptͰॻ͍͍ͯ·͢

46. None

47. Α͏͢ΔʹϝσΟΞΫΤϦ͘Μ

48. Φϓγϣϯ΋͋ΔΑ

49. None

50. ͔͍͔ͭͨ

51. mediaQuery.js

52. mediaQuery.js ϝσΟΞΫΤϦ͘Μ

53. mediaQuery.js ϝσΟΞΫΤϦ͘Μ ϝσΟΞΫΤϦ ͓·ͱΊ͘Μ

54. mediaQuery.js ϝσΟΞΫΤϦ͘Μ ϝσΟΞΫΤϦ ͓·ͱΊ͘Μ px→emม׵͘Μ

55. mediaQuery.js

56. mediaQuery.js Α͘࢖͏ϒϨʔΫϙΠϯτΛఆٛ (breakpoints.jsΈ͍ͨͳผϑΝΠϧʹ੾Γग़ͯ͠΋OK)

57. mediaQuery.js

58. mediaQuery.js value͕’@media~’ͷΦϒδΣΫτΛ৯ΘͤΔ

59. mediaQuery.js খ೉͍͠ϝσΟΞΫΤϦ͸ఘΊͯॻ͘… value͕’@media~’ͷΦϒδΣΫτΛ৯ΘͤΔ

60. mediaQuery.js ୹໊͍લͰΤΫεϙʔτ͢Δͱศར

61. None
62. None

63. ఆٛͨ͠ϝσΟΞΫΤϦΦϒδΣΫτΛimport

64. ఆٛͨ͠ϝσΟΞΫΤϦΦϒδΣΫτΛimport ςϯϓϨʔτϦςϥϧ಺ͳͷͰ ఆ͓͍ٛͯͨ͠ϝσΟΞΫΤϦΛల։͢Ε͹OK

65. ఆٛͨ͠ϝσΟΞΫΤϦΦϒδΣΫτΛimport ςϯϓϨʔτϦςϥϧ಺ͳͷͰ ఆ͓͍ٛͯͨ͠ϝσΟΞΫΤϦΛల։͢Ε͹OK ہॴతͳϒϨʔΫϙΠϯτ͕ग़ͯ΋γϡοͱॻ͚Δ

66. ൺֱ

67. ൺֱ

68. ݟ௨͕͠Α͘ͳͬͯ ͳΜͱͳ͘εοΩϦ

69. • ϝσΟΞΫΤϦΛύοͱੜ੒ • pxΛ౉͚ͩ͢ • emʹม׵ࡁΈ • TSϑϨϯυϦʔ

70. • ϝσΟΞΫΤϦΛύοͱੜ੒ • pxΛ౉͚ͩ͢ • emʹม׵ࡁΈ • TSϑϨϯυϦʔ • APIͷ౷ҰͰύοͱͳΔ

    • mqΦϒδΣΫτΛݟΕ͹Α͍ • ہॴతͳϝσΟΞΫΤϦ΋OK • ݟ௨͕͠Α͘ͳΔ

71. • ϝσΟΞΫΤϦΛύοͱੜ੒ • pxΛ౉͚ͩ͢ • emʹม׵ࡁΈ • TSϑϨϯυϦʔ • APIͷ౷ҰͰύοͱͳΔ

    • mqΦϒδΣΫτΛݟΕ͹Α͍ • ہॴతͳϝσΟΞΫΤϦ΋OK • ݟ௨͕͠Α͘ͳΔ • ϥΠϒϥϦʹґଘ͍ͯ͠ͳ͍ • CSS in JSଆͷΞοϓσʔτͰ
 ഁ໓͠ͳ͍(͔΋)

72. ϝσΟΞΫΤϦΛ ύοͱ΍ΕΔΑ͏ʹͳͬͯ ͢͜͠Α͘ͳͬͨ (ݸਓൺ)

73. ϝσΟΞΫΤϦΛ ύοͱ΍Δ͸ͳ͠Ͱͨ͠ ऴ