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
330
DevTools+PerfectPixelで爆速コーディング
Takayuki Shimada
July 18, 2019
Tweet
Share
More Decks by Takayuki Shimada
See All by Takayuki Shimada
株式会社ネコメシのご紹介
tsmd
0
8.4k
Other Decks in Programming
See All in Programming
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
520
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
400
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
33k
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
120
XP, Testing and ninja testing ZOZ5
m_seki
3
790
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
520
Google Opalで使える37のライブラリ
mickey_kubo
3
130
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
390
What's new in Spring Modulith?
olivergierke
1
160
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
530
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
190
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
How STYLIGHT went responsive
nonsquared
100
5.8k
A Tale of Four Properties
chriscoyier
161
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
The Invisible Side of Design
smashingmag
302
51k
Fireside Chat
paigeccino
40
3.7k
YesSQL, Process and Tooling at Scale
rocio
173
14k
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 %ΛͨΊͯ͠ΈΑ͏ʂ
͓ΘΓ