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

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. Α͏͢Δʹ

9. None

10. CSS = Cascading Style Sheets

11. ϢʔβʔΤʔδΣϯτɺ΢Σ ϒαΠτ੍࡞ऀɺϢʔβ͕ ͦΕͧΕఆٛͨ͠CSSͷ΋ ͨΒ͢ޮՌΛॏͶ߹ΘͤΔ ʢΧεέʔυ͢Δʣ͜ͱ͕ Ͱ͖Δ

12. ͭ·Γ

13. None

14. OOCSSͱ͔BEMͱ͔ ͦ͏͍͏ઃܭख๏͸શ෦ ͜ͷCSSͷ Ϋι࢓༷ ಛੑ ΛͲ͏੔ཧ͢Δ͔ ͱ͍͏࿩ͩͱࢥ͏

15. ͱ͍͏͜ͱͰ

16. ৄࡉ౓ΫΠζʙ

17. None

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. ͓͠·͍