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

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