コーディング中はブラウザにガイドを引こう

デザイン時のPSD上でのゴネゴネをフロントエンド実装時にまわそう

Transcript

1. ίʔσΟϯάத͸
   ϒϥ΢βʹ
   ΨΠυΛҾ͜͏ c
   
   
   
   c
   
   ܂ݪ
   ᠳ
   
   
   c
   
   1"$*/$
   
   c
2. ࣗݾ঺հ ίʔσΟϯάத͸ϒϥ΢βʹΨΠυΛҾ͜͏
3. ࣗݾ঺հ w ܂ݪɹᠳ
   w σβΠφʔɻ
 ೥ΑΓ1"$*/$ʹೖࣾɻ
   w ओʹ΢ΣϒαΠτɺεϚϗΞϓϦɺ
 αΠωʔδͳͲͷ6*σβΠϯΛ΍ͬͯ·͢ɻ
   w ੩Ԭݝ඿দࢢग़਎
   w ޷͖ͳҿΈ෺͸Ϗʔϧ ίʔσΟϯάத͸ϒϥ΢βʹΨΠυΛҾ͜͏
4. ΨΠυͬͯʁ ίʔσΟϯάத͸ϒϥ΢βʹΨΠυΛҾ͜͏
5. ΨΠυͬͯʁ ˡίϨ ίʔσΟϯάத͸ϒϥ΢βʹΨΠυΛҾ͜͏
6. σβΠϯσʔλ্ͷࡉ͔͍ௐ੔ ίʔσΟϯάத͸ϒϥ΢βʹΨΠυΛҾ͜͏
7. σβΠϯσʔλ্ͷࡉ͔͍ௐ੔ ϚʔΫΞοϓʹ
   ൓ө͞Εͳ͚Ε͹
   ҙຯ͕ͳ͍ʂ ίʔσΟϯάத͸ϒϥ΢βʹΨΠυΛҾ͜͏
8. σβΠϯσʔλ্ͷࡉ͔͍ௐ੔ ͜ͷ࣌ؒΛ
   $44্ͷௐ੔ʹ
   ·Θͦ͏ʂ ίʔσΟϯάத͸ϒϥ΢βʹΨΠυΛҾ͜͏
9. ͔ͬ͜Α͘ݴ͏ͱ Πϯϒϥ΢β
   σβΠϯ IN-BROWSER DESIGN ίʔσΟϯάத͸ϒϥ΢βʹΨΠυΛҾ͜͏
10. σϞ ίʔσΟϯάத͸ϒϥ΢βʹΨΠυΛҾ͜͏
11. ٕज़తʹ͸ UBSHFU
    ٖࣅΫϥε ˠ
    ΞϯΧʔ IPHF Ͱࢦఆ͞Εͨ࣌ʹ༗ޮͱͳΔٖࣅΫϥε
    ˠ
    $44
    ͷඪ४ٕज़
    ίʔσΟϯάத͸ϒϥ΢βʹΨΠυΛҾ͜͏
12. ·ͱΊ ίʔσΟϯάத͸ϒϥ΢βʹΨΠυΛҾ͜͏
13. σβΠϯΧϯϓͳ͠͸ݫ͍͠ ίʔσΟϯάத͸ϒϥ΢βʹΨΠυΛҾ͜͏
14. σβΠϯΧϯϓͳ͠͸ݫ͍͠ ࡉ͔͍ௐ੔΍ϒϥογϡΞοϓ͸
    ϒϥ΢βͰ΍Δํ͕͍͍Ϟϊ͕Ͱ͖Δ ίʔσΟϯάத͸ϒϥ΢βʹΨΠυΛҾ͜͏
15. σβΠϯΧϯϓͳ͠͸ݫ͍͠ ࡉ͔͍ௐ੔΍ϒϥογϡΞοϓ͸
    ϒϥ΢βͰ΍Δํ͕͍͍Ϟϊ͕Ͱ͖Δ ͦΕΛॿ͚Δ
    ϑϩϯτΤϯυͷ
    ςΫχοΫ͸ͨ͘͞Μ͋Δʂ ίʔσΟϯάத͸ϒϥ΢βʹΨΠυΛҾ͜͏
16. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ ίʔσΟϯάத͸ϒϥ΢βʹΨΠυΛҾ͜͏ ࠓ೔ͷιʔεˠ(JUIVC 2JJUB volkuwabara