CSSのidとclassの使い分け

Transcript

1. $44ͷJEͱDMBTTͷ࢖͍෼͚ %BJTVLF
   ,0/*4)* ୈҰճʮ$44࠶ೖ໳ʯ

2. Daisuke KONISHI !TLE@OX ϚʔΫΞοϓΤϯδχΞ

3. None

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 ηϨΫλ͸গͳ͍ํ͕؅ཧ͠΍͍͢