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

今日から使えるCSSパターン

 今日から使えるCSSパターン

Yu Watanabe

June 17, 2017
Tweet

More Decks by Yu Watanabe

Other Decks in Programming

Transcript

  1. ࠓ೔͔Β࢖͑Δ$44ύλʔϯ
    :V8BUBOBCF !ZVXC

    /%4௕Ԭ*5։ൃऀษڧձ ୈճษڧձ

    View Slide

  2. ࣗݾ঺հ
    ඇৗۈΤϯδχΞʴϑϦʔϥϯε
    ˙ 41"ʴ"1*ʴ%#ͳ8FCαʔϏεͷ੍࡞
    +BWB4DSJQU3FBDU
    /PEFKT3VCZ1)1
    .Z42-/FPK3%'
    αʔόͷઃఆͱ͔ɾɾɾ
    ˙ )5.-ʴ$44ʴ+BWB4DSJQUͷίʔσΟϯά
    ɾɾɾͳͲΛ΍͍ͬͯ·͢ɻ

    View Slide

  3. ຊ೔ͷςʔϚ
    $44
    $BTDBEJOH4UZMF4IFFU
    ɾɾɾ$44޷͖Ͱ͔͢ʁ

    View Slide

  4. ॻ͔ͣʹࡁ·ͤΔͱ͍͏Ξϓϩʔν
    $44ϑϨʔϜϫʔΫ
    ˙ ྫ͑͹#PPUTUSBQɾɾɾ
    CPPUTUSBQNJODTTɾɾɾLC
    ྫ͑͹
    ۉ౳ʹ෼ׂͷΧϥϜ͸࡞Εͳ͍
    ϑϨʔϜϫʔΫલఏͷσβΠϯ͕ඞཁ PSΧόʔͰ͖ͳ͍ͱ͜Ζ͸ࣗྗͰॻ͘

    View Slide

  5. ॻ͔ͣʹࡁ·ͤΔͱ͍͏Ξϓϩʔν
    ࣗಈͰੜ੒Ͱ͖ͳ͍ͷʁ
    ˙ ྫ͑͹"EPCF.VTFɾɾɾ
    ͜ΜͳͷΛඳ͍ͯΈͨΒߦ͍ۙ
    $44͕ੜ੒͞Εͨ
    ੜ੒͞Εͨ$44Λਓ͕ؒ͞ΘΔͷ͸ແཧͦ͏ɻ

    View Slide

  6. ਓ͕ؒ$44Λॻ͓͘࢓ࣄ͸݈ࡏͰ͢
    σβΠϯΧϯϓΛ΋Βͬͯը૾ΛεϥΠεɺ)5.-ͱ$44Λॻ͋͘Ε
    Ͱ͢ɻ
    ͜͜೥ͰαΠτҎ্΍Γ·ͨ͠ɻ
    ඼ ࣭ ͱ ࡞ ۀ ޮ ཰ Λ
    ͦΕͳΓʹ҆ఆͤ͞ΒΕΔΑ͏ʹͳͬͨ
    ͲΜͳΞϓϩʔνͰίʔσΟϯά͍ͯ͠Δ͔Λ͓࿩͠͠·͢

    View Slide

  7. $44ͷ৽͍͠ػೳΛऔΓೖΕΔ
    ˙ )5.-ʹແҙຯͳEJWΛ࡞ΒͣʹࡁΉ
    ˙ ૷০༻ͷը૾ͷΛݮΒͤΔ
    ͜Μͳͷ΋ɺ
    )5.-͸PMͱMJ͚ͩͰʂ
    $44͸ߦ͘Β͍
    ඪ४࢓༷ͱϒϥ΢βͷ࣮૷ঢ়گΛ͋Δఔ౓௥͓ͬͯ͘ʂ

    View Slide

  8. มߋʹڧ͍$44Λ໨ࢦ͢
    ˙ ҰՕॴม͑ͨΒɺଞͷͱ͜Ζ่͕ΕͨʂɺͱͳΒͳ͍
    ˙ ಡΈ΍͍͢
    ʹΫϥε໊͔ΒͲͷ෦෼ͷίʔυ͔෼͔Δ
    ΫϥΠΞϯτ͕ޙ͔Β௥Ճ΍मਖ਼Λߦ͏͜ͱ͕͋Δ
    ϲ݄ޙͷࣗ෼͸ଞਓͰ͋Δɾɾɾ
    શମΛ؏͘ʮઃܭํ਑ʯ͕ඞཁͳͷͰɺ
    ઌਓͷ஌ܙΛआΓ·͢ɻ
    ê

    View Slide

  9. ઃܭํ਑ r ͏·͍͔͘ͳ͔ͬͨέʔε
    00$44తͳΞϓϩʔν
    ˙ ͋Δఔ౓Ҏ্ͷن໛ʹͳΔͱɺ࡞ऀͰ͢ΒύʔπΛ೺Ѳ͖͠Εͳ͍ɻ
    ˙ ͏·͍͚͘͹ඇৗʹٕ޼తͳɺهड़ྔͷগͳ͍$44͕૊ΊΔͱࢥ͏͕ɺ
    ݱ࣮ͷΫϥΠΞϯτϫʔΫͰٻΊΒΕ͍ͯΔ΋ͷͱ͸ҧ͏ɻ
    .text-red {
    color: red;
    }
    .button-base{
    border: solid 2px;
    color: white;

    }
    .button-base .button-blue
    .button-base .button-green

    View Slide

  10. ઃܭํ਑ r #&.
    #&.r #MPDL &MFNFOU .PEJGJFS
    ˙ গ͠ϧʔϧΛΏΔΊͯɺऔΓೖΕ͍ͯΔ .JOE#&.EJOH
    Block
    Element Modifier
    Element
    http://getbem.com/
    ύʔπΛϒϩοΫ୯ҐͰ෼ׂɻ
    ٖࣅతͳ໊લۭ͕ؒͰ͖Δɻ
    ϒϩοΫ֎͔ΒΧεέʔυ͢Δ͜ͱ͸͠ͳ͍ɻ
    .itemBox
    .itemBox_thumbnail
    .itemBox_title
    .tabMenu
    .tabMenu_item
    .tabMenu_item—active

    View Slide

  11. มߋʹڧ͍$44 #&.
    ˙ ֤ϒϩοΫ͸ɺϒϩοΫ֎ͱΧεέʔσΟϯά͢Δ͜ͱ͕ͳ͘ૄ݁߹
    ˙ ࠷ॳʹϒϩοΫ෼ׂΛߟ͑Δͱ࡞ۀྔ͕ݟੵ΋Γ΍͍͢
    .commonButton
    .commonButton--download
    .mainVisual
    .mainVisual_pic
    .introduction
    .introduction_attention
    .linkList
    .sideMenu
    .sideMenu_item
    .sideDownload
    .sideDownload_attention
    .introduction_text

    View Slide

  12. มߋʹڧ͍$44 &$44
    &OEVSJOH $44
    ˙ ʮಉ͡هड़Λ܁Γฦ͠ॻ͍ͯ΋͍͍ʯͱஅݴ͢Δ࢟੎ʹײಈͨ͠
    By Ben Frain
    http://ecss.io/
    … even at the cost of repetition,
    isolation can buy you greater advantages;
    $44ϑΝΠϧͷ෼ׂख๏ͳͲɺ༷ʑͳΞΠσΞʹݴٴ͍ͯ͠Δ͕ɺ

    View Slide

  13. มߋʹڧ͍$44 &$44
    &$44Λࢀߟʹيಓमਖ਼
    ˙ ʮଞͷϖʔδʹࣅͨΑ͏ͳͷ͔͋ͬͨΒڞ௨෦෼͸·ͱΊͯɾɾɾʯ
    ͱߟ͑ΔͷΛ΍Ίͨɻ
    ˙ ෆཁʹͳͬͨͱ͖ʹ࡟আ͠΍͍͢ɻ
    この2つのボタン(Block)は、
    同じBlockのModifier(変化形)
    ではなく、
    まったく別のBlockにした。
    .commonButton
    !
    .campaignButton
    .commonButton-download
    !
    .downloadButton

    View Slide

  14. සग़ύʔπͷ࢖͍ճ͠
    Α͘࢖͏ʮϒϩοΫʯΛετοΫ
    ˙ ෼ׂͨ͠ʮϒϩοΫʯ͸ಠཱ͍ͯ͠ΔͷͰɺͲ͜ʹͰ΋ຒΊࠐΊΔ
    ˙ ελΠϧΨΠυδΣωϨʔλΛར༻ͯ͠8FCϖʔδΛ࡞੒

    View Slide

  15. ·ͱΊ
    ˙ ந৅ύʔπΛΧεέʔυ͢ΔΞϓϩʔν͸͠ͳ͍
    ˙ ಠཱͨ͠۩৅ϒϩοΫʹ෼཭͢Δ
    ˙ ॏෳͨ͠هड़΍ɺίʔυͷ૿Ճ͸ؾʹ͠ͳ͍
    ˙ ٕ޼తͰ͸ͳ͍͕ɺ҆ఆͨ͠඼࣭ʹͳΔ
    ˙ Ҋ݅Λ·͍ͨͩ࢖͍ճ͠΋Ͱ͖Δ
    ê

    View Slide

  16. ˙ $44ઃܭख๏
    #&.IUUQHFUCFNDPN
    '-0$$4IUUQTHJUIVCDPNIJMPLJGMPDTT
    4."$$4IUUQTTNBDTTDPN
    ˙ ελΠϧΨΠυδΣωϨʔλ
    ,44IUUQXBSQTQJSFDPNLTT
    )PMPHSBNIUUQTUSVMJBHJUIVCJPIPMPHSBN
    BJHJT IUUQTQYHSJEHJUIVCJPBJHJT
    ࢀߟ

    View Slide

  17. &OKPZ$44
    &/%

    View Slide