CSS 設計ことはじめ

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

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