DevTools+PerfectPixelで爆速コーディング

 DevTools+PerfectPixelで爆速コーディング

310bd1f45646f702ff7c334c9d612b51?s=128

Takayuki Shimada

July 18, 2019
Tweet

Transcript

  1. ൿଂͷര଎ίʔσ ΟϯάςΫχοΫ

  2. ίʔσΟϯάΛ ̎ഒ଎ʹ͠Α͏ʂ

  3. Ͳ͏΍Δͷʁ w )5.-͸;ͭ͏ʹίʔσΟϯά w 1FSGFDU1JYFMΛ͔ͭͬͯσβΠϯΧϯϓΛ͔ͿͤΔ w %FW5PPMT্Ͱੜ$44Λฤू͢Δ

  4. 1FSGFDU1JYFM֦ுػೳ w ϒϥ΢β্ʹը૾ϑΝΠϧΛΦʔόʔϨΠදࣔ͢Δ w Ґஔͷௐ੔Ŋ֦ॖŊಁա౓ͷมߋͳͲศརͳػೳ w ΩʔϘʔυૢ࡞Մೳ IUUQTDISPNFHPPHMFDPNXFCTUPSFEFUBJMQFSGFDUQJYFMCZXFMMEPOFDELBBHEHKNHENCOFDNDFGEIKFLDPDFFCJ IMKB

  5. w ͓ͳ͡Έͷ$ISPNF։ൃऀπʔϧ w )5.-΍$44ΛҰ࣌తʹฤू w Ϧϩʔυͨ͠Βফ͑ͪΌ͏ʜʁ $ISPNF%FW5PPMT w ࣮͸ϩʔΧϧϑΝΠϧΛ௚ʹฤूͰ͖Δʢ8PSLTQBDFTػೳʣ

  6. ૊Έ߹ΘͤͨΒʜ  DevTools

  7. σϞ

  8. ɾ)5.-ߏ଄Λߟ͑Δ Before HTML Χϯϓ CSS Browser

  9. Before HTML Χϯϓ CSS Browser ɾߏ଄Λهड़͢Δ ɾ$44Λ༧ଌ͢Δ <div> ... </div>

  10. Before HTML Χϯϓ CSS Browser ɾ)5.-ʹج͖ͮηϨΫλΛॻ͘ ɾΧϯϓͰܭଌ͢Δ ɹ จࣈαΠζŋߦߴŋ༨ന౳ 

    ɾελΠϧΛॻ͘ ɾϒϥ΢βͰ֬ೝ͢Δ ɾΧϯϓͱͷζϨΛݕূ͢Δ <div> ... </div> div { ... }
  11. ͜Ε·ͰͷϫʔΫϑϩʔͷ໰୊఺ w εΠονϯάίετ͕σΧ͍ʂ w )5.-Λݟͳ͕Βʜʜ w ΧϯϓΛܭଌ͠ͳ͕Βʜʜ w ϒϥ΢βͰ֬ೝ͠ͳ͕Βʜʜ w

    ख໭Γ͕͋Δʂ w ϓϩύςΟ΍஋ͷλΠϙ w ࠶ݱ౓ͷ؁͞
  12. After HTML Χϯϓ CSS Browser ɾ)5.-ߏ଄Λߟ͑Δ

  13. After HTML Χϯϓ CSS Browser ɾߏ଄Λهड़͢Δ ɾ$44Λ༧ଌ͢Δ <div> ... </div>

  14. HTML Χϯϓ CSS Browser <div> ... </div> After

  15. HTML Χϯϓ CSS Browser

  16. None
  17. ɾϒϥ΢β্ʹΧϯϓΛදࣔ ɾ%0.ΠϯεϖΫλͰཁૉΛ୳͢ ɾΧϯϓΛਅࣅͯ$44Λॻ͘ After DevTools +PerfectPixel

  18. ղফ͞ΕΔ໰୊఺ w εΠονϯάθϩʂ w )5.-͸ͦ͜ʹ͋Δ w Χϯϓ΋ͦ͜ʹ͋Δ w ϒϥ΢βͰ֬ೝ΋Կ΋Ŋࠓݟ͍ͯΔͦΕ͕ϒϥ΢βʂ w

    ख໭Γ͠ͳ͍ʂ w %FW5PPMT্Ͱิ׬͕ར͘͠Ŋݟ͍ͯΔ΋ͷ͕݁Ռ͔ͩΒʂ w Χϯϓʹج͍͍ͮͯΔ͔Β࠶ݱ౓͕؁͍ͱ͔ແ͍
  19. ࢓૊Έ DevTools Browser style.css ᶃ ᶄ ᶅ ᶃฤू͢Δ ᶄը໘ʹ൓ө͢Δ ᶅϑΝΠϧʹॻ͖ࠐΉ

  20. ͬͯ࢖͑Δͷʁ ͋Γͦ͏ͳٙ໰ "੍໿͸͋Δ͚Ͳ࢖͑Δʂ

  21. ࢓૊Έ DevTools Browser style.css style.scss ᶃ ᶄ ᶅ ᶇ ᶃฤू͢Δ

    ᶄը໘ʹ൓ө͢Δ ᶅϑΝΠϧʹॻ͖ࠐΉ ᶆίϯύΠϧ ᶇมߋ͕൓ө͞ΕΔ ᶆ
  22. ؀ڥΛͭ͘Δ  1FSGFDU1JYFMΛΠϯετʔϧ͢Δ  ։ൃதͷϖʔδΛ։͘  %FW5PPMTΛ։͖ɺ8PSLTQBDFΛઃఆ͢Δ w 4PVSDFTλϒ'JMFTZTUFNύωϧ"EEGPMEFSUPXPSLTQBDF w

    υΩϡϝϯτϧʔτʹ͋ͨΔϑΥϧμΛબͿ w ಡΈॻ͖ݖݶΛٻΊΒΕΔͷͰɺڐՄ͢Δ
  23. 4BTTΛ࢖͏ͱ͖ͷ஫ҙ఺ w 4PVSDFNBQͷग़ྗ͕ඞཁ w 4BTTίϯύΠϥʔͷΦϓγϣϯʹඞͣ͋ΔΑʂ w 4BTTϑΝΠϧ΋8PSLTQBDFܦ༝ͰΞΫηεͰ͖ΔΑ͏ʹ͢Δ w TSD EJTUʹ෼ׂ͍ͯ͠Δ؀ڥߏ੒ͩͱ͏·͍͔͘ͳ͍ʂ

    w &MFNFOUTλϒ্Ͱͷมߋ͸ແࢹ͞ΕΔ w 4PVSDFTλϒͰιʔεΛฤू w ϝϦοτ͸ബΕΔ͚ͲɺιʔεҐஔʹ௚઀δϟϯϓՄೳ
  24. ͱ͜ΖͰŊ

  25. <nav class="Header__globalNav"> <ul class="Header__globalNavItems"> <li><a href="__TBD__">Link 1</a></li> <li><a href="__TBD__">Link 2</a></li>

    <li><a href="__TBD__">Link 3</a></li> </ul> </nav> .Header__globalNav { } .Header__globalNavItems { } .Header__globalNavItems > li { } .Header__globalNavItems > li > a { } ͜ͷ࡞ۀŊΊΜͲ͍͘͞Ͱ͢ΑͶʁ
  26. ָʹ͢Δπʔϧ ͭ͘Γ·ͨ͠ʂ https://css-scaffolder.netlify.com/

  27. ͱ͜ΖͰᶄŊ

  28. %FW5PPMTͰ ϚϧνΧʔιϧ࢖͑Δ ͬͯ஌ͬͯ·ͨ͠ʁ 4PVSDFTλϒͰ$USM %$NE %ΛͨΊͯ͠ΈΑ͏ʂ

  29. ͓ΘΓ