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ͷJEͱDMBTTͷ࢖͍෼͚
    %BJTVLF,0/*4)*
    ୈҰճʮ$44࠶ೖ໳ʯ

    View Slide

  2. Daisuke KONISHI
    [email protected]
    ϚʔΫΞοϓΤϯδχΞ

    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. ϙΠϯτͰදݱ͞ΕΔࣄ͕ଟ͍
    [email protected]@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