Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSSのidとclassの使い分け

 CSSのidとclassの使い分け

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

Daisuke Konishi

April 16, 2017
Tweet

More Decks by Daisuke Konishi

Other Decks in Programming

Transcript

  1. $44ॻ͍ͯ·͢ΑͶʁ .title {
 font-weight: 600;
 font-size: 24px;
 }
 .container {


    width: 1024px;
 margin-left: auto;
 margin-right: auto;
 } ηϨΫλ
  2. #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
  3. .header h1 { … } .header .title { … }


    .title { … } <header class=“header” id=“header”>
 <h1 class=“title”>タイトル</h1>
 </header>
  4. ͨͱ͑͹͜͏ #header { … } /* 100点 */ .title {

    … } /* 10点 */ .list li a { … } /* 12点 */
  5. ্ॻ͖͢Δʹ͸ͦΕҎ্ͷ఺਺͕ඞཁ .header h1 { … } /* 11点 */ .header

    .title { … } /* 20点 */ ◯
 .title { … } /* 10点 */ ☓ <header class=“header”>
 <h1 class=“title”>タイトル</h1>
 </header>