Review the OOCSS

CSS Talk Vol.01 の発表資料です。

Transcript

1. CSS Talk vol.01 manabu yasuda Review the OOCSS OOCSS Λ͸͡ΊΑ͏
2. 01 Review the OOCSS INTRODUCTION ࣗݾ঺հ
3. 02 Review the OOCSS ҆ా ֶ (yasuda manabu) גࣜձࣾ TAM ϚʔΫΞοϓΤϯδχΞ https://github.com/manabuyasuda @ Gaku0318
4. 03 Review the OOCSS TipsNote by TAM גࣜձࣾTAMͷςΫχΧϧνʔϜ͕͓ಧ͚͢Δٕज़৘ใʂ
5. 04 Review the OOCSS ʮwantedly TAMʯͰݕࡧ !! ΤϯδχΞɺσβΠφʔɺσΟϨΫλʔৗ࣌ืूதͰ͢ɻ
6. 05 Review the OOCSS 01. CSSʹઃܭ͕ٻΊΒΕΔཧ༝ 02. ආ͚Δ΂͖CSS ʢΞϯνύλʔϯʣ 03. OOCSSͷ֓ཁ 04. OOCSSͷ2ͭͷݪଇ 05. ΦϒδΣΫτͷ໾ׂͱ෼཭͢Δཻ౓ ΞδΣϯμ
7. 06 Review the OOCSS CSSʹઃܭ͕ٻΊΒΕΔཧ༝ 01
8. 07 Review the OOCSS ɾطଘͷελΠϧͷӨڹൣғ͕޿͗ͯ͢௥Ճɺ มߋ͠ʹ͍͘ɻ ɾطଘͷελΠϧͷશମ૾͕೺ѲͰ͖ͳ͍ɻ ɾطଘͷελΠϧ͕࠶ར༻Λલఏʹ࡞ΒΕ͍ͯͳ͍ɻ ɾ࠶ར༻Ͱ͖Δύʔπ͕গͳ͍ͷͰɺ ίʔυ͕૿͑ͯ͠·͏ɻ ɾϨεϙϯγϒͩͱίʔυ͕ෳࡶʹͳͬͯ͠·͏ɻ
9. 08 Review the OOCSS ୅දతͳCSSઃܭͷख๏ ɾOOCSS ɾSMACSS ɾBEM ɾFLOCSS ɾITCSS ɾAtomic Design ɾ EDJO ɾECSS
10. 09 Review the OOCSS ͦͷଞʹ΋͍Ζ͍Ζɻ ͲΕΛબ΂͹͍͍ʁ
11. 10 Review the OOCSS େ੾ͳ͜ͱ ɾCSS ͷઃܭख๏͸େ·͔ͳϧʔϧΛఆٛͯ͘͠ΕΔ΋ͷɻ ɾઃܭͷ࣮ફʹ͸খ͞ͳܾఆ͕ͨ͘͞Μ͋Δɻ ɾCSS ʹ͸ආ͚Δ΂͖Ξϯνύλʔϯ͕͋Δɻ ɾCSS ͸ΞϯνύλʔϯͷੵΈॏͶͰഁ୼͢Δɻ ɾສೳͳઃܭख๏͸ͳ͍ͷͰ࠷దͳख๏Λબ୒͢Δඞཁ͕͋Δɻ
12. 11 Review the OOCSS Կ͔Β࢝ΊΕ͹͍͍ʁ
13. 12 Review the OOCSS ΞϯνύλʔϯΛආ͚ΔͨΊͷCSSઃܭͷݪ఺ͱ΋͍͑Δ OOCSS͔Βཧղ͢Δͷ͕ۙಓɻ
14. 13 Review the OOCSS ආ͚Δ΂͖CSS ʢΞϯνύλʔϯʣ 02
15. 14 Review the OOCSS ˞ࣗ෼͕طଘͷҊ݅ΛҾ͖ܧ͍ͩͱ͍͏૝ఆͰ ɹߟ͑ͯΈ͍ͯͩ͘͞ɻ
16. 15 Review the OOCSS Ξϯνύλʔϯ ᶃ IDηϨΫλΛ࢖͍͍͗ͯ͢Δ ᶄ ϕʔεελΠϧͷৄࡉ౓Λߴ͍ͯ͘͠Δ ᶅ ཁૉηϨΫλʹ۩ମత͗͢ΔελΠϧ
17. 16 Review the OOCSS Ξϯνύλʔϯ ⁞ IDηϨΫλΛ࢖͍͍͗ͯ͢Δ
18. 17 Review the OOCSS #main {} #main #content {} #main #content p {} #main #content ul {} #main #content ul li {} #main #content ul li a {} CSS
19. 18 Review the OOCSS IDηϨΫλ 2ͭͷࢦఆ͸Ҿ͖ܧ͕ͳ͍ͱ্ॻ͖Ͱ͖ͳ͍ɻ ηϨΫλ͕௕͍ͷͰݟ௨͠΋ѱ͍ɻ #main {} #main #content {} #main #content p {} #main #content ul {} #main #content ul li {} #main #content ul li a {} /* ௥Ճ */ #main #content .text {} CSS
20. 19 Review the OOCSS Ξϯνύλʔϯ   ϕʔεελΠϧͷৄࡉ౓Λߴ͍ͯ͘͠Δ
21. 20 Review the OOCSS Ͳ͕͜໰୊ͳͷ͔Θ͔Γ·͔͢ʁ <a href="#" class="link"> ϦϯΫ </a> a:link { color: red; } .link { color: blue; } CSS HTML
22. 21 Review the OOCSS a λάͷελΠϧΛΫϥε 1 ͭͰ্ॻ͖Ͱ͖ͳ͍ɻ <a href="#" class="link"> ϦϯΫ </a> a:link { color: red; } /* దԠ͞Εͳ͍ */ .link { color: blue; } CSS HTML
23. 22 Review the OOCSS /* * 0,0,0,1ʢཁૉηϨΫλʣ * 0,0,1,0ʢΫϥεηϨΫλʣ * 0,0,1,0ʢٖࣅΫϥεʣ */ /* 0,0,1,0 ʢٖࣅΫϥε
    + 0,0,0,1 ʢཁૉηϨΫλ
    */ a:link { color: red; } /* 0,0,1,0 ʢΫϥεηϨΫλ
    */ .link { color: blue; } CSS
