CSS 設計ことはじめ

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