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

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
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
    ύωϧ
    
    "EE
    GPMEFS
    UP
    XPSLTQBDF
    w υΩϡϝϯτϧʔτʹ͋ͨΔϑΥϧμΛબͿ
    w ಡΈॻ͖ݖݶΛٻΊΒΕΔͷͰɺڐՄ͢Δ
23. 4BTTΛ࢖͏ͱ͖ͷ஫ҙ఺ w 4PVSDF
    NBQ
    ͷग़ྗ͕ඞཁ
    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. ͓ΘΓ