Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
DevTools+PerfectPixelで爆速コーディング
Search
Takayuki Shimada
July 18, 2019
Programming
0
260
DevTools+PerfectPixelで爆速コーディング
Takayuki Shimada
July 18, 2019
Tweet
Share
More Decks by Takayuki Shimada
See All by Takayuki Shimada
株式会社ネコメシのご紹介
tsmd
0
7.8k
Other Decks in Programming
See All in Programming
見た目から始める生産性向上
ikumatadokoro
7
840
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
680
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
170
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
180
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
1
170
Anthropic Cookbook のおすすめレシピ
schroneko
7
970
Ruby Pattern Matching
bkuhlmann
0
930
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
700
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
雑に思考を整理する技術と効能
konifar
60
29k
Java 22 Overview
kishida
1
180
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
840
Featured
See All Featured
Building an army of robots
kneath
300
41k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
How STYLIGHT went responsive
nonsquared
92
4.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Unsuck your backbone
ammeep
663
57k
Six Lessons from altMBA
skipperchong
21
3k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
A better future with KSS
kneath
231
16k
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 %ΛͨΊͯ͠ΈΑ͏ʂ
͓ΘΓ