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

F703b996b502414dd880bc39789faa8f?s=128

Daisuke Konishi

October 29, 2016
Tweet

Transcript

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

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

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

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

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

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

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

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

  9. ṖͷίʔσΟϯάελΠϧʹ׳Εͳ͍ ͋Δఔ౓ม͑ΕΔΑ͏ʹަব͠ɺ
 ηϚϯςΟοΫͳωʔϛϯάΛՄೳʹ

  10. ౖΓͱѩ͠Έͷ*&ରԠ w ΞΫηεղੳ͢Δͱͳ͔ͳ͔ͷׂ߹Ͱ
 ੾Εͳ͍ w ͜Ε·Ͱʹܦݧφγ

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

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

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

  14. #PVSCPOͷ͋Γ͕͍ͨͱ͜ w ඞཁͳ෼͚ͩࣗಈͰग़ྗ͢ΔͷͰΑ͋͘Δ
 ϑϨʔϜϫʔΫʹൺ΂ɺ༨෼ͳίʔυ͕
 ੜ੒͞Εͳ͍ w ϕϯμʔϓϨϑΟοΫε΋෇͚ͯ͘ΕΔ w هड़ྔ͕ݮͬͨΓίʔυ͕·ͱ·ΔͷͰ
 ݟқ͘ͳΔ

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

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

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

  18. ྫ͑͹ɹ @include triangle(8px 6px, grey, down); άϨʔͷԼ޲͖ࡾ֯
 (γϯϓϧͳਧ͖ग़͠ͷ଍ͱ͔)

  19. ͦͷଞ͍Ζ͍Ζʂ

  20. SnippetͷϓϥάΠϯͰ
 αδΣετՄೳ • Atom atom-bourbon-snippets • SublimeText 3(?) rossedman/derby: Bourbon

    & Neat Sublime Text Snippets & Auto Completions
  21. ࢥͬͯΔҎ্ʹมߋ͕͘Δ w ͪΌͿ୆Λͻͬ͘Γฦ͢ΫϥΠΞϯτ͸ଟ͍ w lฦ͞Εͳ͍Α͏ʹ͢Δzͷ͸σΟϨΫλʔʹ
 ͓ئ͍
 ฦ͞Εͨ࣌ʹڧ͘ੜ͖ΔͨΊͷίʔυΛ ॻ͘

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

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

  24. ͦ͜Ͱ͜͏ʂ margin-left: floor(percentage( 282 / 504 )); ͋Μ·Γ΍ΔͱίϯύΠϧ͕஗͘ͳΔͷͰ
 मਖ਼ೖΔͱϋήΔͱ͜ͱ͔ࡉ͔͍ͱ͚ͩ͜ͱ͔

  25. ྫ͑͹ AͱBೖΕସ͍͑ͯͩ͘͞ ಉ͡ݟͨ໨Ͱ
 ΋͏1ݸηΫγϣϯ૿΍͠·͢ ΍ͬͺແ͘ͳΓ·ͨ͠ʔʂ

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

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

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

    w ͪΌͿ୆ͻͬ͘Γฦ͞Εͯ΋ઃܭ࣍ୈͰ
 ڧ͘ੜ͖ΕΔ
  29. ্ख͘૊ΜͰ໌೔΋ؤுΖ͏