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

VASILY流CSSコーディング

 VASILY流CSSコーディング

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

AmatsukiKu

June 07, 2017
Tweet

More Decks by AmatsukiKu

Other Decks in Programming

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