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

Transcript

1. ࠓ೔͔Β࢖͑Δ$44ύλʔϯ :V
   8BUBOBCF !ZVXC 
   /%4
   ௕Ԭ*5։ൃऀษڧձ ୈճษڧձ

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

   ɾɾɾͳͲΛ΍͍ͬͯ·͢ɻ

3. ຊ೔ͷςʔϚ $44 $BTDBEJOH
   4UZMF
   4IFFU ɾɾɾ$44޷͖Ͱ͔͢ʁ

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

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

6. ਓ͕ؒ$44Λॻ͓͘࢓ࣄ͸݈ࡏͰ͢ σβΠϯΧϯϓΛ΋Βͬͯը૾ΛεϥΠεɺ)5.-ͱ$44Λॻ͋͘Ε Ͱ͢ɻ ͜͜೥ͰαΠτҎ্΍Γ·ͨ͠ɻ ඼ ࣭ ͱ ࡞ ۀ ޮ

   ཰ Λ ͦΕͳΓʹ҆ఆͤ͞ΒΕΔΑ͏ʹͳͬͨ ͲΜͳΞϓϩʔνͰίʔσΟϯά͍ͯ͠Δ͔Λ͓࿩͠͠·͢

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

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

   ê

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

   { color: red; } .button-base{ border: solid 2px; color: white; … } .button-base .button-blue .button-base .button-green

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

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

    .mainVisual_pic .introduction .introduction_attention .linkList .sideMenu .sideMenu_item .sideDownload .sideDownload_attention .introduction_text

12. มߋʹڧ͍$44
     &$44 &OEVSJOH $44 ˙ ʮಉ͡هड़Λ܁Γฦ͠ॻ͍ͯ΋͍͍ʯͱஅݴ͢Δ࢟੎ʹײಈͨ͠ By Ben Frain http://ecss.io/

    … even at the cost of repetition, isolation can buy you greater advantages; $44ϑΝΠϧͷ෼ׂख๏ͳͲɺ༷ʑͳΞΠσΞʹݴٴ͍ͯ͠Δ͕ɺ

13. มߋʹڧ͍$44  &$44 &$44Λࢀߟʹيಓमਖ਼ ˙ ʮଞͷϖʔδʹࣅͨΑ͏ͳͷ͔͋ͬͨΒڞ௨෦෼͸·ͱΊͯɾɾɾʯ ͱߟ͑ΔͷΛ΍Ίͨɻ ˙ ෆཁʹͳͬͨͱ͖ʹ࡟আ͠΍͍͢ɻ この2つのボタン(Block)は、

    同じBlockのModifier（変化形） ではなく、 まったく別のBlockにした。 .commonButton ! .campaignButton .commonButton-download ! .downloadButton

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

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

    Ҋ݅Λ·͍ͨͩ࢖͍ճ͠΋Ͱ͖Δ ê

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

    IUUQTQYHSJEHJUIVCJPBJHJT ࢀߟ

17. &OKPZ
    $44
     &/%