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

Transcript

1. 1.

   ΋͏Ұ౓ CSSৄࡉ౓ͷ ࿩Λ͠Α͏ Edward Fox 2018/02/07 @media-team front-end LT session

2. 2.

   @edwardkenfox Edward Fox ɾΤϯδχΞ@Reproגࣜձࣾ ɾ୅ʑ໦ͷํ͔Βདྷ·ͨ͠ ɾRuby, JavaScript, AWS ɾϒϥ΢βٕज़શൠ, PWA,

   Vue.js
3. 3.

   ಥવͰ͕͢Έͳ͞Μ

4. 4.

   CSSͷৄࡉ౓ʹ͍ͭͯ

5. 5.

   ࣗ৴Λ΋ͬͯ෼͔Δͱ ݴ͑·͔͢ʁ

6. 6.

   ৄࡉ౓ #ͱ͸

7. 7.

   ͲͷϓϩύςΟ஋͕࠷΋ ͋Δཁૉʹؔ܎͕͋Γ ద༻͞ΕΔ͔Λ ϒϥ΢β͕ܾఆ͢Δखஈ ※MDNΑΓ

8. 8.

   Α͏͢Δʹ

9. 9.

   None
10. 10.

    CSS = Cascading Style Sheets

11. 11.

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

12. 12.

    ͭ·Γ

13. 13.

    None
14. 14.

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

15. 15.

    ͱ͍͏͜ͱͰ

16. 16.

    ৄࡉ౓ΫΠζʙ

17. 17.

    None
18. 18.

    ໰୊1 ੍ݶ࣌ؒ10ඵ

19. 19.

    // CSS #foo { color: red; } .bar { color:

    blue; } // HTML <p id="foo" class="bar">ࢲͷઓಆྗ͸530000Ͱ͢</p> A. ࢲͷઓಆྗ͸530000Ͱ͢ B. ࢲͷઓಆྗ͸530000Ͱ͢
20. 20.

    ਖ਼ղ͸…

21. 21.

    A

22. 22.

    // CSS #foo { color: red; } .bar { color:

    blue; } // HTML <p id="foo" class="bar">ࢲͷઓಆྗ͸530000Ͱ͢</p> ɾclassΑΓ΋idͷํ͕ৄࡉ౓͸্ ɾ΋͏ͪΐ͍ิ଍ॻ͘
23. 23.

    ໰୊2 ੍ݶ࣌ؒ15ඵ

24. 24.

    // CSS ul li { color: red; } #must-buy {

    color: blue; } // HTML <ul> <li id=“must-buy"> <span>͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔΜ͡Όͳ͍͔Ͷʁ</span> </li> </ul> A. ͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔ Μ͡Όͳ͍͔Ͷʁ B. ͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔ Μ͡Όͳ͍͔Ͷʁ
25. 25.

    ਖ਼ղ͸…

26. 26.

    B

27. 27.

    // CSS ul li { color: red; } #must-buy {

    color: blue; } // HTML <ul> <li id=“must-buy"> <span>͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔΜ͡Όͳ͍͔Ͷʁ</span> </li> </ul> ղઆ
28. 28.

    ໰୊3

29. 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. 30.

    ਖ਼ղ͸…

31. 31.

    B

32. 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. 33.

    ͱ͍͏͜ͱͰ

34. 34.

    ৄࡉ౓Λ࢖͍͜ͳ͠ ྑ͍CSSϥΠϑΛ

35. 35.

    ͓͠·͍