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

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

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

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

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

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

૊Έ߹ΘͤͨΒʜ DevTools

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

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

Before HTML Χϯϓ CSS Browser ɾ)5.-ʹج͖ͮηϨΫλΛॻ͘ ɾΧϯϓͰܭଌ͢Δ ɹ จࣈαΠζŋߦߴŋ༨ന౳
ɾελΠϧΛॻ͘ ɾϒϥ΢βͰ֬ೝ͢Δ ɾΧϯϓͱͷζϨΛݕূ͢Δ <div> ... </div> div { ... }

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

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

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

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

HTML Χϯϓ CSS Browser

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

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

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

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

࢓૊Έ DevTools Browser style.css style.scss ᶃ ᶄ ᶅ ᶇ ᶃฤू͢Δ
ᶄը໘ʹ൓ө͢Δ ᶅϑΝΠϧʹॻ͖ࠐΉ ᶆίϯύΠϧ ᶇมߋ͕൓ө͞ΕΔ ᶆ

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

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

ͱ͜ΖͰŊ

<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 { } ͜ͷ࡞ۀŊΊΜͲ͍͘͞Ͱ͢ΑͶʁ

ָʹ͢Δπʔϧ ͭ͘Γ·ͨ͠ʂ https://css-scaﬀolder.netlify.com/

ͱ͜ΖͰᶄŊ

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

͓ΘΓ

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

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

Takayuki Shimada

More Decks by Takayuki Shimada

Other Decks in Programming

Featured

Transcript

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

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

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

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

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

૊Έ߹ΘͤͨΒʜ DevTools

σϞ

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

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

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

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

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

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

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

HTML Χϯϓ CSS Browser

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

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

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

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

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

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

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

ͱ͜ΖͰŊ

<nav class="HeaderglobalNav"> <ul class="HeaderglobalNavItems"> <li><a href="TBD">Link 1</a></li> <li><a href="TBD">Link 2</a></li>

ָʹ͢Δπʔϧ ͭ͘Γ·ͨ͠ʂ https://css-scaﬀolder.netlify.com/

ͱ͜ΖͰᶄŊ

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

͓ΘΓ