CSSのidとclassの使い分け

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

Transcript

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

   View Slide

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

   View Slide

3. View Slide

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

   View Slide

5. $44ॻ͍ͯ·͢ΑͶʁ
   .title {

   font-weight: 600;

   font-size: 24px;

   }

   .container {

   width: 1024px;

   margin-left: auto;

   margin-right: auto;

   }
   ηϨΫλ
   

   View Slide

6. $44ͷࢦఆ
   

   View Slide

7. Q.
   JEͱDMBTTͷ
   ͲͪΒΛ࢖͏΂͖͔
   

   View Slide

8. A.
   جຊDMBTT͚ͩͰ0,
   

   View Slide

9. 1.
   ࢖͍·Θ͠΍͍͢
   

   View Slide

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
    

    View Slide

11. DMBTT໊͸෼͔Γ΍͍͢

    ໊લΛ෇͚Α͏
    

    View Slide

12. ϲ݄ޙͷ͋ͳ͕ͨٽ͔͘΋
    .topContentHeaderLink {

    text-align: right;
    text-decoration: none;

    }
    .box1 { … }

    

    .box2 { … }
    

    View Slide

13. ະདྷͷ͋ͳ͕ͨͪΐͬͱসإ
    .link-more {

    text-align: right;
    text-decoration: none;

    }
    .main-contents { … }

    

    .category-box { … }
    

    View Slide

14. 2.
    ελΠϧͷ্ॻ͖͕

    ͠΍͍͢
    

    View Slide

15. .header h1 { … }
    .header .title { … }

    .title { … }
    

    タイトル

    
    

    View Slide

16. $44ʹ͸ৄࡉ౓͕͋Δ
    

    View Slide

17. ϙΠϯτͰදݱ͞ΕΔࣄ͕ଟ͍
    IUUQRJJUBDPNPI@SVTUZ@OBJMJUFNTFDEFDB
    

    View Slide

18. ͨͱ͑͹͜͏
    #header { … } /* 100点 */
    .title { … } /* 10点 */
    .list li a { … } /* 12点 */
    

    View Slide

19. ্ॻ͖͢Δʹ͸ͦΕҎ্ͷ఺਺͕ඞཁ
    .header h1 { … } /* 11点 */
    .header .title { … } /* 20点 */ ◯

    .title { … } /* 10点 */ ☓
    

    タイトル

    
    

    View Slide

20. ͭ·Γʜ
    w ηϨΫλ͕ଟ͍ɾৄࡉ౓ͷߴ͍΋ͷ͕
    ͋Δͱ্ॻ͖͕େม
    w DMBTTͷΈͷํ͕ߟ͑΍͍͢
    

    View Slide

21. ηϨΫλΛগͳ͘͢Δʹ͸
    w ઃܭΛษڧ͢Δ

    00$44 '-0$44 #PPUTUSBQͳͲ
    w ໋໊نଇͰઓ͏

    #&.
    

    View Slide

22. Q.
    ͡Ό͋JE͸ʁ
    

    View Slide

23. A.
    w ϖʔδ಺ભҠ͢Δͱ͖ͷ໨ҹ
    w +BWB4DSJQUͰૢ࡞͢Δͱ͖ͷ໨ҹ
    

    View Slide

24. ·ͱΊ
    w ελΠϧͷࢦఆ͸DMBTTͰߦ͓͏
    w DMBTTͷΈͷํ্͕ॻ͖͠΍͍͢
    w ηϨΫλ͸গͳ͍ํ͕؅ཧ͠΍͍͢
    

    View Slide