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

310bd1f45646f702ff7c334c9d612b51?s=47 Takayuki Shimada
July 18, 2019
Programming
0
170

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

310bd1f45646f702ff7c334c9d612b51?s=128

Takayuki Shimada

July 18, 2019
Tweet

Want more?

310bd1f45646f702ff7c334c9d612b51?s=48 tsmd
0
5.6k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
1
130
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
67
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
67
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
4
130
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
3
150
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
2
220
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
2
410
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
110
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
200
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
60
250k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
5
780

Transcript

  1. 1.

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

  2. 2.

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

  3. 3.

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

  4. 4.

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

  5. 5.

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

  6. 6.

    ૊Έ߹ΘͤͨΒʜ  DevTools

  7. 7.

    σϞ

  8. 8.

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

  9. 9.

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

  10. 10.

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

    ɾελΠϧΛॻ͘ ɾϒϥ΢βͰ֬ೝ͢Δ ɾΧϯϓͱͷζϨΛݕূ͢Δ <div> ... </div> div { ... }
  11. 11.

    ͜Ε·ͰͷϫʔΫϑϩʔͷ໰୊఺ w εΠονϯάίετ͕σΧ͍ʂ w )5.-Λݟͳ͕Βʜʜ w ΧϯϓΛܭଌ͠ͳ͕Βʜʜ w ϒϥ΢βͰ֬ೝ͠ͳ͕Βʜʜ w

    ख໭Γ͕͋Δʂ w ϓϩύςΟ΍஋ͷλΠϙ w ࠶ݱ౓ͷ؁͞
  12. 12.

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

  13. 13.

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

  14. 14.

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

  15. 15.

    HTML Χϯϓ CSS Browser

  16. 16.
    None
  17. 17.

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

  18. 18.

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

    ख໭Γ͠ͳ͍ʂ w %FW5PPMT্Ͱิ׬͕ར͘͠Ŋݟ͍ͯΔ΋ͷ͕݁Ռ͔ͩΒʂ w Χϯϓʹج͍͍ͮͯΔ͔Β࠶ݱ౓͕؁͍ͱ͔ແ͍
  19. 19.

    ࢓૊Έ DevTools Browser style.css ᶃ ᶄ ᶅ ᶃฤू͢Δ ᶄը໘ʹ൓ө͢Δ ᶅϑΝΠϧʹॻ͖ࠐΉ

  20. 20.

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

  21. 21.

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

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

    ؀ڥΛͭ͘Δ  1FSGFDU1JYFMΛΠϯετʔϧ͢Δ  ։ൃதͷϖʔδΛ։͘  %FW5PPMTΛ։͖ɺ8PSLTQBDFΛઃఆ͢Δ w 4PVSDFTλϒ'JMFTZTUFNύωϧ"EEGPMEFSUPXPSLTQBDF w

    υΩϡϝϯτϧʔτʹ͋ͨΔϑΥϧμΛબͿ w ಡΈॻ͖ݖݶΛٻΊΒΕΔͷͰɺڐՄ͢Δ
  23. 23.

    4BTTΛ࢖͏ͱ͖ͷ஫ҙ఺ w 4PVSDFNBQͷग़ྗ͕ඞཁ w 4BTTίϯύΠϥʔͷΦϓγϣϯʹඞͣ͋ΔΑʂ w 4BTTϑΝΠϧ΋8PSLTQBDFܦ༝ͰΞΫηεͰ͖ΔΑ͏ʹ͢Δ w TSD EJTUʹ෼ׂ͍ͯ͠Δ؀ڥߏ੒ͩͱ͏·͍͔͘ͳ͍ʂ

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

    ͱ͜ΖͰŊ

  25. 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. 26.

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

  27. 27.

    ͱ͜ΖͰᶄŊ

  28. 28.

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

  29. 29.

    ͓ΘΓ