もういちどCSS詳細度の話をしよう

2017/02/07 Repro Media Team LT Session

Transcript

1. ΋͏Ұ౓ CSSৄࡉ౓ͷ ࿩Λ͠Α͏ Edward Fox 2018/02/07 @media-team front-end LT session
2. @edwardkenfox Edward Fox ɾΤϯδχΞ@Reproגࣜձࣾ ɾ୅ʑ໦ͷํ͔Βདྷ·ͨ͠ ɾRuby, JavaScript, AWS ɾϒϥ΢βٕज़શൠ, PWA, Vue.js
3. ಥવͰ͕͢Έͳ͞Μ
4. CSSͷৄࡉ౓ʹ͍ͭͯ
5. ࣗ৴Λ΋ͬͯ෼͔Δͱ ݴ͑·͔͢ʁ
6. ৄࡉ౓ #ͱ͸
7. ͲͷϓϩύςΟ஋͕࠷΋ ͋Δཁૉʹؔ܎͕͋Γ ద༻͞ΕΔ͔Λ ϒϥ΢β͕ܾఆ͢Δखஈ ※MDNΑΓ
8. Α͏͢Δʹ
10. CSS = Cascading Style Sheets
11. ϢʔβʔΤʔδΣϯτɺ΢Σ ϒαΠτ੍࡞ऀɺϢʔβ͕ ͦΕͧΕఆٛͨ͠CSSͷ΋ ͨΒ͢ޮՌΛॏͶ߹ΘͤΔ ʢΧεέʔυ͢Δʣ͜ͱ͕ Ͱ͖Δ
12. ͭ·Γ
14. OOCSSͱ͔BEMͱ͔ ͦ͏͍͏ઃܭख๏͸શ෦ ͜ͷCSSͷ Ϋι࢓༷ ಛੑ ΛͲ͏੔ཧ͢Δ͔ ͱ͍͏࿩ͩͱࢥ͏
15. ͱ͍͏͜ͱͰ
16. ৄࡉ౓ΫΠζʙ
18. ໰୊1 ੍ݶ࣌ؒ10ඵ
19. // CSS #foo { color: red; } .bar { color: blue; } // HTML <p id="foo" class="bar">ࢲͷઓಆྗ͸530000Ͱ͢</p> A. ࢲͷઓಆྗ͸530000Ͱ͢ B. ࢲͷઓಆྗ͸530000Ͱ͢
20. ਖ਼ղ͸…
21. A
22. // CSS #foo { color: red; } .bar { color: blue; } // HTML <p id="foo" class="bar">ࢲͷઓಆྗ͸530000Ͱ͢</p> ɾclassΑΓ΋idͷํ͕ৄࡉ౓͸্ ɾ΋͏ͪΐ͍ิ଍ॻ͘
23. ໰୊2 ੍ݶ࣌ؒ15ඵ
24. // CSS ul li { color: red; } #must-buy { color: blue; } // HTML <ul> <li id=“must-buy"> <span>͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔΜ͡Όͳ͍͔Ͷʁ</span> </li> </ul> A. ͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔ Μ͡Όͳ͍͔Ͷʁ B. ͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔ Μ͡Όͳ͍͔Ͷʁ
25. ਖ਼ղ͸…
26. B
27. // CSS ul li { color: red; } #must-buy { color: blue; } // HTML <ul> <li id=“must-buy"> <span>͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔΜ͡Όͳ͍͔Ͷʁ</span> </li> </ul> ղઆ
28. ໰୊3
29. // CSS ul.shopping-list li .highlight { color: red; } ul.shopping-list li .highlight:nth-of-type(odd) { color: blue; } // HTML <ul class="shopping-list"> <li><span class=“highlight">͟Θɾɾɾ</span></li> </ul> A. ͟Θɾɾɾ B. ͟Θɾɾɾ
30. ਖ਼ղ͸…
31. B
32. // CSS ul.shopping-list li .highlight { color: red; } ul.shopping-list li .highlight:nth-of-type(odd) { color: blue; } // HTML <ul class="shopping-list"> <li><span class=“highlight">͟Θɾɾɾ</span></li> </ul> B. ͟Θɾɾɾ ղઆ
33. ͱ͍͏͜ͱͰ
34. ৄࡉ౓Λ࢖͍͜ͳ͠ ྑ͍CSSϥΠϑΛ
35. ͓͠·͍