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
290
DevTools+PerfectPixelで爆速コーディング
Takayuki Shimada
July 18, 2019
Tweet
Share
More Decks by Takayuki Shimada
See All by Takayuki Shimada
株式会社ネコメシのご紹介
tsmd
0
8.1k
Other Decks in Programming
See All in Programming
CNCF Project の作者が考えている OSS の運営
utam0k
5
630
定理証明プラットフォーム lapisla.net
abap34
1
670
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
430
DROBEの生成AI活用事例 with AWS
ippey
0
100
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
130
チームリードになって変わったこと
isaka1022
0
130
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
150
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
150
Flatt Security XSS Challenge 解答・解説
flatt_security
0
1.1k
最近のVS Codeで気になるニュース 2025/01
74th
1
240
PicoRubyと暮らす、シェアハウスハック
ryosk7
0
250
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
130
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
460
33k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
BBQ
matthewcrist
86
9.4k
Gamification - CAS2011
davidbonilla
80
5.1k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Typedesign – Prime Four
hannesfritz
40
2.5k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Designing for humans not robots
tammielis
250
25k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
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 %ΛͨΊͯ͠ΈΑ͏ʂ
͓ΘΓ