DevTools+PerfectPixelで爆速コーディング

 DevTools+PerfectPixelで爆速コーディング

310bd1f45646f702ff7c334c9d612b51?s=128

Takayuki Shimada

July 18, 2019
Tweet

Transcript

  1. 7.
  2. 10.

    Before HTML Χϯϓ CSS Browser ɾ)5.-ʹج͖ͮηϨΫλΛॻ͘ ɾΧϯϓͰܭଌ͢Δ ɹ จࣈαΠζŋߦߴŋ༨ന౳ 

    ɾελΠϧΛॻ͘ ɾϒϥ΢βͰ֬ೝ͢Δ ɾΧϯϓͱͷζϨΛݕূ͢Δ <div> ... </div> div { ... }
  3. 16.
  4. 18.

    ղফ͞ΕΔ໰୊఺ w εΠονϯάθϩʂ w )5.-͸ͦ͜ʹ͋Δ w Χϯϓ΋ͦ͜ʹ͋Δ w ϒϥ΢βͰ֬ೝ΋Կ΋Ŋࠓݟ͍ͯΔͦΕ͕ϒϥ΢βʂ w

    ख໭Γ͠ͳ͍ʂ w %FW5PPMT্Ͱิ׬͕ར͘͠Ŋݟ͍ͯΔ΋ͷ͕݁Ռ͔ͩΒʂ w Χϯϓʹج͍͍ͮͯΔ͔Β࠶ݱ౓͕؁͍ͱ͔ແ͍
  5. 21.

    ࢓૊Έ DevTools Browser style.css style.scss ᶃ ᶄ ᶅ ᶇ ᶃฤू͢Δ

    ᶄը໘ʹ൓ө͢Δ ᶅϑΝΠϧʹॻ͖ࠐΉ ᶆίϯύΠϧ ᶇมߋ͕൓ө͞ΕΔ ᶆ
  6. 25.

    <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 { } ͜ͷ࡞ۀŊΊΜͲ͍͘͞Ͱ͢ΑͶʁ
  7. 29.