VASILY流CSSコーディング

Fashion Tech meetup #4で発表した資料です。
デザインをWebに再現し続ける際に陥りがちな問題とそれらに対しVASILYではどのように対応しているかを紹介しています。

Transcript

1. 7"4*-:ྲྀ
   $44ίʔσΟϯά
   ,FOKJ(POOPLBNJ
   'BTIJPO5FDINFFUVQ
   

   View Slide

2. ݖक݈࢚
   ʢ͝Μͷ͔Έ͚Μ͡ʣ
   !"NBUTVLJ,V
   7"4*-: *OD
   'SPOUFOEFOHJOFFS
   w ೥৽ଔͱͯ͠7"4*-:ʹೖࣾ
   w *20/ͳͲͷ1$ɾεϚϗαΠτΛ୲౰
   w ࠓ݄͔ΒωΠςΟϒΞϓϦ։ൃʹ΋+PJO
   

   View Slide

3. ࠓ೔ͷτϐοΫ
   σβΠϯΛ8FC্ʹ࠶ݱ͠ଓ͚ΔࡍʹؕΓ͕ͪͳ໰୊ͱରԠํ๏
   

   View Slide

4. ։ൃ࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
   ୯७ͳݟམͱ͠
   ݟ͑ͳ͍σβΠϯ
   ӡ༻࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
   มߋ࿙Ε
   ҙਤ͠ͳ͍มߋ
   ·ͱΊ
   ໨࣍
   

   View Slide

5. ։ൃ࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
   ୯७ͳݟམͱ͠
   ݟ͑ͳ͍σβΠϯ
   ӡ༻࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
   มߋ࿙Ε
   ҙਤ͠ͳ͍มߋ
   ·ͱΊ
   ໨࣍
   

   View Slide

6. σβΠϯͱݟൺ΂ͳ͕Β࣮૷ʹޡΓ͕ͳ͍͔Λ֬ೝ͢Δͷ͸

   ؒҧ͍୳͠ͷΑ͏ͳ΋ͷ
   ୯७ͳݟམͱ͠
   σβΠϯσʔλ ࣮ࡍʹίʔσΟϯάͨ͠΋ͷ
   

   View Slide

7. ೚ҙͷը૾Λಁաɺ֦େɾॖ
   খͯ͠ॏͶΒΕΔ֦ுػೳ
   ରԠϒϥ΢β
   $ISPNF 4BGBSJ 'JSFGPY
   0QFSB *& &EHF
   1FSGFDU1JYFM
   

   View Slide

8. ॏͶͯ΋ෆ໌ྎͳ৔߹
   σʔλ͕ҟͳΔͱॏͶͯ΋Θ͔Γʹ͍͘
   ϞοΫσʔλΛ༻͍Δ
   

   View Slide

9. w σβΠϯͱಉ͡஋Λ࣋ͭσʔλΛ:".-ʹఆٛ
   w ։ൃ؀ڥͰͷΈσʔλΛ্ॻ͖͢Δ3BJMTͷ

   ϔϧύʔϝιουͱ࣮ͯ͠૷
   ϞοΫσʔλͷద༻
   DPOpHNPDLJUFNZNM
   

   View Slide

10. ։ൃ࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
    ୯७ͳݟམͱ͠
    ݟ͑ͳ͍σβΠϯ
    ӡ༻࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
    มߋ࿙Ε
    ҙਤ͠ͳ͍มߋ
    ·ͱΊ
    ໨࣍
    

    View Slide

11. w ෳ਺ߦͷςΩετ
    w Ξχϝʔγϣϯ
    ݟ͑ͳ͍σβΠϯ
    

    View Slide

12. ࣮σʔλ͕ೖΔ͜ͱͰɺվߦ͕ඞཁͱΘ͔Δ͜ͱ͸Α͋͘Δ
    w ௕͍ϒϥϯυ໊͸ࣄલʹڞ༗
    w 6/*5&%"33084HSFFOMBCFMSFMBYJOH
    w ("--"3%"("-"/5&
    w ඞཁʹԠͯ͡σʔλϕʔεΛௐ΂ɺ࠷େจࣈ਺ͳͲσʔλ
    ͷಛ௃Λڞ༗
    ෳ਺ߦͷςΩετ
    

    View Slide

13. Ξχϝʔγϣϯ͸࣮૷ʹ੍ݶ͕ଟ͍͜ͱ΋͋ΔͷͰɺ

    Πϝʔδ͚ͩฉ͖ɺ࣮૷ͨ͠΋ͷΛ֬ೝͯ͠΋Β͍ௐ੔
    Ξχϝʔγϣϯ
    

    View Slide

14. ։ൃ࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
    ୯७ͳݟམͱ͠
    ݟ͑ͳ͍σβΠϯ
    ӡ༻࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
    มߋ࿙Ε
    ҙਤ͠ͳ͍มߋ
    ·ͱΊ
    ໨࣍
    

    View Slide

15. σʔλϕʔε΍"1*ͱൺ΂ɺ$44͸৽௠୅ँ͕ܹ͍͠

    ʢදࣔ͢Δ಺༰͸ಉ͡Ͱ΋ݟͨ໨͸ม͑Δʣ
    ؅ཧ͕؁͍ͱɺ$44ϧʔϧ͸ॠؒ͘ʹංେԽ
    ӡ༻࣌ʹى͜Δ͜ͱ
    

    View Slide

16. ӡ༻Λ͍ͯ͠ΔͱมߋՕॴ͕޿ൣғʹٴͿվम͕ى͜Δ
    w ঎඼Ұཡͷϒϥϯυ໊ͷӳޠදهͱ೔ຊޠදهΛಉ͡
    ߦ͔Βೋߦʹ෼཭
    w αΠτશମͷϘʔμʔΧϥʔͷมߋ
    w ϩΰͱςʔϚΧϥʔͷมߋ
    มߋ࿙Ε
    ڞ௨Խ͢΂͖ՕॴͰ͍ͯ͠ͳ͍ͱมߋ࿙Ε͕ى͖Δ
    

    View Slide

17. σβΠϯଆͰ͸4LFUDIͷγϯϘϧͱͯ͠ɺίʔσΟϯάଆ
    Ͱ͸4BTTͷఆ਺΍Ϟδϡʔϧͱͯ͠ڞ௨Խ
    ڞ௨Խ
    γϯϘϧΛฤू͢Δ͜ͱͰɺσβΠϯશମ͕मਖ਼͞ΕΔ
    

    View Slide

18. ఆ਺ɾϞδϡʔϧԽ
    TUZMFTIFFUTTIBSFEDPNNPOTBTT
    TUZMFTIFFUTTIBSFENJYJOTTBTT
    σβΠϯ্ͷΧϥʔύϨοτʹ૬౰
    ίʔσΟωʔτϞδϡʔϧ
    

    View Slide

19. ։ൃ࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
    ୯७ͳݟམͱ͠
    ݟ͑ͳ͍σβΠϯ
    ӡ༻࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
    มߋ࿙Ε
    ҙਤ͠ͳ͍มߋ
    ·ͱΊ
    ໨࣍
    

    View Slide

20. $44ͷελΠϧద༻ൣғͷ໰୊Ͱҙਤ͍ͯ͠ͳ͍ՕॴΛมߋ
    ίʔσΟϯάن໿Ͱద༻ൣғΛݶఆ
    ҙਤͤ͵มߋ
    w 7JFX$44
    w ໋໊نଇ
    ྫɿ͋Δϖʔδ͚ͩݟग़͠Λେ͖ͨͭ͘͠΋Γ͕ଞͷϖʔδͷ
    ݟग़͠΋େ͖͘ͳͬͯ͠·ͬͨ
    

    View Slide

21. I IͷΑ͏ͳ୯७ͳηϨ
    ΫλʔͰ΋ଞͷϖʔδʹӨ
    ڹΛ༩͑ͳ͍
    TUZMFTIFFUTTFUTTQJOEFYTBTT
    ڞ௨ϑΝΠϧ
    ɹϨΠΞ΢τʹؔ͢Δ
    Ϋϥε
    Ϟδϡʔϧͷϩʔυ
    

    View Slide

22. ࠩ෼ݕग़πʔϧ
    େن໛ͳϦϑΝΫλϦϯά࣌ʹ͸ओཁϖʔδʹରͯ͠πʔϧ
    Λ༻͍ͯޮ཰తʹ֬ೝ
    ΧϥϜམ͕ͪൃੜ
    ͍ͯ͠Δ
    ࠩ෼ͷݕग़
    ։ൃલ
    ։ൃޙ
    ࠩ෼
    

    View Slide

23. ։ൃ࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
    ୯७ͳݟམͱ͠
    ݟ͑ͳ͍σβΠϯ
    ӡ༻࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
    มߋ࿙Ε
    ҙਤ͠ͳ͍มߋ
    ·ͱΊ
    ໨࣍
    

    View Slide

24. w πʔϧΛ༻͍Δ͜ͱͰޮ཰తʹσβΠϯͱ

    ࣮૷ͷͣΕΛ֬ೝ
    w ڞ௨ԽΛҙࣝ͢Δ͜ͱͰมߋ࿙ΕΛ๷ࢭ
    w ن໿ͰյΕʹ͍͘ίʔυΛҡ࣋
    ·ͱΊ
    

    View Slide