CSSのidとclassの使い分け

CSSフレンズ　第一回「CSS再入門」 https://cssfriends.connpass.com/event/52444/

Transcript

1. $44ͷJEͱDMBTTͷ࢖͍෼͚ %BJTVLF
   ,0/*4)* ୈҰճʮ$44࠶ೖ໳ʯ
2. Daisuke KONISHI !TLE@OX ϚʔΫΞοϓΤϯδχΞ
4. $44ͷJEͱDMBTTͷ࢖͍෼͚ %BJTVLF
   ,0/*4)* ୈҰճʮ$44࠶ೖ໳ʯ
5. $44ॻ͍ͯ·͢ΑͶʁ .title {
 font-weight: 600;
 font-size: 24px;
 }
 .container {
 width: 1024px;
 margin-left: auto;
 margin-right: auto;
 } ηϨΫλ
6. $44ͷࢦఆ
7. Q. JEͱDMBTTͷ
   ͲͪΒΛ࢖͏΂͖͔
8. A. جຊDMBTT͚ͩͰ0,
9. 1. ࢖͍·Θ͠΍͍͢
10. #page-top .title { font-weight: 500; font-size: 24px; } #page-about .title { font-weight: 500; font-size: 24px; } .title { font-weight: 500; font-size: 24px; } #FUUFS
11. DMBTT໊͸෼͔Γ΍͍͢
 ໊લΛ෇͚Α͏
12. ϲ݄ޙͷ͋ͳ͕ͨٽ͔͘΋ .topContentHeaderLink {
 text-align: right; text-decoration: none;
 } .box1 { … }
 
 .box2 { … }
13. ະདྷͷ͋ͳ͕ͨͪΐͬͱসإ .link-more {
 text-align: right; text-decoration: none;
 } .main-contents { … }
 
 .category-box { … }
14. 2. ελΠϧͷ্ॻ͖͕
 ͠΍͍͢
15. .header h1 { … } .header .title { … }
 .title { … } <header class=“header” id=“header”>
 <h1 class=“title”>タイトル</h1>
 </header>
16. $44ʹ͸ৄࡉ౓͕͋Δ
17. ϙΠϯτͰදݱ͞ΕΔࣄ͕ଟ͍ IUUQRJJUBDPNPI@SVTUZ@OBJMJUFNTFDEFDB
18. ͨͱ͑͹͜͏ #header { … } /* 100点 */ .title { … } /* 10点 */ .list li a { … } /* 12点 */
19. ্ॻ͖͢Δʹ͸ͦΕҎ্ͷ఺਺͕ඞཁ .header h1 { … } /* 11点 */ .header .title { … } /* 20点 */ ◯
 .title { … } /* 10点 */ ☓ <header class=“header”>
 <h1 class=“title”>タイトル</h1>
 </header>
20. ͭ·Γʜ w ηϨΫλ͕ଟ͍ɾৄࡉ౓ͷߴ͍΋ͷ͕ ͋Δͱ্ॻ͖͕େม
    w DMBTTͷΈͷํ͕ߟ͑΍͍͢
21. ηϨΫλΛগͳ͘͢Δʹ͸ w ઃܭΛษڧ͢Δ
 00$44
    '-0$44
    #PPUTUSBQ
    ͳͲ
    w ໋໊نଇͰઓ͏
 #&.
22. Q. ͡Ό͋JE͸ʁ
23. A. w ϖʔδ಺ભҠ͢Δͱ͖ͷ໨ҹ
    w +BWB4DSJQUͰૢ࡞͢Δͱ͖ͷ໨ҹ
24. ·ͱΊ w ελΠϧͷࢦఆ͸DMBTTͰߦ͓͏
    w DMBTTͷΈͷํ্͕ॻ͖͠΍͍͢
    w ηϨΫλ͸গͳ͍ํ͕؅ཧ͠΍͍͢