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
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
最近のVS Codeで気になるニュース 2025/01
74th
1
250
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
ARA Ansible for the teams
kksat
0
150
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
Rails アプリ地図考 Flush Cut
makicamel
1
110
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
『品質』という言葉が嫌いな理由
korimu
0
160
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
Formの複雑さに立ち向かう
bmthd
1
720
Featured
See All Featured
Facilitating Awesome Meetings
lara
51
6.2k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Building Adaptive Systems
keathley
40
2.4k
How STYLIGHT went responsive
nonsquared
98
5.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Being A Developer After 40
akosma
89
590k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Six Lessons from altMBA
skipperchong
27
3.6k
Practical Orchestrator
shlominoach
186
10k
Bash Introduction
62gerente
610
210k
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 %ΛͨΊͯ͠ΈΑ͏ʂ
͓ΘΓ