styled-component + CSS Grid

3b7905b9235d5411a8ce8601be16707d?s=47 terrierscript
September 20, 2018

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

3b7905b9235d5411a8ce8601be16707d?s=128

terrierscript

September 20, 2018
Tweet

Transcript

  1. TUZMFEDPNQPOFOUT
 
 $44(SJE ʹײ͡ΔແݶͷՄೳੑ NFHVSPDTT

  2. ࣗݾ঺հ w 44V[VLJ w !UFSSJFSTDSJQU w ϑϦʔϥϯεΤϯδχΞ

  3. ࠓճ࿩͢͜ͱ w TUZMFEDPNQPOFOUTͷઆ໌ w $44(SJEͷઆ໌ w ຊ୊ɿ;ͨͭΛ૊Έ߹ΘͤΔ࿩

  4. TUZMFEDPNQPOFOUT

  5. None
  6. TUZMFEDPNQPOFOUT w 3FBDU༻ͷϥΠϒϥϦ w ͍ΘΏΔ$44JO+4ͷ̍ͭ w $44ΛUFNQMBUFMJUFSBMͰهड़͢Δ

  7. None
  8. EJWཁૉ

  9. UFNQMBUFMJUFSBM Ͱ$44Λࢦఆ

  10. *UFNͱ͍͏ $PNQPOFOUʹͳΔ

  11. QSPQT΋࢖͑Δ

  12. QSPQTΛ౉͢

  13. ग़Δʂ

  14. ग़ྗ͞ΕΔ࣮ଶ͸͜ΜͳΠϝʔδͷ΋ͷ

  15. ग़ྗ͞ΕΔ࣮ଶ͸͜ΜͳΠϝʔδͷ΋ͷ DTTNPEVMFTͱ͔ ͱཧ۶͸Ұॹ DTTNPEVMFTͱ͔ ͱཧ۶͸Ұॹ

  16. ֦ு΋ग़དྷ·͢ ఆٛࡁΈͷ $PNQPOFOUΛ࠶ར༻

  17. ֦ு΋ग़དྷ·͢ CPSEFS͕௥Ճ͞ΕΔ CPSEFS͕௥Ճ͞ΕΔ

  18. ࠓճ
 TUZMFEDPNQPOFOUT͸ ͜ͷ͙Β͍·Ͱ஌ͬͯ΋Β͑͹े෼

  19. $44(SJE

  20. Ҿ༻ݩIUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44$44@(SJE@-BZPVU .%/ΛݟͯΈΔͱɾɾɾɾ

  21. Ҿ༻ݩIUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44$44@(SJE@-BZPVU

  22. None
  23. None
  24. 

  25.  ೉͍͠

  26. ҰݸͣͭݟͯΈΔ

  27. ҰݸͣͭݟͯΈΔ EJTQMBZHSJE

  28. ҰݸͣͭݟͯΈΔ HSJEUFNQMBUFDPMVNOT
 ԣํ޲΁ͷςϯϓϨʔτࢦఆ

  29. ҰݸͣͭݟͯΈΔ SFQFBU  GS  GSͷ୯ҐΛճ܁Γฦ͢

  30. ҰݸͣͭݟͯΈΔ HSJEHBQ QBEEJOHΈ͍ͨͳ΋ͷ

  31. ҰݸͣͭݟͯΈΔ SPX ॎʣ͸
 QYΛ࠷খɺBVUPΛ࠷େ
 NJNBY

  32. ྫ͑͹UXPͷཁૉΛݟͯΈΔ ࢝఺ͷઢऴ఺ͷઢΛ
 ॎԣͰࢦఆ

  33.    

  34.     HSJEDPMVNO HSJEDPMVNO

  35.         

  36.          HSJESPXT

    HSJESPXT
  37.          ͜Ε͕UXPͷҐஔʹ

  38. ΋͏Ұͭͷ(SJEࢦఆ HSJEUFNQMBUF BSFB

  39. ෳࡶͳϨΠΞ΢τΛ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44HSJEUFNQMBUF

  40. จࣈྻͰͷࢦఆ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44HSJEUFNQMBUF

  41. จࣈྻͰͷࢦఆ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44HSJEUFNQMBUF BSFBΛจࣈྻͰࢦఆ

  42. จࣈྻͰͷࢦఆ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44HSJEUFNQMBUF BSFBΛจࣈྻͰࢦఆ HSJEUFNQMBUFBSFBTͷ৔߹͸
 ͚ͩ͜͜ͷهड़Ͱ0,

  43. จࣈྻͰͷࢦఆ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44HSJEUFNQMBUF ʮઢʯʹ໊લ෇͚ग़དྷΔ ʮઢʯʹ໊લ෇͚΋ग़དྷΔ

  44. จࣈྻͰͷࢦఆ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44HSJEUFNQMBUF ͦΕͧΕͷߴ͞Λࢦఆ

  45. จࣈྻͰͷࢦఆ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44HSJEUFNQMBUF ԣ෯Λࢦఆ

  46. ̎ͭͷࢦఆํ๏͕͋Δ͜ͱΛ
 ҙࣝ͢Δͱগࠞ͠ཚ͠ͳ͘ͳΔ w ߦ΍ྻͰࢦఆ͢Δํ๏HSJEUFNQMBUFSPXT HSJEUFNQMBUFDPMVNOT w શମΛΰϦοͱࢦఆ͢Δํ๏HSJEUFNQMBUF HSJEUFNQMBUFBSFB

  47. $44(SJEʹ͍ͭͯ
 ΋ͬͱ஌Γ͍ͨํ͸ԼهͳͲ͓͢͢ΊͰ͢ w IUUQTMFBSODTTHSJEDPN w IUUQTDTTUSJDLTDPNTOJQQFUTDTT DPNQMFUFHVJEFHSJE w IUUQTXXXMBZPVUJUDPNHSJE

  48. ຊ୊

  49. TUZMFEDPNQPOFOUTͱ
 $44(SJE͕ खΛ૊ΉͱͲ͏ͳΔͷ͔ʁ

  50. ͜Μͳࣄ͕ى͖Δ w +BWB4DSJQUͰBSFBΛॲཧग़དྷΔ w  w HSJEͷϨΠΞ΢τ΍BSFBΛίϯϙʔωϯτԽͱͯ͠ه ड़ग़དྷΔɻ w

  51. ͜Μͳࣄ͕ى͖Δ w +BWB4DSJQUͰBSFBΛॲཧग़དྷΔ w ˰ෳࡶͳUFNQMBUF΋QSPHSBNNBCMFʹهड़Մೳ w HSJEͷϨΠΞ΢τ΍BSFBΛίϯϙʔωϯτԽͱͯ͠ه ड़ग़དྷΔɻ w ˰܁Γฦ͠ॲཧʹͳΔίϯϙʔωϯτ΋ָʹॻ͚Δ

  52. ͲΜͳίʔυʹͳΔ͔ʁ

  53. None
  54. UFNQMBUFΛ+BWB4DSJQUଆͰੜ੒

  55. ͜ͷ৔߹͸ <J>GS<SP>GS<IB>GS<OJ> Έ͍ͨͳUFNQMBUF͕࡞ΒΕΔ

  56. (SJEͷίϯϙʔωϯτΛ࡞Δ

  57. "SFB͸Ҿ਺ΛऔΔܗͰ
 ίϯϙʔωϯτԽग़དྷΔ "SFB͸Ҿ਺ΛऔΔܗͰ
 ίϯϙʔωϯτԽग़དྷΔ

  58. "SFBͱ(SJEΛ૊Έ߹ΘͤΔʂ

  59. "SFBͷཁૉ͸͜Μͳ෩ʹ΋ ॲཧՄೳ

  60. ଞʹ͸ྫ͑͹͜Μͳ UXJUUFSͬΆ͍ϨΠΞ΢τͳΒ

  61. ͜ΜͳBSFBΛ
 ઃఆͯ͋͛ͯ͠

  62. ཁૉΛฒ΂Δͱ

  63. BWBUFS OBNF NFOV CPEZ DPNNFOU MJLF SU ཁૉΛฒ΂Δͱ

  64. ͜Μͳ;͏ʹ(SJEͰදࣔ͞ ΕΔͱ͍ͬͨ۩߹

  65. BWBUFS OBNF N FO V CPEZ DPN MJLF SU ͜Μͳ;͏ʹׂΓ౰ͯΒΕͯ

    දࣔ͞ΕΔͱ͍ͬͨ۩߹
  66. ͯ͞ɺͦΖͦΖײ͡·ͤΜ͔

  67. DTTHSJE 
 TUZMFEDPNQPOFOUT
 ͔Β

  68. ແݶͷՄೳੑΛʜʂ

  69. ͱ͍͏͜ͱͰ͔͜͜Β
 ՄೳੑΛײ͡Δ࢖͍ํΛ ྻڍ͍͖ͯ͠·͢

  70. ·ͨɺࠓճ͸ແݶͷՄೳੑΛ௥ٻͨ͠౎߹্
 ύϑΥʔϚϯε΍ϒϥ΢βґଘ౳ʹ͍ͭͯ͸
 جຊతʹ͋·Γߟྀ͍ͯ͠·ͤΜ 
 ྃ͝ঝԼ͍͞

  71. DPMVNOTSPXTฤ

  72. ΧϨϯμʔ

  73. ·ͣ͸(SJEΛࢦఆ

  74. ·ͣ͸(SJEΛࢦఆ ೔ ͳͷͰDPMVNOTͰ SFQFBU 

  75. ·ͣ͸(SJEΛࢦఆ ೔ ͳͷͰDPMVNOTͰ SFQFBU  HBQ ΛSPXͱDPMVNOͰ
 ม͑ͯ͋͛Δ

  76. ͢Δͱ͜Μͳײ͡ʹͳΓ·͢

  77. ༵೔Λ͚ͭͨΒ

  78. ͜͏ͳͬͯ

  79. ೔෇ΛೖΕΕ͹ɾɾɾ

  80. ΧϨϯμʔʂ

  81. ͋ͱ͸ͪΐͬͱ૷০ͯ͠

  82. ͸͍Ͱ͖ͨʂ

  83. λΠϜεέδϡʔϧද

  84. ࠓ౓͸গ͠ෳࡶ

  85. ࠓ౓͸গ͠ෳࡶ ઢʹ࣌ؒͰ໊લ෇͚͠ ͯ͋͛Δ

  86. ࠓ౓͸গ͠ෳࡶ ॎઢ͸ਓͰ໊લ෇͚

  87. "SFBͱͯ͠ॎํ޲͸ TUBSUͱFOEΛࢦఆग़དྷΔ΋ͷΛ༻ҙ

  88. ઢΛఆٛͯ͠

  89. ॻ͖·͢

  90. ઢ͕ॻ͚·ͨ͠ʂ

  91. ࣌ؒͱϔομΛࡌͤ·͢

  92. ͜͏ͳΓ·͢

  93. εέδϡʔϧͷ͚ͬΕ͹ɾɾ

  94. ग़དྷ্͕Γʂ

  95. ͱ͜ΖͰ

  96. 4DIFEVMFΛද͔Β෼཭ͯ͠ॻ͚Δͷ
 ΊͪΌͪ͘Όྑ͘ͳ͍Ͱ͔͢ ͱ͜ΖͰ

  97. ಉ͡ཁྖͰ

  98. ͜Μͳ෩ʹ͢Ε͹

  99. Φηϩʂ

  100. ͜Ε΋൫ͱίϚΛ෼཭ͯ͠ هड़ग़དྷΔʂ ͖ͬ͞ͱಉ͡ͳͷͰ

  101. BSFBTฤ

  102. ి୎

  103. BSFB͸͜Μͳ෩ʹࢦఆ

  104. JOQVUΛ࡞ͬͯ

  105. JOQVUΛ࡞ͬͯ

  106. ϘλϯΛฒ΂ͨΒʜ

  107. ͜͏ʂ

  108. ਺ࣈϘλϯ΋ฒ΂ͯ

  109. ग़དྷ্͕Γʂ

  110. ϦʔϯΩϟϯύε

  111. ͜͏ͳͬͯɾɾɾ

  112. ͜͏ͳͬͯɾɾɾ

  113. ཁૉ࡞ͬͯɾɾɾ

  114. ϦʔϯΩϟϯύεʂ

  115. HSJEHBQ͚ͭͨΒ͜͏

  116. ౓ճͨ͠Βɾɾɾ

  117. ϨεϙϯγϒରԠʂ

  118. ΩʔϘʔυ

  119. ۪௚ʹೖྗ͠·͢ɾɾɾ

  120. ΩʔΛฒ΂ͨΒɾɾɾ

  121. ग़དྷ্͕Γʂ λΠϐϯάήʔϜͱ͔Ͱ࢖͑Δ͔΋

  122. ཤྺॻ

  123. ͜͏͍͏ઢ͕΄͍͠

  124. Ͳ͏͢Δ͔ w CPSEFSΛ৭ʑ૊Έ߹ΘͤͯؤுΔ w CPSEFS͸ͪΐͪ͜ΐͣ͜ΕΔ w (SJEͷதʹ(SJEΛೖΕΔ w Ұ൪ΩϨΠʹॻ͚ͦ͏ w

    ઢ͢Β΋(SJEͰॻ͍ͯ͠·͏ w ΫϨΠδʔͰҰ൪ָͦ͠͏
  125. Ͳ͏͢Δ͔ w CPSEFSΛ৭ʑ૊Έ߹ΘͤͯؤுΔ w CPSEFS͸ͪΐͪ͜ΐͣ͜ΕΔ w (SJEͷதʹ(SJEΛೖΕΔ w Ұ൪ΩϨΠʹॻ͚ͦ͏ w

    ઢ͢Β΋(SJEͰॻ͍ͯ͠·͏ w ΫϨΠδʔͰҰ൪ָͦ͠͏
  126. 4QSFBETIFFUͰԼॻ͖

  127. UFNQMBUFʹҠͯ͠ௐ੔ʜ

  128. ͜Μͳײ͡ͰઢͷྖҬͱ
 ଠ͞ΛܾΊͯ

  129. ઢΛҾ͖·͢

  130. ઢʂ

  131. ͋ͱ͸৭ʑͷ͚͍ͬͯͬͯ

  132. ݟग़͠

  133. ࣸਅ

  134. ׬੒ʂ

  135. ଞʹ΋ࢥ͍ͭ͘ΞΠσΟΞ͸ ͨ͘͞Μɾɾɾʂ w Ψϯτνϟʔτ w ੥ٻॻ w υοτֆπʔϧɾϐΫϩε w ϐΞϊ

    w ͳͲͳͲɾɾɾ
  136. ·ͱΊ w ౰ͨΓલͰ͕͢ී௨ͷ(SJEͰ΋TUZMFEDPNQPOFOUT ͸े෼༗ӹʹ࢖͑·͢ w UBCMFͰDPMTQBOSPXTQBO࢖ͬͯͨ΋ͷ͸֓Ͷ͍͍ ײ͡ʹग़དྷΔՄೳੑ͕ߴ͍ w qFYͱͷ࢖͍෼͚͸·ͩ೰Έத w

    &YDFMํ؟ࢴʹ෧ҹ͞Ε͍ͯͨऀͨͪΛ(SJEʹղ͖์ͯ ͦ͏
  137. ʊਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹΩϛ͚ͩͷ࠷ڧͷɹʻ ʼ$44(SJEΛ࡞Γग़ͤʂʻ ʉ:?:?:?:?:?::?:?ʉ