styled-component + CSS Grid

meguro.css #3

styled-component + CSS Grid に感じる無限の可能性

https://medium.com/@terrierscript/meguro-css-styled-component-css-grid-d8ce0264a89e

デモ（コールドモック）：https://styled-component-css-grid.netlify.com/
ソース：https://github.com/terrierscript/css-grid-example

Transcript

1. TUZMFEDPNQPOFOUT
 
 $44
   (SJE
   ʹײ͡ΔແݶͷՄೳੑ 
   NFHVSPDTT
   
2. ࣗݾ঺հ w 4
   4V[VLJ
   w !UFSSJFSTDSJQU
   w ϑϦʔϥϯεΤϯδχΞ
3. ࠓճ࿩͢͜ͱ w TUZMFEDPNQPOFOUTͷઆ໌
   w $44
   (SJEͷઆ໌
   w ຊ୊ɿ;ͨͭΛ૊Έ߹ΘͤΔ࿩
4. TUZMFEDPNQPOFOUT
6. TUZMFEDPNQPOFOUT w 3FBDU༻ͷϥΠϒϥϦ
   w ͍ΘΏΔ$44JO+4ͷ̍ͭ
   w $44ΛUFNQMBUF
   MJUFSBMͰهड़͢Δ
7. ྫ
9. EJWཁૉ
10. UFNQMBUF
    MJUFSBM Ͱ$44Λࢦఆ
11. *UFNͱ͍͏ $PNQPOFOUʹͳΔ
12. QSPQT΋࢖͑Δ
13. QSPQTΛ౉͢
14. ग़Δʂ
15. ग़ྗ͞ΕΔ࣮ଶ͸͜ΜͳΠϝʔδͷ΋ͷ
16. ग़ྗ͞ΕΔ࣮ଶ͸͜ΜͳΠϝʔδͷ΋ͷ DTTNPEVMFTͱ͔ ͱཧ۶͸Ұॹ DTTNPEVMFTͱ͔ ͱཧ۶͸Ұॹ
17. ֦ு΋ग़དྷ·͢ ఆٛࡁΈͷ $PNQPOFOUΛ࠶ར༻
18. ֦ு΋ग़དྷ·͢ CPSEFS͕௥Ճ͞ΕΔ CPSEFS͕௥Ճ͞ΕΔ
19. ࠓճ
 TUZMFEDPNQPOFOUT͸
    ͜ͷ͙Β͍·Ͱ஌ͬͯ΋Β͑͹े෼
20. $44
    (SJE
21. Ҿ༻ݩ
    IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44$44@(SJE@-BZPVU .%/ΛݟͯΈΔͱɾɾɾɾ
22. Ҿ༻ݩ
    IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44$44@(SJE@-BZPVU
25. 
    
26. 
    ೉͍͠
27. ҰݸͣͭݟͯΈΔ
28. ҰݸͣͭݟͯΈΔ EJTQMBZ
    HSJE
29. ҰݸͣͭݟͯΈΔ HSJEUFNQMBUFDPMVNOT
    
 
    ԣํ޲΁ͷςϯϓϨʔτࢦఆ
30. ҰݸͣͭݟͯΈΔ SFQFBU 
    GS
    
    GSͷ୯ҐΛճ܁Γฦ͢
31. ҰݸͣͭݟͯΈΔ HSJEHBQ
    
    
    QBEEJOHΈ͍ͨͳ΋ͷ
32. ҰݸͣͭݟͯΈΔ SPX ॎʣ͸
 QYΛ࠷খɺBVUPΛ࠷େ
 NJNBY
33. ྫ͑͹UXPͷཁૉΛݟͯΈΔ ࢝఺ͷઢ
    
    ऴ఺ͷઢΛ
 ॎԣͰࢦఆ
34.    
35.     HSJEDPMVNO
     HSJEDPMVNO
    
36.         
37.          HSJESPXT
    
     HSJESPXT
    
    
38.          ͜Ε͕UXPͷҐஔʹ
39. ΋͏Ұͭͷ(SJEࢦఆ
    HSJEUFNQMBUF BSFB
40. ෳࡶͳϨΠΞ΢τΛ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44HSJEUFNQMBUF
41. จࣈྻͰͷࢦఆ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44HSJEUFNQMBUF
42. จࣈྻͰͷࢦఆ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44HSJEUFNQMBUF BSFBΛจࣈྻͰࢦఆ
43. จࣈྻͰͷࢦఆ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44HSJEUFNQMBUF BSFBΛจࣈྻͰࢦఆ HSJEUFNQMBUFBSFBTͷ৔߹͸
 ͚ͩ͜͜ͷهड़Ͱ0,
44. จࣈྻͰͷࢦఆ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44HSJEUFNQMBUF ʮઢʯʹ໊લ෇͚ग़དྷΔ ʮઢʯʹ໊લ෇͚΋ग़དྷΔ
45. จࣈྻͰͷࢦఆ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44HSJEUFNQMBUF ͦΕͧΕͷߴ͞Λࢦఆ
46. จࣈྻͰͷࢦఆ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44HSJEUFNQMBUF ԣ෯Λࢦఆ
47. ̎ͭͷࢦఆํ๏͕͋Δ͜ͱΛ
 ҙࣝ͢Δͱগࠞ͠ཚ͠ͳ͘ͳΔ w ߦ΍ྻͰࢦఆ͢Δํ๏
    
    HSJEUFNQMBUFSPXT
    
    HSJEUFNQMBUFDPMVNOT
    w શମΛΰϦοͱࢦఆ͢Δํ๏
    
    HSJEUFNQMBUF
    
    HSJEUFNQMBUFBSFB
48. $44
    (SJEʹ͍ͭͯ
 ΋ͬͱ஌Γ͍ͨํ͸ԼهͳͲ͓͢͢ΊͰ͢ w IUUQTMFBSODTTHSJEDPN
    w IUUQTDTTUSJDLTDPNTOJQQFUTDTT DPNQMFUFHVJEFHSJE
    w IUUQTXXXMBZPVUJUDPNHSJE
49. ຊ୊
50. TUZMFEDPNQPOFOUTͱ
 $44
    (SJE͕
    खΛ૊ΉͱͲ͏ͳΔͷ͔ʁ
51. ͜Μͳࣄ͕ى͖Δ w +BWB4DSJQUͰBSFBΛॲཧग़དྷΔ
    w
    
    w HSJEͷϨΠΞ΢τ΍BSFBΛίϯϙʔωϯτԽͱͯ͠ه ड़ग़དྷΔɻ
    w
52. ͜Μͳࣄ͕ى͖Δ w +BWB4DSJQUͰBSFBΛॲཧग़དྷΔ
    w ˰ෳࡶͳUFNQMBUF΋QSPHSBNNBCMFʹهड़Մೳ
    w HSJEͷϨΠΞ΢τ΍BSFBΛίϯϙʔωϯτԽͱͯ͠ه ड़ग़དྷΔɻ
    w ˰
    ܁Γฦ͠ॲཧʹͳΔίϯϙʔωϯτ΋ָʹॻ͚Δ
53. ͲΜͳίʔυʹͳΔ͔ʁ
55. UFNQMBUFΛ+BWB4DSJQUଆͰੜ੒
56. ͜ͷ৔߹͸
    <J>
    GS
    <SP>
    GS
    <IB>
    GS
    <OJ>
    Έ͍ͨͳUFNQMBUF͕࡞ΒΕΔ
57. (SJEͷίϯϙʔωϯτΛ࡞Δ
58. "SFB͸Ҿ਺ΛऔΔܗͰ
 ίϯϙʔωϯτԽग़དྷΔ "SFB͸Ҿ਺ΛऔΔܗͰ
 ίϯϙʔωϯτԽग़དྷΔ
59. "SFBͱ(SJEΛ૊Έ߹ΘͤΔʂ
60. "SFBͷཁૉ͸͜Μͳ෩ʹ΋ ॲཧՄೳ
61. ଞʹ͸ྫ͑͹͜Μͳ
    UXJUUFSͬΆ͍ϨΠΞ΢τͳΒ
62. ͜ΜͳBSFBΛ
 ઃఆͯ͋͛ͯ͠
63. ཁૉΛฒ΂Δͱ
64. BWBUFS OBNF NFOV CPEZ DPNNFOU MJLF SU ཁૉΛฒ΂Δͱ
65. ͜Μͳ;͏ʹ(SJEͰදࣔ͞ ΕΔͱ͍ͬͨ۩߹
66. BWBUFS OBNF N FO V CPEZ DPN MJLF SU ͜Μͳ;͏ʹׂΓ౰ͯΒΕͯ දࣔ͞ΕΔͱ͍ͬͨ۩߹
67. ͯ͞ɺͦΖͦΖײ͡·ͤΜ͔
68. DTTHSJE
    
    
 TUZMFEDPNQPOFOUT
 ͔Β
69. ແݶͷՄೳੑΛʜʂ
70. ͱ͍͏͜ͱͰ͔͜͜Β
 ՄೳੑΛײ͡Δ࢖͍ํΛ ྻڍ͍͖ͯ͠·͢
71. ·ͨɺࠓճ͸ແݶͷՄೳੑΛ௥ٻͨ͠౎߹্
 ύϑΥʔϚϯε΍ϒϥ΢βґଘ౳ʹ͍ͭͯ͸
 جຊతʹ͋·Γߟྀ͍ͯ͠·ͤΜ
    
 ྃ͝ঝԼ͍͞
72. DPMVNOTSPXTฤ
73. ΧϨϯμʔ
74. ·ͣ͸(SJEΛࢦఆ
75. ·ͣ͸(SJEΛࢦఆ ೔ ͳͷͰDPMVNOTͰ SFQFBU 
76. ·ͣ͸(SJEΛࢦఆ ೔ ͳͷͰDPMVNOTͰ SFQFBU  HBQ ΛSPXͱDPMVNOͰ
 ม͑ͯ͋͛Δ
77. ͢Δͱ͜Μͳײ͡ʹͳΓ·͢
78. ༵೔Λ͚ͭͨΒ
79. ͜͏ͳͬͯ
80. ೔෇ΛೖΕΕ͹ɾɾɾ
81. ΧϨϯμʔʂ
82. ͋ͱ͸ͪΐͬͱ૷০ͯ͠
83. ͸͍Ͱ͖ͨʂ
84. λΠϜεέδϡʔϧද
85. ࠓ౓͸গ͠ෳࡶ
86. ࠓ౓͸গ͠ෳࡶ ઢʹ࣌ؒͰ໊લ෇͚͠ ͯ͋͛Δ
87. ࠓ౓͸গ͠ෳࡶ ॎઢ͸ਓͰ໊લ෇͚
88. "SFBͱͯ͠ॎํ޲͸
    TUBSUͱFOEΛࢦఆग़དྷΔ΋ͷΛ༻ҙ
89. ઢΛఆٛͯ͠
90. ॻ͖·͢
91. ઢ͕ॻ͚·ͨ͠ʂ
92. ࣌ؒͱϔομΛࡌͤ·͢
93. ͜͏ͳΓ·͢
94. εέδϡʔϧͷ͚ͬΕ͹ɾɾ
95. ग़དྷ্͕Γʂ
96. ͱ͜ΖͰ
97. 4DIFEVMFΛද͔Β෼཭ͯ͠ॻ͚Δͷ
 ΊͪΌͪ͘Όྑ͘ͳ͍Ͱ͔͢ ͱ͜ΖͰ
98. ಉ͡ཁྖͰ
99. ͜Μͳ෩ʹ͢Ε͹
100. Φηϩʂ
101. ͜Ε΋൫ͱίϚΛ෼཭ͯ͠
     هड़ग़དྷΔʂ ͖ͬ͞ͱಉ͡ͳͷͰ
102. BSFBTฤ
103. ి୎
104. BSFB͸͜Μͳ෩ʹࢦఆ
105. JOQVUΛ࡞ͬͯ
106. JOQVUΛ࡞ͬͯ
107. ϘλϯΛฒ΂ͨΒʜ
108. ͜͏ʂ
109. ਺ࣈϘλϯ΋ฒ΂ͯ
110. ग़དྷ্͕Γʂ
111. ϦʔϯΩϟϯύε
112. ͜͏ͳͬͯɾɾɾ
113. ͜͏ͳͬͯɾɾɾ
114. ཁૉ࡞ͬͯɾɾɾ
115. ϦʔϯΩϟϯύεʂ
116. HSJEHBQ͚ͭͨΒ͜͏
117. ౓ճͨ͠Βɾɾɾ
118. ϨεϙϯγϒରԠʂ
119. ΩʔϘʔυ
120. ۪௚ʹೖྗ͠·͢ɾɾɾ
121. ΩʔΛฒ΂ͨΒɾɾɾ
122. ग़དྷ্͕Γʂ λΠϐϯάήʔϜͱ͔Ͱ࢖͑Δ͔΋
123. ཤྺॻ
124. ͜͏͍͏ઢ͕΄͍͠
125. Ͳ͏͢Δ͔ w CPSEFSΛ৭ʑ૊Έ߹ΘͤͯؤுΔ
     w 
     CPSEFS͸ͪΐͪ͜ΐͣ͜ΕΔ
     w (SJEͷதʹ(SJEΛೖΕΔ
     w 
     Ұ൪ΩϨΠʹॻ͚ͦ͏
     w ઢ͢Β΋(SJEͰॻ͍ͯ͠·͏
     w 
     ΫϨΠδʔͰҰ൪ָͦ͠͏
126. Ͳ͏͢Δ͔ w CPSEFSΛ৭ʑ૊Έ߹ΘͤͯؤுΔ
     w 
     CPSEFS͸ͪΐͪ͜ΐͣ͜ΕΔ
     w (SJEͷதʹ(SJEΛೖΕΔ
     w 
     Ұ൪ΩϨΠʹॻ͚ͦ͏
     w ઢ͢Β΋(SJEͰॻ͍ͯ͠·͏
     w 
     ΫϨΠδʔͰҰ൪ָͦ͠͏
127. 4QSFBETIFFUͰԼॻ͖
128. UFNQMBUFʹҠͯ͠ௐ੔ʜ
129. ͜Μͳײ͡ͰઢͷྖҬͱ
 ଠ͞ΛܾΊͯ
130. ઢΛҾ͖·͢
131. ઢʂ
132. ͋ͱ͸৭ʑͷ͚͍ͬͯͬͯ
133. ݟग़͠
134. ࣸਅ
135. ׬੒ʂ
136. ଞʹ΋ࢥ͍ͭ͘ΞΠσΟΞ͸ ͨ͘͞Μɾɾɾʂ w Ψϯτνϟʔτ
     w ੥ٻॻ
     w υοτֆπʔϧɾϐΫϩε
     w ϐΞϊ
     w ͳͲͳͲɾɾɾ
137. ·ͱΊ w ౰ͨΓલͰ͕͢ී௨ͷ(SJEͰ΋TUZMFEDPNQPOFOUT ͸े෼༗ӹʹ࢖͑·͢
     w UBCMFͰDPMTQBOSPXTQBO࢖ͬͯͨ΋ͷ͸֓Ͷ͍͍ ײ͡ʹग़དྷΔՄೳੑ͕ߴ͍
     w qFYͱͷ࢖͍෼͚͸·ͩ೰Έத
     w &YDFMํ؟ࢴʹ෧ҹ͞Ε͍ͯͨऀͨͪΛ(SJEʹղ͖์ͯ ͦ͏
138. ʊਓਓਓਓਓਓਓਓਓਓਓʊ
     ʼɹ
     Ωϛ͚ͩͷ࠷ڧͷ
     
     ɹ
     ʻ
     ʼ$44
     (SJEΛ࡞Γग़ͤʂʻ
     ʉ:?:?:?:?:?::?:?ʉ