Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VASILY流CSSコーディング

 VASILY流CSSコーディング

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

1cb874654a240f295173de46635c8bca?s=128

AmatsukiKu

June 07, 2017
Tweet

Transcript

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

  2. ݖक݈࢚ ʢ͝Μͷ͔Έ͚Μ͡ʣ !"NBUTVLJ,V 7"4*-: *OD 'SPOUFOEFOHJOFFS 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&%"33084HSFFOMBCFMSFMBYJOH 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 ن໿ͰյΕʹ͍͘ίʔυΛҡ࣋ ·ͱΊ