今日から使えるCSSパターン
by
Yu Watanabe
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
ࠓ͔Β͑Δ$44ύλʔϯ :V8BUBOBCF !ZVXC /%4Ԭ*5։ൃऀษڧձ ୈճษڧձ
Slide 2
Slide 2 text
ࣗݾհ ඇৗۈΤϯδχΞʴϑϦʔϥϯε ˙ 41"ʴ"1*ʴ%#ͳ8FCαʔϏεͷ੍࡞ +BWB4DSJQU3FBDU /PEFKT3VCZ1)1 .Z42-/FPK3%' αʔόͷઃఆͱ͔ɾɾɾ ˙ )5.-ʴ$44ʴ+BWB4DSJQUͷίʔσΟϯά ɾɾɾͳͲΛ͍ͬͯ·͢ɻ
Slide 3
Slide 3 text
ຊͷςʔϚ $44 $BTDBEJOH4UZMF4IFFU ɾɾɾ$44͖Ͱ͔͢ʁ
Slide 4
Slide 4 text
ॻ͔ͣʹࡁ·ͤΔͱ͍͏Ξϓϩʔν $44ϑϨʔϜϫʔΫ ˙ ྫ͑#PPUTUSBQɾɾɾ CPPUTUSBQNJODTTɾɾɾLC ྫ͑ ۉʹׂͷΧϥϜ࡞Εͳ͍ ϑϨʔϜϫʔΫલఏͷσβΠϯ͕ඞཁ PSΧόʔͰ͖ͳ͍ͱ͜ΖࣗྗͰॻ͘
Slide 5
Slide 5 text
ॻ͔ͣʹࡁ·ͤΔͱ͍͏Ξϓϩʔν ࣗಈͰੜͰ͖ͳ͍ͷʁ ˙ ྫ͑"EPCF.VTFɾɾɾ ͜ΜͳͷΛඳ͍ͯΈͨΒߦ͍ۙ $44͕ੜ͞Εͨ ੜ͞Εͨ$44Λਓ͕ؒ͞ΘΔͷແཧͦ͏ɻ
Slide 6
Slide 6 text
ਓ͕ؒ$44Λॻ͓͘ࣄ݈ࡏͰ͢ σβΠϯΧϯϓΛΒͬͯը૾ΛεϥΠεɺ)5.-ͱ$44Λॻ͋͘Ε Ͱ͢ɻ ͜͜ͰαΠτҎ্Γ·ͨ͠ɻ ࣭ ͱ ࡞ ۀ ޮ Λ ͦΕͳΓʹ҆ఆͤ͞ΒΕΔΑ͏ʹͳͬͨ ͲΜͳΞϓϩʔνͰίʔσΟϯά͍ͯ͠Δ͔Λ͓͠͠·͢
Slide 7
Slide 7 text
$44ͷ৽͍͠ػೳΛऔΓೖΕΔ ˙ )5.-ʹແҙຯͳEJWΛ࡞ΒͣʹࡁΉ ˙ ০༻ͷը૾ͷΛݮΒͤΔ ͜Μͳͷɺ )5.-PMͱMJ͚ͩͰʂ $44ߦ͘Β͍ ඪ४༷ͱϒϥβͷ࣮ঢ়گΛ͋Δఔ͓ͬͯ͘ʂ
Slide 8
Slide 8 text
มߋʹڧ͍$44Λࢦ͢ ˙ ҰՕॴม͑ͨΒɺଞͷͱ͜Ζ่͕ΕͨʂɺͱͳΒͳ͍ ˙ ಡΈ͍͢ ʹΫϥε໊͔ΒͲͷ෦ͷίʔυ͔͔Δ ΫϥΠΞϯτ͕ޙ͔ΒՃमਖ਼Λߦ͏͜ͱ͕͋Δ ϲ݄ޙͷࣗଞਓͰ͋Δɾɾɾ શମΛ؏͘ʮઃܭํʯ͕ඞཁͳͷͰɺ ઌਓͷܙΛआΓ·͢ɻ ê
Slide 9
Slide 9 text
ઃܭํ r ͏·͍͔͘ͳ͔ͬͨέʔε 00$44తͳΞϓϩʔν ˙ ͋ΔఔҎ্ͷنʹͳΔͱɺ࡞ऀͰ͢ΒύʔπΛѲ͖͠Εͳ͍ɻ ˙ ͏·͍͚͘ඇৗʹٕతͳɺهड़ྔͷগͳ͍$44͕ΊΔͱࢥ͏͕ɺ ݱ࣮ͷΫϥΠΞϯτϫʔΫͰٻΊΒΕ͍ͯΔͷͱҧ͏ɻ .text-red { color: red; } .button-base{ border: solid 2px; color: white; … } .button-base .button-blue .button-base .button-green
Slide 10
Slide 10 text
ઃܭํ 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
Slide 11
Slide 11 text
มߋʹڧ͍$44 #&. ˙ ֤ϒϩοΫɺϒϩοΫ֎ͱΧεέʔσΟϯά͢Δ͜ͱ͕ͳ͘ૄ݁߹ ˙ ࠷ॳʹϒϩοΫׂΛߟ͑Δͱ࡞ۀྔ͕ݟੵΓ͍͢ .commonButton .commonButton--download .mainVisual .mainVisual_pic .introduction .introduction_attention .linkList .sideMenu .sideMenu_item .sideDownload .sideDownload_attention .introduction_text
Slide 12
Slide 12 text
มߋʹڧ͍$44 &$44 &OEVSJOH $44 ˙ ʮಉ͡هड़Λ܁Γฦ͠ॻ͍͍͍ͯʯͱஅݴ͢Δ࢟ʹײಈͨ͠ By Ben Frain http://ecss.io/ … even at the cost of repetition, isolation can buy you greater advantages; $44ϑΝΠϧͷׂख๏ͳͲɺ༷ʑͳΞΠσΞʹݴٴ͍ͯ͠Δ͕ɺ
Slide 13
Slide 13 text
มߋʹڧ͍$44 &$44 &$44Λࢀߟʹيಓमਖ਼ ˙ ʮଞͷϖʔδʹࣅͨΑ͏ͳͷ͔͋ͬͨΒڞ௨෦·ͱΊͯɾɾɾʯ ͱߟ͑ΔͷΛΊͨɻ ˙ ෆཁʹͳͬͨͱ͖ʹআ͍͢͠ɻ この2つのボタン(Block)は、 同じBlockのModifier(変化形) ではなく、 まったく別のBlockにした。 .commonButton ! .campaignButton .commonButton-download ! .downloadButton
Slide 14
Slide 14 text
සग़ύʔπͷ͍ճ͠ Α͘͏ʮϒϩοΫʯΛετοΫ ˙ ׂͨ͠ʮϒϩοΫʯಠཱ͍ͯ͠ΔͷͰɺͲ͜ʹͰຒΊࠐΊΔ ˙ ελΠϧΨΠυδΣωϨʔλΛར༻ͯ͠8FCϖʔδΛ࡞
Slide 15
Slide 15 text
·ͱΊ ˙ நύʔπΛΧεέʔυ͢ΔΞϓϩʔν͠ͳ͍ ˙ ಠཱͨ͠۩ϒϩοΫʹ͢Δ ˙ ॏෳͨ͠هड़ɺίʔυͷ૿Ճؾʹ͠ͳ͍ ˙ ٕతͰͳ͍͕ɺ҆ఆ࣭ͨ͠ʹͳΔ ˙ Ҋ݅Λ·͍͍ͨͩճ͠Ͱ͖Δ ê
Slide 16
Slide 16 text
˙ $44ઃܭख๏ #&.IUUQHFUCFNDPN '-0$$4IUUQTHJUIVCDPNIJMPLJGMPDTT 4."$$4IUUQTTNBDTTDPN ˙ ελΠϧΨΠυδΣωϨʔλ ,44IUUQXBSQTQJSFDPNLTT )PMPHSBNIUUQTUSVMJBHJUIVCJPIPMPHSBN BJHJT IUUQTQYHSJEHJUIVCJPBJHJT ࢀߟ
Slide 17
Slide 17 text
&OKPZ$44 &/%