24. 23 Review the OOCSS Ξϯνύλʔϯ ⁠ ཁૉηϨΫλʹ۩ମత͗͢ΔελΠϧ
25. 24 Review the OOCSS .content h2 { position: relative; margin-bottom: 25px; padding: 0.5em 0.8em; border-radius: 5px; color: #fff; font-size: 20px; font-weight: bold; background: crimson; } .content h2:after { content: ""; position: absolute; z-index: 1; bottom: -15px; left: 3em; margin-left: -15px; border: 15px solid transparent; border-top-color: crimson; border-bottom-width: 0; } CSS h2ݟग़͠
26. 25 Review the OOCSS CSS h2ݟग़͠ h2ݟग़͠ .content .heading { padding: 0.5em; border: 0; /* Ϧηοτ */ border-bottom: 1px solid; border-left: 6px solid; border-radius: 0; /* Ϧηοτ */ color: #000; background-color: #fff; /* ্ॻ͖ */ } .content .heading:after { content: none; /* Ϧηοτ */ }
27. 26 Review the OOCSS .content h2 ͷελΠϧ͕౰ͨͬͯ͠·͏ͷͰɺ ্ॻ͖΍Ϧηοτ͕ඞཁʹͳͬͯ͠·͏ʜ
28. 27 Review the OOCSS طଘͷCSSΛফͯ͠͠·͏ͱɺ ͲΜͳӨڹ͕ग़Δͷ͔Θ͔Βͳ͍͔Βফͤͳ͍ʜ
29. 28 Review the OOCSS ΞϯνύλʔϯΛ Ͱ͖Δ͚ͩආ͚Δ΂͖ !!
30. 29 Review the OOCSS σβΠϯΛ࣮ݱͰ͖Δ͚ͩͰ͸ॆ෼Ͱ͸ͳ͍ɻ ελΠϧͷมߋ΍௥ՃΛ໰୊ͳ͘Ͱ͖ΔΑ͏ʹ͢ΔͨΊʹɺ ʮCSSͷઃܭʯ͕ඞཁɻ
31. 30 Review the OOCSS OOCSSͷ֓ཁ 03
32. 31 Review the OOCSS OOCSSͱ͸ ɾϖʔδ୯ҐͰ͸ͳ͘ɺΦϒδΣΫτ ʢ෦඼ʣ ୯Ґɻ ɾখ͘͞࡞ͬͯ૊Έ߹ΘͤΔ͜ͱͰϖʔδΛ࡞Δ ʢLegos firstʣ ɻ ɾجຊతʹΫϥεηϨΫλ͚ͩΛ࢖͍ɺ ϚϧνΫϥεͰࢦఆ͍ͯ͘͠ ʢৄࡉ౓Λ௿͘อͭʣ ɻ ɾΞϯνύλʔϯΛආ͚ΔϕετϓϥΫςΟεͷ ٧Ί߹Θͤɻ
33. 32 Review the OOCSS ࢀߟϦϯΫ ɾstubbornella/oocss: Object Oriented CSS Framework ɾstubbornella/oocss-accessibility-guidelines: The accessibility guidelines used by the OOCSS open source project ɾObject Oriented CSS | SlideShare ɾWeb ੍࡞ऀͷͨΊͷ CSS ઃܭͷڭՊॻ
34. 33 Review the OOCSS ·ͣ͸͜ΕಡΜͰʂ
35. 34 Review the OOCSS 2009೥ɺ OOCSSͷఏএऀNicole Sullivan͸͜͏ޠ͍ͬͯΔɻ
36. 35 Review the OOCSS CSS͸յΕ΍͍͢ɻ࢝ΊΔ͜ͱ͸؆୯͚ͩͲɻ ϑΝΠϧαΠζ͸࣮֬ʹ૿͍͖͑ͯ·͢ɻ ͳͥͳΒɺ ίʔυͷ࠶ར༻͸΄ͱΜͲ͞Εͳ͍͔ΒͰ͢ɻ ΫϦʔϯͳίʔυΛյ͢͜ͱ͸؆୯Ͱ͢ɻ ࢝ΊΔ͜ͱ͕ॏཁͳͷͰ͸ͳ͘ɺΫϦʔϯʹอͪଓ͚Δ͜ͱ͕ॏཁͰ͢ɻ ΫϨόʔͳΦϒδΣΫτΛॻ͖·͠ΐ͏ ɻ͞΋ͳ͚Ε͹ɺϒϩοΫ΍ ϖʔδɺෳࡶͳίϯςϯπ͕૿͑Δ͝ͱʹίʔυ΋૿͑ଓ͚·͢ɻ ŠɹObject Oriented CSS
37. 36 Review the OOCSS OOCSSͷ2ͭͷݪଇ 04
38. 37 Review the OOCSS OOCSSͷ 2ͭͷݪଇ ᶃ ߏ଄ͱݟͨ໨Λ෼཭͢ΔʢSeparate Structure and Skinʣ ᶄ ίϯςφͱίϯςϯπΛ෼཭͢Δ ʢSeparate Container and Contentʣ
39. 38 Review the OOCSS OOCSSͷ2ͭͷݪଇ ⁞ ߏ଄ͱݟͨ໨Λ෼཭͢Δ ʢSeparate Structure and Skinʣ
40. 39 Review the OOCSS OOCSS͸ϚϧνΫϥεʢෳ਺ͷΫϥεΛࢦఆ͢Δ͜ͱʣ ͕લఏʹͳΔɻ ͦͯ͠ɺΫϥεͷ 1 ͭ 1 ͭʹ໾ׂΛ΋ͨͤͯ෼཭͢Δɻ ͜ͷ ʮ໾ׂ͕ΫϥεΛ෼͚Δཻ౓ͷ୯Ґʯ ʹͳΔɻ ໾ׂͷ1ͭʹʮߏ଄ͱݟͨ໨ʯ͕͋Δɻ
41. 40 Review the OOCSS ݟͨ໨͕ҧ͏ͷͰؾ͖ͮʹ͍͕͘ɺ3ͭͷϘλϯʹ͸ڞ௨͢Δ΋ͷ ͕͋Δɻ ͦΕ͸ʮߏ଄ʯ ɻ ৄ͘͠ݟΔ TOP΁ ૹ ৴
42. 41 Review the OOCSS
43. 42 Review the OOCSS
44. 43 Review the OOCSS .button { display: inline-block; padding: 0.75em; line-height: 1; text-align: center; text-decoration: none; } CSS ͦΕͧΕͷϘλϯΛ࡞ΔͨΊͷ ࠎ΍ے೑ʹͳ͍ͬͯΔཁૉΛ ʮߏ଄ʯ ͱݺͿɻ OOCSSͰ͸ ߏ଄ͱ͍͏໾ׂͰ෼཭͢Δɻ ࠓճ͸ .buttonͱ͍͏ΫϥεΛ࢖༻ɻ
45. 44 Review the OOCSS .button-top { color: #fff; background-color: blue; } .button-more { color: #fff; background-color: orange; } .button-send { color: #fff; background-color: red; } CSS ಛ௃తͩͬͨ৭͸ɺ ʮݟͨ໨ʯ ͱ͍͏ ໾ׂͰɺ ͦΕͧΕผͷΫϥε΁ɻ ߏ଄Λ୲౰͢ΔΫϥεͷ໊લΛ Ҿ͖ܧ͙ͱؔ܎ੑΛࣔ͢͜ͱ͕Ͱ͖Δɻ
46. 45 Review the OOCSS ίʔυྔ͸Ͳ͏ͳͬͨͷ͔ʁ
47. 46 Review the OOCSS 27ߦͩͬͨίʔυ͕ 19 ߦ ʢ໿ 30% μ΢ϯʣ ʹͳΓ·ͨ͠ʂ
48. 47 Review the OOCSS ϝϦοτ ɾόϦΤʔγϣϯ͕૿͑ͯ΋ɺ৭ͳͲͷ࠷খݶͷࢦఆ͚ͩͰ ࠶ݱ͕Ͱ͖ΔͷͰίʔυྔ͸؇΍͔ʹ͔͠૿͑ͳ͍ɻ ɾڞ௨͢Δߏ଄ʹมߋ͕͋ͬͯ΋1Օॴมߋ͢Δ͚ͩͰରԠՄೳɻ ɾ1ͭ 1ͭͷΫϥε͸খ͘͞ͳΔͷͰશମ૾Λ೺Ѳ͠΍͍͢ɻ
49. 48 Review the OOCSS σϝϦοτ ɾCSS ͸γϯϓϧʹอͯΔ൓໘ɺ HTMLʹෳ਺ͷΫϥεΛ ࢦఆ͢ΔͷͰෳࡶʹͳΔɻ ɾখ͞ͳύʔπ͕ଟ͘ͳΔͷͰɺ ελΠϧΨΠυΛͭͬͯ͘ ૊Έ߹ΘͤΔύλʔϯΛڞ༗͢Δඞཁ͕͋Δɻ ɾ૊Έ߹Θͤͯ΋ׯব͠߹Θͳ͍ΦϒδΣΫ τΛ࡞Δͷʹ Ұఆͷ εΩϧ͕ඞཁɻ
50. 49 Review the OOCSS ʮߏ଄ͱݟͨ໨ͷ෼཭ʯ ͷ·ͱΊ ɾߏ଄ͱݟͨ໨ͱ͍͏໾ׂͰΫϥεΛ෼཭͢Δɻ ɾΫϥεΛ૊Έ߹ΘͤΔ͜ͱͰϝϯςφϯεੑ্͕͕Γ ύϑΥʔϚϯεΛ޲্ͤ͞Δ͜ͱ΋Ͱ͖Δɻ ɾCSSͷ୅ΘΓʹHTML͕ෳࡶʹͳΔɻ ɾ૊Έ߹ΘͤΔͷΛิॿͰ͖Δ؀ڥ͕ඞཁɻ
51. 50 Review the OOCSS OOCSSͷ2ͭͷݪଇ   ίϯςφͱίϯςϯπΛ෼཭͢Δ ʢSeparate Container and Contentʣ
52. 51 Review the OOCSS ɾίϯςφͱ͸಺แ͢Δཁૉͷ͜ͱ ɾίϯςϯπͱ͸಺แ͞ΕΔཁૉͷ͜ͱ
53. 52 Review the OOCSS ྫ͑ΔͳΒɺ ίϯςφ͸ᷥɺ ίϯςϯπ͸ᷥͷதͷॻྨɻ container contents
54. 53 Review the OOCSS ίϯςϯπͱ͸ ϖʔδ಺ͷ಺༰ ʢίϯςϯπʣ ͷ͜ͱ ྫʣ ɾݟग़͠ ɾஈམ ɾϦετ ɾը૾ ɾϘλϯ ɾϥϕϧͳͲ
55. 54 Review the OOCSS ίϯςφͱ͸ ίϯςφͱ͸ίϯςϯπΛ಺แ͢Δཁૉͷ͜ͱͰɺ ྫ͑͹ϔομʔ΍ϑολʔͳͲͷڞ௨ΤϦΞ΍ຊจΛ ಺แ͢Δ .content ΍ .aricle ͷΑ͏ͳΤϦΞͷ͜ͱɻ
56. 55 Review the OOCSS ͳͥ ʮίϯςφͱίϯςϯπͷ෼཭ʯ Λ͢Δͷ͔ʁ
57. 56 Review the OOCSS ߏ଄ͱݟͨ໨ͷ෼཭͚ͩͰ͸ ࠶ར༻ੑΛ୲อͰ͖ͳ͍͔Βɻ
58. 57 Review the OOCSS ྫ͑ΔͳΒɺ ػೳతʹ͸σεΫτοϓύιίϯ͕͍͍͚Ͳɺ ࣋ͪา͖͍ͨͳΒɺϊʔτύιίϯͷ΄͏͕͍͍ɻ desktop pc note pc
59. 58 Review the OOCSS #articleͱ͍͏৔ॴʹґଘ͍ͯ͠ΔͷͰ࢖͍ճ͢͜ͱ͕Ͱ͖ͳ͍ɻ /* Bad */ #article .button {} #article .button-primary {} /* Good */ .button {} .button-primary {} CSS
60. 59 Review the OOCSS ཁૉηϨΫλΛࢦఆ͢Δ͜ͱ΋ཁૉͱ͍͏৔ॴʹ ґଘ͢Δ͜ͱʹͳΔɻ ྫ͑͹ɺ ҎԼͷࢦఆͰ͸h2ʹ͔͠దԠ͢Δ͜ͱ͕Ͱ͖ͳ͍ɻ /* Bad */ h2.heading {} /* Good */ .heading {} CSS
61. 60 Review the OOCSS ͭ·Γɺ ίϯςφͱίϯςϯπͷ෼཭ͱ͸ɺ ʮ৔ॴʹґଘ͠ͳ͍ηϨΫλΛॻ͘ʯ ͱ͍͏͜ͱɻ
62. 61 Review the OOCSS ΦϒδΣΫτͷ໾ׂͱ෼཭͢Δཻ౓ 05
63. 62 Review the OOCSS OOCSSʹ͸4ͭͷ໾ׂͷ෼͚ํ͕͋Δɻ ɾ ߏ଄ͱݟͨ໨ ɾ ίϯςφͱίϯςϯπ
64. 63 Review the OOCSS ໾ׂʹ͍ͭͯɺ΋͏গ͠ߟ͑ͯΈΑ͏ɻ
65. 64 Review the OOCSS ͜ͷΑ͏ͳίʔυΛݟͨ͜ͱ͸͋Γ·ͤΜ͔ʁ <div class="container"> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> </div> HTML
66. 65 Review the OOCSS BootstrapͷάϦουγεςϜͷίʔυʢҎ߱άϦου ΦϒδΣΫτͱݺͿʣ ɻ ͜Ε΋ίϯςφʹ͋ͨΔɻ <div class="container"> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> </div> HTML
67. 66 Review the OOCSS ͭ·Γɺίϯςφͱ͸ ɾ೚ҙͷΫϥεΛࢦఆ͢Δ͚ͩͰͲ͜Ͱ΋࢖͑Δɻ ɾϨΠΞ΢τΛ୲౰͢ΔΦϒδΣΫτɻ ɾ಺แ͢Δཁૉ͕ԿͰ͋ͬͯ΋ػೳ͢Δʢׯব͞Εͳ͍ʣ ɻ ͱݴ͍׵͑Δ͜ͱ΋Ͱ͖·͢ɻ
68. 67 Review the OOCSS άϦου͕ศརͳͷ͸ ίϯςφͱ͍͏໾ׂΛ͍࣋ͬͯΔ͔Βɻ ˞OOCSS Ͱ͸άϦουͷ࢖༻Λਪ঑͍ͯ͠Δɻ
69. 68 Review the OOCSS Ͱ΋ʜ
70. 69 Review the OOCSS άϦουΦϒδΣΫτ͕ศར͔ͩΒͱ͍ͬͯɺ ͲΜͳ৔໘Ͱ΋࢖͏ͷ͸ආ͚ͨ΄͏͕͍͍ɻ Ͱ΋ʜ
71. 70 Review the OOCSS άϦουΦϒδΣΫτͷ໾ׂ͸ ʢओʹʣ 12Ͱׂͬͨԣ෯Λ ֤ߦ ʢΧϥϜʣ ʹׂΓ౰ͯΔ͜ͱɻ Ұൠతʹ಺แ͢Δཁૉʹ͸ׯব͠ͳ͍ɻ
72. 71 Review the OOCSS ྫ͑͹ɺ εϚϗͰ͸ը૾ͱςΩετ͕ϒϩοΫ ʢॎʹฒͿʣ Ͱɺ λϒϨοτҎ߱͸50%ͣͭͷԣฒͼʹͳΔύλʔϯɻ
73. 72 Review the OOCSS ͜͜Ͱ͸.gridͱ.grid-cellͱ͍͏Ϋϥε໊ʹ͢Δɻ <div class="grid"> <div class="grid-cell grid-cell--md-6"> <img src="#" alt=""> </div> <div class="grid-cell grid-cell--md-6"> <h2> ݟग़͠ </h2> <p> ςΩετ </p> </div> </div> HTML
74. 73 Review the OOCSS ԣฒͼͷͱ͖ʹݟग़͠ͱ ը૾ͷ্ͷπϥΛ߹ΘͤͯΔͳɻ
75. 74 Review the OOCSS
76. 75 Review the OOCSS <div class="grid"> <div class="grid-cell grid-cell-md-6"> <img src="#" alt=""> </div> <div class="grid-cell grid-cell-md-6"> <h2> ݟग़͠ </h2> <p> ςΩετ </p> </div> </div> @media screen and (min-width: 768px) { .u-offset-top-md { /** * line-height ͕ 1.4 ͷ৔߹ : * (1.4 - 1) / 2 = 0.2em */ margin-top: -0.2em; } } HTML CSS
77. 76 Review the OOCSS ॎʹฒΜͰΔͱ͖ʹ ը૾ͱςΩετͷؒʹ༨ന͕ೖͬͯΔͳɻ
78. 77 Review the OOCSS
79. 78 Review the OOCSS <div class="grid"> <div class="grid-cell grid-cell-md-6 u-mb u-mb0-md"><!-- ௥Ճ -->
    <img src="#" alt=""> </div> <div class="grid-cell grid-cell-md-6"> <h2 class="u-offset-top-md"> ݟग़͠ </h2> <p> ςΩετ </p> </div> </div> .u-mb { margin-bottom: 0.5rem; } @media screen and (min-width: 768px) { .u-mb0-md { margin-bottom: 0; } } HTML CSS
80. 79 Review the OOCSS ຊ౰ʹ͜ΕͰ͍͍ͷʁ
81. 80 Review the OOCSS ൚༻త͚ͩͲɺͦΕ͸άϦουͱ͍͏໾ׂʹ͚ؔͯͩ͠ɻ ແཧ΍Γ࢖͓͏ͱ͢Δͱɺຊ౰ʹ൚༻త͔Θ͔Βͳ͍Α ͏ͳ൚༻Ϋϥε͕૿͍͚͑ͯͩ͘ɻ ϚʔΫΞοϓ΋ෳࡶʹʜɻ
82. 81 Review the OOCSS ΦϒδΣΫτ͸ ໾ׂΛ໌֬ʹখ͘͞
83. 82 Review the OOCSS OOCSSͰ͸ʮߏ଄ͱݟͨ໨ʯ΍ʮίϯςφͱίϯςϯπʯ Ͱ෼཭͢Δɻ ͭ·Γɺ ໾ׂ΍ػೳͰΦϒδΣΫτΛ෼͚ͯɺ ૊Έ߹Θͤͯ࢖͏ͱ͍͏͜ͱɻ ઌ΄Ͳͷྫ΋ɺ.gridͱ͍͏൚༻తͳΦϒδΣΫ τͰ͸ͳ͘ɺ ʮը૾ͱςΩετ͕εϚϗͰ͸ॎʹɺλϒϨοτҎ߱Ͱ͸ ԣʹฒͿʯ ͱ͍͏۩ମతͳΦϒδΣΫτͷ .block-gridΛ ࡞ͬͨ΄͏͕มߋ͠΍͍͢ɻ
84. 83 Review the OOCSS ΦϒδΣΫτͷ੍ݶΛఆٛ͢Δ
85. 84 Review the OOCSS ػೳʹ੍ݶΛ͔͚Δཧ༝ ɾແݶʹ֦ு͍ͯ͘͜͠ͱ͸Ͱ͖ͳ͍ɻ ɾ֦ு͢Δ͝ͱʹෳࡶ͕͞૿͢ͷͰ࣮૷͕೉͘͠ͳΔɻ ʮػೳͷෳࡶ͞ ʷ ػೳͷ਺ = ޻਺ʯʹ͸ͳΒͳ͍ɻ ɾ੍ݶΛ͔͚ͳ͚Ε͹ɺػೳ͚ͩͰͳ͘޻਺΋͔͔Γଓ͚Δɻ ɾόϦΤʔγϣϯ͕গͳ͍΄͏͕ӡ༻໘Ͱͷෛ୲͕গͳ͍ɻ
86. 85 Review the OOCSS ΋ͪΖΜ੍ݶ͢Ε͹͍͍ͱ͍͏Θ͚Ͱ͸ͳ͍ͷͰɺ σβΠφʔͱΤϯδχΞͷίϛϡχέʔγϣϯ͸ඞਢɻ ಛʹϨεϙϯγϒͰ͸ɺϒϨΠΫϙΠϯτͷؒΛ ૝૾͢Δ͜ͱ͸೉͍͠ͷͰɺ૬ஊ͠ͳ͕Β࡞͍ͬͯ͘ɻ
87. 86 Review the OOCSS ϏδϡΞϧσβΠϯͷҙਤɾ ҙຯΛ ίʔυʹ൓өͰ͖ͨΒɺ σβΠϯ΋ίʔυ΋ഁ୼͠ͳ͍ɻ
88. 87 Review the OOCSS ·ͱΊ 06
89. 88 Review the OOCSS ·ͱΊ ɾOOCSS͔ΒCSSͷΞϯνύλʔϯΛֶͿɻ ɾ2ͭͷݪଇΛ΋ͱʹΦϒδΣΫτͱͯ͠෼཭ɺ૊Έ߹ΘͤΔɻ ɾ໾ׂΛఆٛͯ͠ػೳΛݶఆͤ͞Δɻ ɾ໾ׂ͸໌֬ʹখ͘͞ɻ ɾσβΠφʔͱΤϯδχΞ͕Ұॹʹ࡞Γ্͛Δ͜ͱ͕ ຊ౰ͷσβΠϯ ʢઃܭʣ ɻ
90. 89 Review the OOCSS ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ slide writing : yasuda manabu slide design : nakajima eri