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

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

E17a9c4bc784b9c8feb85864e99bdb5c?s=128

Yu Watanabe

June 17, 2017
Tweet

Transcript

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

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

    ɾɾɾͳͲΛ΍͍ͬͯ·͢ɻ
  3. ຊ೔ͷςʔϚ $44 $BTDBEJOH4UZMF4IFFU ɾɾɾ$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$$4IUUQTHJUIVCDPNIJMPLJGMPDTT 4."$$4IUUQTTNBDTTDPN ˙ ελΠϧΨΠυδΣωϨʔλ ,44IUUQXBSQTQJSFDPNLTT )PMPHSBNIUUQTUSVMJBHJUIVCJPIPMPHSBN BJHJT

    IUUQTQYHSJEHJUIVCJPBJHJT ࢀߟ
  17. &OKPZ$44 &/%