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

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

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

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

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

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

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

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

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

ઃܭํ਑ 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 

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

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

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

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

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

˙ $44ઃܭख๏ #&.

IUUQHFUCFNDPN '-0$$4

IUUQTHJUIVCDPNIJMPLJGMPDTT 4."$$4

IUUQTTNBDTTDPN ˙ ελΠϧΨΠυδΣωϨʔλ ,44

IUUQXBSQTQJSFDPNLTT )PMPHSBN

IUUQTUSVMJBHJUIVCJPIPMPHSBN BJHJT IUUQTQYHSJEHJUIVCJPBJHJT ࢀߟ 

&OKPZ
$44
 &/%