CSSのidとclassの使い分け

 CSSのidとclassの使い分け

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

F703b996b502414dd880bc39789faa8f?s=128

Daisuke Konishi

April 16, 2017
Tweet

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