VASILY流CSSコーディング

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

Transcript

1. 7"4*-:ྲྀ
   $44ίʔσΟϯά ,FOKJ
   (POOPLBNJ
   
   
   
   'BTIJPO
   5FDI
   NFFUVQ
   
2. ݖक
   ݈࢚
   ʢ͝Μͷ͔Έ
   ͚Μ͡ʣ !"NBUTVLJ,V 7"4*-:
   *OD
   'SPOUFOE
   FOHJOFFS w ೥৽ଔͱͯ͠7"4*-:ʹೖࣾ
   w *20/ͳͲͷ1$ɾεϚϗαΠτΛ୲౰
   w ࠓ݄͔ΒωΠςΟϒΞϓϦ։ൃʹ΋+PJO
3. ࠓ೔ͷτϐοΫ σβΠϯΛ8FC্ʹ࠶ݱ͠ଓ͚ΔࡍʹؕΓ͕ͪͳ໰୊ͱରԠํ๏
4.  ։ൃ࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
    ୯७ͳݟམͱ͠
    ݟ͑ͳ͍σβΠϯ
    ӡ༻࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
    มߋ࿙Ε
    ҙਤ͠ͳ͍มߋ
    ·ͱΊ ໨࣍
5.  ։ൃ࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
    ୯७ͳݟམͱ͠
    ݟ͑ͳ͍σβΠϯ
    ӡ༻࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
    มߋ࿙Ε
    ҙਤ͠ͳ͍มߋ
    ·ͱΊ ໨࣍
6. σβΠϯͱݟൺ΂ͳ͕Β࣮૷ʹޡΓ͕ͳ͍͔Λ֬ೝ͢Δͷ͸
 ؒҧ͍୳͠ͷΑ͏ͳ΋ͷ ୯७ͳݟམͱ͠ σβΠϯσʔλ ࣮ࡍʹίʔσΟϯάͨ͠΋ͷ
7. ೚ҙͷը૾Λಁաɺ֦େɾॖ খͯ͠ॏͶΒΕΔ֦ுػೳ
   ରԠϒϥ΢β
   $ISPNF
   4BGBSJ
   'JSFGPY
   0QFSB
   *&
   &EHF 1FSGFDU1JYFM
8. ॏͶͯ΋ෆ໌ྎͳ৔߹ σʔλ͕ҟͳΔͱॏͶͯ΋Θ͔Γʹ͍͘
   ϞοΫσʔλΛ༻͍Δ
9. w σβΠϯͱಉ͡஋Λ࣋ͭσʔλΛ:".-ʹఆٛ
   w ։ൃ؀ڥͰͷΈσʔλΛ্ॻ͖͢Δ3BJMTͷ
 ϔϧύʔϝιουͱ࣮ͯ͠૷ ϞοΫσʔλͷద༻ DPOpHNPDLJUFNZNM
10.  ։ൃ࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
     ୯७ͳݟམͱ͠
     ݟ͑ͳ͍σβΠϯ
     ӡ༻࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
     มߋ࿙Ε
     ҙਤ͠ͳ͍มߋ
     ·ͱΊ ໨࣍
11. w ෳ਺ߦͷςΩετ
    w Ξχϝʔγϣϯ ݟ͑ͳ͍σβΠϯ
12. ࣮σʔλ͕ೖΔ͜ͱͰɺվߦ͕ඞཁͱΘ͔Δ͜ͱ͸Α͋͘Δ
    w ௕͍ϒϥϯυ໊͸ࣄલʹڞ༗
    w 6/*5&%
    "33084
    HSFFO
    MBCFM
    SFMBYJOH
    w ("--"3%"("-"/5&
    w ඞཁʹԠͯ͡σʔλϕʔεΛௐ΂ɺ࠷େจࣈ਺ͳͲσʔλ ͷಛ௃Λڞ༗ ෳ਺ߦͷςΩετ
13. Ξχϝʔγϣϯ͸࣮૷ʹ੍ݶ͕ଟ͍͜ͱ΋͋ΔͷͰɺ
 Πϝʔδ͚ͩฉ͖ɺ࣮૷ͨ͠΋ͷΛ֬ೝͯ͠΋Β͍ௐ੔ Ξχϝʔγϣϯ
14.  ։ൃ࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
     ୯७ͳݟམͱ͠
     ݟ͑ͳ͍σβΠϯ
     ӡ༻࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
     มߋ࿙Ε
     ҙਤ͠ͳ͍มߋ
     ·ͱΊ ໨࣍
15. σʔλϕʔε΍"1*ͱൺ΂ɺ$44͸৽௠୅ँ͕ܹ͍͠
 ʢදࣔ͢Δ಺༰͸ಉ͡Ͱ΋ݟͨ໨͸ม͑Δʣ
    ؅ཧ͕؁͍ͱɺ$44ϧʔϧ͸ॠؒ͘ʹංେԽ ӡ༻࣌ʹى͜Δ͜ͱ
16. ӡ༻Λ͍ͯ͠ΔͱมߋՕॴ͕޿ൣғʹٴͿվम͕ى͜Δ
    w ঎඼Ұཡͷϒϥϯυ໊ͷӳޠදهͱ೔ຊޠදهΛಉ͡ ߦ͔Βೋߦʹ෼཭
    w αΠτશମͷϘʔμʔΧϥʔͷมߋ
    w ϩΰͱςʔϚΧϥʔͷมߋ มߋ࿙Ε ڞ௨Խ͢΂͖ՕॴͰ͍ͯ͠ͳ͍ͱมߋ࿙Ε͕ى͖Δ
17. σβΠϯଆͰ͸4LFUDIͷγϯϘϧͱͯ͠ɺίʔσΟϯάଆ Ͱ͸4BTTͷఆ਺΍Ϟδϡʔϧͱͯ͠ڞ௨Խ ڞ௨Խ γϯϘϧΛฤू͢Δ͜ͱͰɺσβΠϯશମ͕मਖ਼͞ΕΔ
18. ఆ਺ɾϞδϡʔϧԽ TUZMFTIFFUTTIBSFEDPNNPOTBTT TUZMFTIFFUTTIBSFENJYJOTTBTT σβΠϯ্ͷΧϥʔύϨοτʹ૬౰ ίʔσΟωʔτϞδϡʔϧ
19.  ։ൃ࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
     ୯७ͳݟམͱ͠
     ݟ͑ͳ͍σβΠϯ
     ӡ༻࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
     มߋ࿙Ε
     ҙਤ͠ͳ͍มߋ
     ·ͱΊ ໨࣍
20. $44ͷελΠϧద༻ൣғͷ໰୊Ͱҙਤ͍ͯ͠ͳ͍ՕॴΛมߋ
    ίʔσΟϯάن໿Ͱద༻ൣғΛݶఆ ҙਤͤ͵มߋ w 7JFX$44
    w ໋໊نଇ ྫɿ͋Δϖʔδ͚ͩݟग़͠Λେ͖ͨͭ͘͠΋Γ͕ଞͷϖʔδͷ ݟग़͠΋େ͖͘ͳͬͯ͠·ͬͨ
21. I
    IͷΑ͏ͳ୯७ͳηϨ ΫλʔͰ΋ଞͷϖʔδʹӨ ڹΛ༩͑ͳ͍ TUZMFTIFFUTTFUTTQJOEFYTBTT ڞ௨ϑΝΠϧ ɹϨΠΞ΢τʹؔ͢Δ Ϋϥε Ϟδϡʔϧͷϩʔυ
22. ࠩ෼ݕग़πʔϧ େن໛ͳϦϑΝΫλϦϯά࣌ʹ͸ओཁϖʔδʹରͯ͠πʔϧ Λ༻͍ͯޮ཰తʹ֬ೝ ΧϥϜམ͕ͪൃੜ ͍ͯ͠Δ ࠩ෼ͷݕग़ ։ൃલ ։ൃޙ ࠩ෼
23.  ։ൃ࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
     ୯७ͳݟམͱ͠
     ݟ͑ͳ͍σβΠϯ
     ӡ༻࣌ʹؕΓ͕ͪͳ໰୊ͱͦͷରԠ๏
     มߋ࿙Ε
     ҙਤ͠ͳ͍มߋ
     ·ͱΊ ໨࣍
24. w πʔϧΛ༻͍Δ͜ͱͰޮ཰తʹσβΠϯͱ
 ࣮૷ͷͣΕΛ֬ೝ
    w ڞ௨ԽΛҙࣝ͢Δ͜ͱͰมߋ࿙ΕΛ๷ࢭ
    w ن໿ͰյΕʹ͍͘ίʔυΛҡ࣋ ·ͱΊ