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

入社前と入社後で CSSの書き方を変えた話

入社前と入社後で CSSの書き方を変えた話

CSS Talk vol.1 - TAMのイベント | Doorkeeper : https://taminc.doorkeeper.jp/events/52298

Daisuke Konishi

October 29, 2016
Tweet

More Decks by Daisuke Konishi

Other Decks in Technology

Transcript

  1. Ⰵ爡⵸הⰅ爡䖓ד
    $44ך剅ֹ倯׾㢌ִ׋鑧
    Daisuke Konishi

    View full-size slide

  2. Daisuke Konishi
    @skd_nw
    ϚʔΫΞοϓΤϯδχΞ

    View full-size slide

  3. ٕज़తͳ࿩ɺΠϕϯτߦͬͨ࿩ɺͳΜ΍͔Μ΍
    http://peng-note.com

    View full-size slide

  4. ࠷ۙ΍ͬͯΔ͜ͱ
    w Ξχϝʔγϣϯͷษڧ
    w 1PTU$44ͰΦϨΦϨίϯύΠϥ࡞੒
    w +BWB4DSJQUͷઃܭͱ͔3FBDUKTͷษڧ
    w ൴ঁ୳͠

    View full-size slide

  5. ೖ͔ࣾͯ͠Βॻ͖ํΛͲ͏ม͔͑ͨ

    View full-size slide

  6. ೖࣾલ େֶੜ࣌୅

    ֶ಺ͷ׆ಈͷαΠτ΍ϒϩάͷ੍࡞ɾอक
    w εΫϥον͔$44ϑϨʔϜϫʔΫΛ׆༻
    w 4."$44ϕʔεͰͷઃܭ

    View full-size slide

  7. ೖࣾޙίέΔࣄ͕ଟ͔ͬͨ

    View full-size slide

  8. ίʔσΟϯάελΠϧʹ׳Εͳ͍
    例えば
    .listStyle03 { … }
    .box01 { … }

    View full-size slide

  9. ṖͷίʔσΟϯάελΠϧʹ׳Εͳ͍
    ͋Δఔ౓ม͑ΕΔΑ͏ʹަব͠ɺ

    ηϚϯςΟοΫͳωʔϛϯάΛՄೳʹ

    View full-size slide

  10. ౖΓͱѩ͠Έͷ*&ରԠ
    w ΞΫηεղੳ͢Δͱͳ͔ͳ͔ͷׂ߹Ͱ

    ੾Εͳ͍
    w ͜Ε·Ͱʹܦݧφγ

    View full-size slide

  11. ౖΓͱѩ͠Έͷ*&ରԠ
    w DBOJVTFDPNͰ࢖͑ΔϓϩύςΟͷ֬ೝ
    w ίʔσΟϯά͠ͳ͕Β7.ͰνΣοΫ
    w ؾ߹͍
    transition, animate࢖͍͍ͨਓੜͩͬͨ…

    View full-size slide

  12. CSSϑϨʔϜϫʔΫ࢖͑ͳ͍໰୊

    View full-size slide

  13. BourbonΛಋೖ
    http://bourbon.io/

    View full-size slide

  14. #PVSCPOͷ͋Γ͕͍ͨͱ͜
    w ඞཁͳ෼͚ͩࣗಈͰग़ྗ͢ΔͷͰΑ͋͘Δ

    ϑϨʔϜϫʔΫʹൺ΂ɺ༨෼ͳίʔυ͕

    ੜ੒͞Εͳ͍
    w ϕϯμʔϓϨϑΟοΫε΋෇͚ͯ͘ΕΔ
    w هड़ྔ͕ݮͬͨΓίʔυ͕·ͱ·ΔͷͰ

    ݟқ͘ͳΔ

    View full-size slide

  15. ྫ͑͹
    position: absolute;
    top: 10px;
    right: -13px;

    bottom: 0;

    left: 0;
    positionपΓͷ৭ʑΛ·ͱΊͯॻ͚Δ

    View full-size slide

  16. ྫ͑͹
    @include position(absolute, 10px -13px 0 0);
    QPTJUJPOपΓͷ৭ʑΛ·ͱΊͯॻ͚Δ

    View full-size slide

  17. ྫ͑͹ɹ
    @include transition(all 5s $ease-in-circ);
    transitionͷهड़ & easingͱ͔

    View full-size slide

  18. ྫ͑͹ɹ
    @include triangle(8px 6px, grey, down);
    άϨʔͷԼ޲͖ࡾ֯

    (γϯϓϧͳਧ͖ग़͠ͷ଍ͱ͔)

    View full-size slide

  19. ͦͷଞ͍Ζ͍Ζʂ

    View full-size slide

  20. SnippetͷϓϥάΠϯͰ

    αδΣετՄೳ
    • Atom
    atom-bourbon-snippets
    • SublimeText 3(?)
    rossedman/derby: Bourbon & Neat Sublime Text
    Snippets & Auto Completions

    View full-size slide

  21. ࢥͬͯΔҎ্ʹมߋ͕͘Δ
    w ͪΌͿ୆Λͻͬ͘Γฦ͢ΫϥΠΞϯτ͸ଟ͍
    w lฦ͞Εͳ͍Α͏ʹ͢Δzͷ͸σΟϨΫλʔʹ

    ͓ئ͍

    ฦ͞Εͨ࣌ʹڧ͘ੜ͖ΔͨΊͷίʔυΛ
    ॻ͘

    View full-size slide

  22. ྫ͑͹
    AΛ͜͜·ͰҠಈ͍ͯͩ͘͠͞
    CͷαΠζมߋʹͳΓ·ͨ͠

    View full-size slide

  23. ཁૉͷαΠζ΍Ґஔͷܭࢉ͸
    Sassʹ

    View full-size slide

  24. ͦ͜Ͱ͜͏ʂ
    margin-left: floor(percentage( 282 / 504 ));
    ͋Μ·Γ΍ΔͱίϯύΠϧ͕஗͘ͳΔͷͰ

    मਖ਼ೖΔͱϋήΔͱ͜ͱ͔ࡉ͔͍ͱ͚ͩ͜ͱ͔

    View full-size slide

  25. ྫ͑͹
    AͱBೖΕସ͍͑ͯͩ͘͞
    ಉ͡ݟͨ໨Ͱ

    ΋͏1ݸηΫγϣϯ૿΍͠·͢
    ΍ͬͺແ͘ͳΓ·ͨ͠ʔʂ

    View full-size slide

  26. มߋʹڧ͍$44Λ૊Ή

    View full-size slide

  27. w ୳͠΍͘͢ӨڹൣғΛڱ͘
    w ࢖͍ճ͕͠ޮ͘Α͏ʹίϯϙʔωϯτΛҙࣝ
    w ୳͠΍͍͢Α͏ʹద౓ʹϑΝΠϧΛ෼ׂ
    มߋʹڧ͍$44Λ૊Ή

    View full-size slide

  28. ·ͱΊ
    w ίʔσΟϯάελΠϧ΋ͳΜ΍͔Μ΍্ख͍͜ͱ
    Ͱ͖Δ
    w ϑϨʔϜϫʔΫແͯ͘΋#PVSCPOͰ޾ͤʹͳΕΔ
    w *&ରԠ΋ؾ߹ͰͳΜͱ͔ͳΔ ͨ͘͠ͳ͍

    w ͪΌͿ୆ͻͬ͘Γฦ͞Εͯ΋ઃܭ࣍ୈͰ

    ڧ͘ੜ͖ΕΔ

    View full-size slide

  29. ্ख͘૊ΜͰ໌೔΋ؤுΖ͏

    View full-size slide