$30 off During Our Annual Pro Sale. View Details »

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

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

Takayuki Shimada

July 18, 2019
Tweet

More Decks by Takayuki Shimada

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  6. ૊Έ߹ΘͤͨΒʜ
    DevTools

    View Slide

  7. σϞ

    View Slide

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

    View Slide

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

    ...

    View Slide

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

    ɾελΠϧΛॻ͘
    ɾϒϥ΢βͰ֬ೝ͢Δ
    ɾΧϯϓͱͷζϨΛݕূ͢Δ

    ...

    div { ... }

    View Slide

  11. ͜Ε·ͰͷϫʔΫϑϩʔͷ໰୊఺
    w εΠονϯάίετ͕σΧ͍ʂ
    w )5.-Λݟͳ͕Βʜʜ
    w ΧϯϓΛܭଌ͠ͳ͕Βʜʜ
    w ϒϥ΢βͰ֬ೝ͠ͳ͕Βʜʜ
    w ख໭Γ͕͋Δʂ
    w ϓϩύςΟ΍஋ͷλΠϙ
    w ࠶ݱ౓ͷ؁͞

    View Slide

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

    View Slide

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

    ...

    View Slide

  14. HTML
    Χϯϓ
    CSS
    Browser
    ...

    After

    View Slide

  15. HTML
    Χϯϓ
    CSS
    Browser

    View Slide

  16. View Slide

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

    View Slide

  18. ղফ͞ΕΔ໰୊఺
    w εΠονϯάθϩʂ
    w )5.-͸ͦ͜ʹ͋Δ
    w Χϯϓ΋ͦ͜ʹ͋Δ
    w ϒϥ΢βͰ֬ೝ΋Կ΋Ŋࠓݟ͍ͯΔͦΕ͕ϒϥ΢βʂ
    w ख໭Γ͠ͳ͍ʂ
    w %FW5PPMT্Ͱิ׬͕ར͘͠Ŋݟ͍ͯΔ΋ͷ͕݁Ռ͔ͩΒʂ
    w Χϯϓʹج͍͍ͮͯΔ͔Β࠶ݱ౓͕؁͍ͱ͔ແ͍

    View Slide

  19. ࢓૊Έ
    DevTools
    Browser style.css

    ᶄ ᶅ
    ᶃฤू͢Δ
    ᶄը໘ʹ൓ө͢Δ
    ᶅϑΝΠϧʹॻ͖ࠐΉ

    View Slide

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

    View Slide

  21. ࢓૊Έ
    DevTools
    Browser style.css
    style.scss




    ᶃฤू͢Δ
    ᶄը໘ʹ൓ө͢Δ
    ᶅϑΝΠϧʹॻ͖ࠐΉ
    ᶆίϯύΠϧ
    ᶇมߋ͕൓ө͞ΕΔ

    View Slide

  22. ؀ڥΛͭ͘Δ
    1FSGFDU1JYFMΛΠϯετʔϧ͢Δ
    ։ൃதͷϖʔδΛ։͘
    %FW5PPMTΛ։͖ɺ8PSLTQBDFΛઃఆ͢Δ
    w 4PVSDFTλϒ'JMFTZTUFNύωϧ"EEGPMEFSUPXPSLTQBDF
    w υΩϡϝϯτϧʔτʹ͋ͨΔϑΥϧμΛબͿ
    w ಡΈॻ͖ݖݶΛٻΊΒΕΔͷͰɺڐՄ͢Δ

    View Slide

  23. 4BTTΛ࢖͏ͱ͖ͷ஫ҙ఺
    w 4PVSDFNBQͷग़ྗ͕ඞཁ
    w 4BTTίϯύΠϥʔͷΦϓγϣϯʹඞͣ͋ΔΑʂ
    w 4BTTϑΝΠϧ΋8PSLTQBDFܦ༝ͰΞΫηεͰ͖ΔΑ͏ʹ͢Δ
    w TSD EJTUʹ෼ׂ͍ͯ͠Δ؀ڥߏ੒ͩͱ͏·͍͔͘ͳ͍ʂ
    w &MFNFOUTλϒ্Ͱͷมߋ͸ແࢹ͞ΕΔ
    w 4PVSDFTλϒͰιʔεΛฤू
    w ϝϦοτ͸ബΕΔ͚ͲɺιʔεҐஔʹ௚઀δϟϯϓՄೳ

    View Slide

  24. ͱ͜ΖͰŊ

    View Slide



  25. Link 1
    Link 2
    Link 3


    .Header__globalNav {
    }
    .Header__globalNavItems {
    }
    .Header__globalNavItems > li {
    }
    .Header__globalNavItems > li > a {
    }
    ͜ͷ࡞ۀŊΊΜͲ͍͘͞Ͱ͢ΑͶʁ

    View Slide

  26. ָʹ͢Δπʔϧ
    ͭ͘Γ·ͨ͠ʂ
    https://css-scaffolder.netlify.com/

    View Slide

  27. ͱ͜ΖͰᶄŊ

    View Slide

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

    View Slide

  29. ͓ΘΓ

    View Slide