CSS 設計ことはじめ

CSS 設計ことはじめ

2016.08.19 イドバタ会議#2 にて発表したスライドです。

E03953e0c18d776fead147601fdc3899?s=128

Toro_Unit (Hiroshi Urabe)

August 19, 2016
Tweet

Transcript

  1. CSS ઃܭ͜ͱ͸͡Ί ~ ΧΦεʹͳΔCSSʹզʑਓྨ͸Ͳ͏΍ཱͬͯͪ޲͔͍͚ͬͯ͹ྑ͍ͷ͔ ~ Toro_Unit / 2016.8.19 @ΠυόλΧΠΪ Vol.2

    2016.8.19 @ΠυόλΧΠΪ Vol.2 1
  2. $ whoami 2016.8.19 @ΠυόλΧΠΪ Vol.2 2

  3. Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) Web Designer / Front-end Engineer

    / WordPress Plugin Developer Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 2016.8.19 @ΠυόλΧΠΪ Vol.2 3
  4. WordCamp Tokyo ࣮ߦҕһ / εϐʔΧʔͰ͢ 2016.8.19 @ΠυόλΧΠΪ Vol.2 4

  5. WordBench ௕໺ 10/1ʹ΍ΔΑʂ ొஃऀ΋·ͩ·ͩืूதͰ͢!!! http://wbnagano.connpass.com/event/37529/ 2016.8.19 @ΠυόλΧΠΪ Vol.2 5

  6. ͯ͞ຊ୊ɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 6

  7. օ͞Μɺ ͜Μͳܦݧ͸͋Γ·ͤΜ͔ʁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 7

  8. • 1೥Ҏ্લʹೲ඼ͨ͠Ҋ݅ͷमਖ਼ґཔɻ • ୭͕ॻ͍ͨͷ͔΋ྑ͘ղΒͳ͍Ҿ͖ܧ͗Ҋ݅ɻ • 1ສߦΛ༨༟Ͱ௒͑ͯΔCSSɻ • ΄ͱΜͲ͸ɺίϐϖίʔυͷڰتཚ෣ɻ • ͔͠΋ࡉ͔͍ͱ͜Ζ͕গͣͭ͠ҧͬͯΔɻ

    2016.8.19 @ΠυόλΧΠΪ Vol.2 8
  9. ʮطଘͷCSSʁಡΊΔ͔ͦΜͳ΋ͷʂʯ 2016.8.19 @ΠυόλΧΠΪ Vol.2 9

  10. • ૿৩͢ΔṖͷɺʮfix.cssʯ, ʮappend.cssʯ, ʮcustom.cssʯ, etc... • ͦͯ͠ੜ·ΕΔ important! ͷ෗ւɻ •

    ΋͸΍୭΋৮Εͳ͍ CSS ͷ஀ੜɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 10
  11. 2016.8.19 @ΠυόλΧΠΪ Vol.2 11

  12. ผʹ͜Εͬͯɺ͜͜࠷ۙͷ࿩͡Όແ͍ΑͶ ... 2016.8.19 @ΠυόλΧΠΪ Vol.2 12

  13. ਓྨ͸ʮCSS͸೉͍͠ʂʯͱ͍͏͜ͱʹ͍͍Ճݮʹؾͮ͘΂͖ɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 13

  14. ͩΕͩΑ!!! HTML/CSS͸؆୯ͩͱ͔ݴౕͬͨ͸!!! 2016.8.19 @ΠυόλΧΠΪ Vol.2 14

  15. ͔͠͠ɺͲΜͲΜߴ౓Խ͍ͯ͘͠CSS΁ͷཁٻɻ HTML/CSS͸WEBαΠτҎ֎Ͱ΋࢖ΘΕΔΑ͏ʹɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 15

  16. ͊͞ɺͲ͏͢Δʁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 16

  17. ͦ΋ͦ΋ͳͥCSS͸ΧΦεʹͳͬͯ͠·͏ΜͩΖ͏ʁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 17

  18. ͨͱ͑͹͜ΜͳHTML <h1 class="title">αΠτͷλΠτϧ</h1> <main id="main-contents"> <h1 class="title">ϒϩάͷλΠτϧ</h1> <article class="post"> <header

    class="headline"> <h1 class="title">هࣄͷλΠτϧ</h1> </header> </article> </main> 2016.8.19 @ΠυόλΧΠΪ Vol.2 18
  19. CSSͬͯ؆୯! .title { color: red; } 2016.8.19 @ΠυόλΧΠΪ Vol.2 19

  20. CSSͬͯ؆୯! .title { color: red; } .post .title { color:

    orange; } 2016.8.19 @ΠυόλΧΠΪ Vol.2 20
  21. CSSͬͯ؆୯????? .title { color: red; } #main-contents .title { color:

    green; } .post .title { color: orange; /*্ॻ͖͞ΕΔɻɻɻ*/ } 2016.8.19 @ΠυόλΧΠΪ Vol.2 21
  22. CSSͬͯ؆୯???????????????? .title {} #main-contents .title {} .post .title {} h1.title

    {} main#main-contents article .title {} main#main-contents .headline h1 {} main article header h1.title {} main#main-contents .post:first-child h1 {} 2016.8.19 @ΠυόλΧΠΪ Vol.2 22
  23. CSS ෗ւԽͷݪҼͨͪ • ηϨΫλͱ͍͏άϩʔόϧͳม਺ɻ • ࣮ߦ࣌(ͭ·ΓHTMLͷίϯςΩετ)ʹࠨӈ͞Ε·͘Δ • ޙ͔Βഁյతมߋ͕Մೳɻʢͨͩ͠ॻ͖׵ΘΔ͔Ͳ͏͔͸η ϨΫλͷڧ͞ʹґଘʣ 2016.8.19

    @ΠυόλΧΠΪ Vol.2 23
  24. CSS͸؆୯ʹॻ͚Δ͚ͲɺʮͪΌΜͱ ͨ͠CSSʯͬͯ೉͍͠ɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 24

  25. ͪΌΜͱͨ͠CSSͱ͸ʁ • ༧ଌ͠΍͍͢ • ࠶ར༻͠΍͍͢ • อक͠΍͍͢ • ֦ு͠΍͍͢ CSS

    Architecture — Philip Walton ೔ຊޠ༁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 25
  26. CSS΋ϓϩάϥϛϯάͷΑ͏ʹɺ ͪΌΜͱઃܭ͢Δ͜ͱ͕ॏཁɻ ʮͱΓ͋͑ͣσβΠϯ͕࣮ݱͰ͖Ε͹OKʯ͸ଔۀ͠Α͏ɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 26

  27. Ͳ͏΍Δʁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 27

  28. 1.ϚʔΫΞοϓʹґଘ͠ͳ͍ 2016.8.19 @ΠυόλΧΠΪ Vol.2 28

  29. ͨͱ͑͹͜ΜͳHTMLͱCSS <section> <h1 class="title">λΠτϧ</h1> <p>ຊจ</p> </section> section .title { margin:

    0 0 0.5em; font-size: 1.7em; } 2016.8.19 @ΠυόλΧΠΪ Vol.2 29
  30. ϖʔδʹΑͬͯɺ<section> ͕ <article> ʹมΘͬͨΒ? .title ͬͯଞͰ΋࢖͍ͦ͏ͩΑͶʁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 30

  31. ͨͱ͑͹͜͏͢Δɻ <section class="entry"> <h1 class="entry__title">λΠτϧ</h1> <p>ຊจ</p> </section> .entry {} .entry__title

    { margin-bottom: .5em; font-size: 1.7em; } 2016.8.19 @ΠυόλΧΠΪ Vol.2 31
  32. 2.ηϨΫλͷৄࡉ౓͸ՄೳͳݶΓ࠷খݶͰɻ ͨͱ͑͹͜ΜͳHTML <div class="main-contents"> <h1>ϖʔδλΠτϧ</h1> <section class="entry"> <h1 class="entry__title">λΠτϧ</h1> <p>ຊจ</p>

    </section> </div> 2016.8.19 @ΠυόλΧΠΪ Vol.2 32
  33. .main-contents h1 { margin-bottom: 1em; /*͕ͬͪ͜ద༻͞ΕΔ*/ } .entry {} .entry__title

    { margin-bottom: .5em; font-size: 1.7em; } ͋ͬΕʔʁ͓͔͍͠ͳ͊ɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 33
  34. ͜͏͢Δ!!! h1 { margin-bottom: 1em; } .entry {} .entry__title {

    margin-bottom: .5em; /*͕ͬͪ͜ద༻͞ΕΔ!*/ font-size: 1.7em; } 2016.8.19 @ΠυόλΧΠΪ Vol.2 34
  35. • .main-contents h1 ͱ͔ .main-contents p ͱ͔΍Γ͕ͪ ͚ͩͲɺͦΕͬͯຊจͷCSSͰ͢ΑͶɻͦΕͬͯͦͷϖʔδ ͷσϑΥϧτCSS͡Όͳ͍ʁ •

    HTMLͷهड़৔ॴ࣍ୈͰ݁Ռ͕มΘΔͷ͸ࠞཚͷݩɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 35
  36. 3. ίϯϙʔωϯτࢦ޲ͳCSS entry.css .entry {} .entry__title {} .entry__title--featured {} .entry__body

    {} 2016.8.19 @ΠυόλΧΠΪ Vol.2 36
  37. • ίϯϙʔωϯτ͝ͱʹϑΝΠϧΛ෼ׂɻίϯϙʔωϯτͷ໾ ׂΛ͸͖ͬΓͤ͞Δɻ • ଞͷίϯϙʔωϯτʹ͸৮Βͳ͍ɻ • CSS ϑΝΠϧ͕͍ͬͺ͍Ͱਏ͍ʁ Sass /

    LESS / Stylus / postcss ͋ͨΓΛར༻͢Ε͹ྑ͍Μ͡Όແ͍Ͱ͠ΐ͏͔ʁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 37
  38. 4.۩ମతͳίϯϙʔωϯτͳͲͷઃܭํ਑. υΩϡϝϯτΛॻ͍ͯ΋ྑ͍Ͱ͕͢ɺͲ͏ͤϝϯςφϯε͠ͳ ͘ͳΔΜͰɺެ։͞Ε͍ͯΔΞʔΩςΫνϟʔͳͲΛऔΓೖΕ Α͏ɻ • OOCSS / SMACSS / BEM

    / SUIT CSS / FLOCSS / ITCSS / ECSS ... • ͱΓ͋͑ͣɺOOCSSɾSMACSSɾBEM ͋ͨΓ͸جຊతͳߟ ͑ํʹͳΔͷͰԡ͓͑ͯ͜͞͏ɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 38
  39. ৄ͍͠࿩͸... ʮWeb੍࡞ऀͷͨΊͷCSSઃܭͷڭՊ ॻʯ(ϝϩϯຊ)ʹ͍͍ͩͨશ෦ॻ͍ͯ͋ Γ·͢ʂ ҰՈʹҰ࡭ ! 2016.8.19 @ΠυόλΧΠΪ Vol.2 39

  40. • CSSͷઃܭʹۜͷ஄ؙͳͲͳ͍ʂ • ઃܭΛߟ͑ͳ͕Β੔ཧ੔಴ɻৗʹϦϑΝΫλϦϯά͠ͳ͕Β ։ൃ͢Δ΂͠ɻ • WP-D Week Ͱ CSS

    ͷ࿩Λ͠·ͨ͠ɻͦͯ͠ CSS ઃܭͱ෦԰ ͷ૟আʹ͍ͭͯɻ – Toro_Unit 2016.8.19 @ΠυόλΧΠΪ Vol.2 40
  41. ࢀߟࢿྉͳͲ • CSSઃܭͷཧ૝ͱݱ࣮ • ͳΜͰCSS͙͢ࢮΜͰ͠·͏Μ 2016.8.19 @ΠυόλΧΠΪ Vol.2 41

  42. Thanks! Speaker Deck: https://speakerdeck.com/torounit Github / @torounit Twitter: @Toro_Unit Facebook:

    fb.me/torounit Blog: https://torounit.com 2016.8.19 @ΠυόλΧΠΪ Vol.2 42