Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
DevTools+PerfectPixelで爆速コーディング
Takayuki Shimada
July 18, 2019
Programming
0
200
DevTools+PerfectPixelで爆速コーディング
Takayuki Shimada
July 18, 2019
Tweet
Share
More Decks by Takayuki Shimada
See All by Takayuki Shimada
tsmd
0
6.4k
Other Decks in Programming
See All in Programming
manfredsteyer
PRO
1
140
o0h
PRO
0
380
patorash
0
150
nerocrux
3
1.7k
daipresents
0
360
dunglas
5
6.3k
emberconf
0
110
kentatada
0
130
ryosogawa
0
130
hkusu
0
290
d_endo
1
530
kubode
2
200
Featured
See All Featured
erikaheidi
15
4.5k
addyosmani
1346
200k
vanstee
118
4.9k
robhawkes
53
2.9k
kastner
54
2k
eitanlees
116
10k
malarkey
193
8.7k
pedronauck
652
110k
lara
17
2.9k
marcelosomers
221
15k
paulrobertlloyd
71
3.7k
roundedbygravity
242
21k
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.-ʹج͖ͮηϨΫλΛॻ͘ ɾΧϯϓͰܭଌ͢Δ ɹ จࣈαΠζŋߦߴŋ༨ന
ɾελΠϧΛॻ͘ ɾϒϥβͰ֬ೝ͢Δ ɾΧϯϓͱͷζϨΛݕূ͢Δ <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
None
ɾϒϥβ্ʹΧϯϓΛදࣔ ɾ%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-scaffolder.netlify.com/
ͱ͜ΖͰᶄŊ
%FW5PPMTͰ ϚϧνΧʔιϧ͑Δ ͬͯͬͯ·ͨ͠ʁ 4PVSDFTλϒͰ$USM %$NE %ΛͨΊͯ͠ΈΑ͏ʂ
͓ΘΓ