あのモジュールこのコンポーネントそのブロック

あのモジュールこのコンポーネントそのブロック ߴ௡ށ૖!5BLB[VEP

͸͡Ίʹ w Ϟδϡʔϧͱ͔ίϯϙʔωϯτͱ͔  ϒϩοΫͱ͔ݴ͏͡Όͳ͍ w ͦΕͬͯͳΜͰ͔͢Ͳ͏ߟ͑Ε͹Α͍Ͱ͔͢ w )5.- $44తʹ w
ͱ͍͏ͷΛ࿩͠·͢

ࣗݾ঺հ w ߴ௡ށ૖!5BLB[VEP w גࣜձࣾϐΫηϧάϦου w ϑϩϯτΤϯυΤϯδχΞ w 8FCσβΠφʔͷͨΊͷK2VFSZೖ໳

ίϯϙʔωϯτԽͱ͸ w ͱΓ͋͑ͣɺجຊίϯϙʔωϯτͬͯݺͿ͜ͱʹ͢Δ w ϓϩάϥϜͰ͸औΓཱͯͯಛผͳ֓೦Ͱ͸ͳ͍

$44ʹ͓͚ΔίϯϙʔωϯτԽ w ͳͥඞཁʁ w $44͸શ͕ͯάϩʔόϧ w ࣗ෼ͷॻ͍ͨηϨΫλ͕Ͳ͜ʹӨڹΛٴ΅͔͢Θ͔Βͳ͍ w Ͳ͔͜ʹॻ͔ΕͨηϨΫλ͕ࣗ෼ͷॻ͘)5.-ʹ  Ͳ͏ӨڹΛ͓Α΅͔͢Θ͔Βͳ͍
w ͳΜͰ͔஌Βͳ͍͚ͲԶͷॻ͘TQBOʹ͸શ෦NBSHJO͕͍ͭͯΔ w ஍ࠈͩʂ

$44ઃܭʹ͓͚Δ  ίϯϙʔωϯτԽͬͯͲΜͳͷʁ w ·ͣͦ͏͍͏໰୊৭ʑ͋Δ͔ΒɺͲ͏)5.- $44Λॻ͚ ͹͍͍Ͱ͔͢Ͷ͍ͬͯ͏ͷ͕$44ઃܭͱݺ͹ΕΔ΋ͷ w ͜͏͍͏ߟ͑Ͱॻ͍ͨΒ͍͍Μ͡Όͳ͍Ͱ͔͢Ͷͱ  ߟ͑ํ΍ίʔυઃܭํ๏Λ·ͱΊͨͷ͕$44ઃܭํ๏࿦ w
༗໊ͳ$44ઃܭํ๏࿦Ͱ͋Δ  00$44 #&.Λ؆୯ʹ঺հ

00$44  0CKFDU0SJFOUFE$44

0$444ͬͯʁ w 0CKFDU0SJFOUFE$44 w ϖʔδ͸Ϩΰͷू·Γͩ w ·ͣ͸Ϩΰʢ.PEVMFʣΛ࡞Ε w ϨΰΛ૊Έ߹ΘͤͯϖʔδΛ࡞Ε w
ͦ͏͢Ε͹ࣅͨΑ͏ͳ$44ೋ౓ͱॻ͔ͳͯ͘ࡁΉͧ w ͦͨ͠Βແବ͕ແ͘ͳΔͷͰ$44ͷ༰ྔΊͪΌͪ͘Ό΁Δͧ

ϕʔεͱεΩϯ w όϦΤʔγϣϯͷ͋Δ6*ʹ͸ϕʔεͱεΩϯͷ֓೦Λ࢖͑ w ΦϒδΣΫτࢦ޲ϓϩάϥϛϯάͷ  ܧঝΛώϯτʹͯ͠Δͧ

#PPUTUSBQͷྫ

#MPDL&MFNFOU

.PEJpFS w ϖʔδ͸#MPDLͷू·Γ w ϒϩοΫ͸&MFNFOUͷू·Γ w มԽͷόϦΤʔγϣϯ͸.PEJpFS

<section class="column"> <h3 class="column__head">About BEM</h3> <div class="column__body"> <p class="column__p">The quick
brown...</p> <p class="column__p">The quick brown...</p> </div> </section> .column { ... } .column__head { ... } .column__body { ... } .column__p { ... }

͜͏ͯ͠$44ઃܭʹ͸ ฏ࿨͕๚Εͨ w ΈΜͳͰίϯϙʔωϯτԽͷํ๏ڞ༗Ͱ͖ͯϋοϐʔͩͶ w ΋͸΍#&.ͱ͔σϑΝΫτελϯμʔυͱ΋ݴ͑Δ΄Ͳ ʹྲྀߦͬͨ͠Ͷ w ͔͠͠

ফ͑ͳ͍೰Έ w ίϯϙʔωϯτͷ໊લ w ίϯϙʔωϯτͷཻ౓ w Զͷߟ͑Δ#MPDL͸͜͏ͳΜ͚ͩͲ  ͍͋ͭͷߟ͑Δ#MPDL͸͜͏ͳΜͩΑͳʙ

ίϯϙʔωϯτͷ໊લ column? introBlock?

ίϯϙʔωϯτͷཻ౓ w ͜Ε͸&MFNFOUʹ͢Δͷ͔ʁ#MPDLʹ͢Δͷ͔ʁ w ͦͷDPMVNOɺDPMVNOͱQBSBHSBQI͡Όͳ͍ͷʁ

ߟ͑ํͷώϯτ w"UPNJD%FTJHO w&OEVSJOH$44

"UPNJD%FTJHO

ͦΕ͸Կʁ w #SBE'SPTUஶ w ͦ΋ͦ΋·ͣϖʔδΛ࡞͍ͬͯΔͱ͍͏ೝࣝΛվΊΔඞཁ͕͋Δ w σβΠϯγεςϜΛ࡞ΓɺϖʔδΛ࡞Δͱ͍͏ྲྀΕ w σβΠϯγεςϜΛҙࣝ͠ɺӡ༻͢Δ͜ͱͰ৭ʑϋοϐʔʹͳΔ w
ͳΜͱͯ͠Ͱ΋σβΠϯγεςϜΛ࡞Δ΂͠ w σβΠϯγεςϜ͸ྑ͍ͧσβΠϯγεςϜ͸ྑ͍ͧ w ͱ͍͏Α͏ͳઃܭํ๏࿦ʹ͍ͭͯॻ͔Εͨ΋ͷ

"UPNJD%FTJHOͷڭ͑ w ࡉ෦͔Β࢝ΊͯશମΛߟ͑ɺͦͯ͠·ͨࡉ෦Λݟ௚ͤ w ͜Ε͸σβΠϯͷϝϯλϧϞσϧͷ࿩ w ͦ͏΍ͬͯσβΠϯγεςϜΛ࡞Δ w શߦఔͷڞ௨ݴޠͱͳΔίϯϙʔωϯτͷηοτΛ w
σβΠϯͷҰ؏ੑΛอͯ

Ͳ͏΍ͬͯͦΕΛ࣮ݱ͢Δʁ w ΫϥΠΞϯτΛઆಘͤΑ w ͦ͏͍͏ྲྀΕ͕ϕετͰ͋Δͱ͍͏͜ͱΛೲಘͤ͞Α w ۩ମతʹ͸͜͏͍͏ϦχϡʔΞϧͷఏҊํ๏͕͋Δͧ w ͦ΋ͦ΋ϫʔΫϑϩʔ͕޻ఔ͝ͱʹ  அઈ͞Εͨ΢Υʔλʔϑϩʔͩͱແཧͩ
w ͱ͍͏Α͏ͳ࿩͕৭ʑॻ͍ͯ͋Δ

͜Ε͸$44ઃܭํ๏࿦ʁ w /0ɻϫʔΫϑϩʔ΍ମ੍΋ؚΊͨ޿͍είʔϓͷߟ͑ w $44ઃܭʹ͓͍ͯ·ͰͦΕΛ  ؏ప͢΂͠ͱ͍͏͜ͱͰ͸ͳ͍ w σβΠϯγεςϜͷॏཁ͞ͱ  ͦΕΛ࣮ݱ͢ΔͨΊͷํ๏Λղઆͨ͠΋ͷ w
σβΠϯγεςϜ࣮ݱͷՁ஋͸ߴ͍͕  ҡ࣋ͱӡ༻͸େมͰ͋Δ͜ͱ΋ॻ͔Ε͍ͯΔ

"UPNJD%FTJHO  ΛಡΜͰ͜͏ࢥͬͨ w Զ͕ߟ͑Δίϯϙʔωϯτ͸͜Εɺ  ͓લ͕ߟ͑Δίϯϙʔωϯτ͸͜Ε w ͦͷࠩΛຒΊΔʹ͸ɺ·ͣϫʔΫϑϩʔͱͯͦ͠͏͍͏ί ϯϙʔωϯτΛڞ௨ݴޠͱ͢ΔΑ͏ͳମ੍͕ඞཁ w ͍͘Β)5.-
$44ͷஈ֊Ͱؤுͬͯ6*Λ੔ཧͨͬͯ͠׬શ ͳίϯϙʔωϯτͷηοτΛ࡞Γ্͛Δͷ͸ແཧͩ w ͳͥͳΒͦΕΑΓલͷஈ֊Ͱͦ͏ߟ͑ΒΕ͍ͯͳ͍͔Β

&OEVSJOH$44 &$44

ͦΕ͸Կʁ w #FO'SBJOஶ w ௕͘ӡ༻Ͱ͖Δ͜ͱʹॏ͖Λ͓͍ͨ$44ઃܭํ๏࿦ w ίϯϙʔωϯτͷந৅ԽΛආ͚Δ w ෼཭͠ɺ͍ͭͰ΋ࣺͯΒΕΔ͜ͱΛॏཁͱߟ͑Δ

͜͜Ͱݴ͏ந৅Խͱ͸ w ؆୯ʹݴ͏ͱɺ0$444తͳΞϓϩʔνͷ͜ͱ w ͭͷ)5.- $44తίϯϙʔωϯτΛ  ଟ༷ͳίϯςΩετͷ΋ͱͰ࢖͏Α͏ઃܭ͢Δ͜ͱ

ந৅ԽΛආ͚Δͱ͸ w ࣅͨΑ͏ͳ6*ύʔπ͕ొ৔ͯ͠΋  ผͷػೳͷதͰ࢖ΘΕΔͷͰ͋Ε͹ͦΕ͸ผ෺ w ಉ͡Α͏ͳݟӫ͑Ͱ΋ͦΕͧΕͷ  ίϯϙʔωϯτ಺ʹ$44Λॻ͘ʢྫϘλϯʣ w ؆୯ʹݴ͑͹ɺػೳຖͷ·ͱ·ΓͰ  େ͖ΊʹίϯϙʔωϯτΛ੾Δ

෼཭ʹॏ͖Λஔ͘ w ͳʹͦΕඇޮ཰͡Όͳ͍ʁ w ͍΍ɺͳΜͰ΋͔ΜͰ΋࢖͍·Θͦ͏ͱ͢Δ͔Βഁ୼͢Δͷͩ w ແݶʹϞσΟϑΝΠΞ͕૿͑ΔͩΖ͏ w Ұ౓ॻ͍ͨ$44͸ೋ౓ͱมߋ͢Δ͜ͱ͕Ͱ͖ͳ͍ͩΖ͏ w
ಉ͡$44Λίϐϖͨ͠ͱ͜ΖͰH[JQ͢ΓΌେͯ͠༰ྔมΘΒΜ w ػೳ͝ͱ$44͕·ͱ·͍ͬͯͨΒɺͦͷػೳ͕ͳ͘ͳͬͨ࣌ɺ֘౰Օॴͷ ίʔυΛ·Δ͝ͱࣺͯΔ͜ͱ͕Ͱ͖Δ w ٯʹݴ͑͹ɺ͜ͷΑ͏ʹ͠ͳ͚Ε͹$44͸ೋ౓ͱফ͢͜ͱ͕Ͱ͖ͳ͍

໊લۭؒ

w ը૾΍+BWB4DSJQUͳͲͷΞηοτ΋໊લۭؒ͝ͱʹ·ͱΊΔ /* ڞ௨ common modules */ .cmn-Header { ...
} .cmn-Footer { ... } .cmn-SideAd { ... } /* τοϓϖʔδ topPage modules */ .tp-MainVisual { ... } .tp-Carousel { ... } .tp-NewsList { ... } /* ঎඼ৄࡉ productDetail modules */ .pd-ItemDescription { ... } .pd-ItemMainPhoto { ... } .pd-Carousel { ... } /* γϣοϐϯάΧʔτ shoppingCart modules */ .sc-ItemList { ... } .sc-UserInfo { ... }

w ࣗ෼͸ಉ͡ˍࣅͨݟӫ͑ͷ6*ΛಉҰͷίϯϙʔωϯτͱ͠ ͯ·ͱΊ͋͛Δ͜ͱ͕ৗʹϕετͰ͋Δͱߟ͍͑ͯͨ w ͔ͦ͠͠Ε͸Ұͭͷઃܭͷܗʹա͗ͳ͔ͬͨ w ୭͕ͲͷΑ͏ʹӡ༻͍͔ͯ͘͠ʹΑΓ࠷దͳઃܭ͸ҟͳΔ w ٻΊΔ΋ͷʹΑΓऔΔ΂͖$44ઃܭͷํ๏͸ҟͳͬͨ &$44ΛಡΜͰ͜͏ࢥͬͨ

"UPNJD%FTJHOతΞϓϩʔν ΛऔΓೖΕΔ΂͖͔ʁ w ͦΕ͸࣮ݱՄೳ͔  ӡ༻͢Δମ੍͸͋Δ͔  ੍࡞ͷϑϩʔʹཱͪೖΔ͜ͱ͸Մೳ͔ w ͦΕ͸ඞཁ͔  )5.- $44ͷϨΠϠʔʹ͓͍ͯ΋పఈ͢Δ͔ 
εϐʔσΟʔʹಉछͷϖʔδΛల։͢Δඞཁ͕͋Δ͔ w ྫେ͖ͳاۀͷαΠτ

)5.- $44ͷςϯϓϨʔτ ͸͋͘·Ͱதؒ੒Ռ෺ w ޙ޻ఔʹ͓͍ͯ)5.-͸Ͳ͏ѻΘΕΔ͔ w ςϯϓϨʔτΛ࡞ͬͯऴΘΓͰ͸ແ͍ w ྫ&$ͷύοέʔδ w
ྫ8FCΞϓϦέʔγϣϯ w ྫ$.4

TDPQFEͳ$44 w $44JO+4ɺ$44.PEVMFT w #&.΍&$44ͷίϯϙʔωϯτʹελΠϧΛ  ด͡ࠐΊΔΞϓϩʔν w &$44ͱઃܭͷࢥ૝͸ࣅ͍ͯΔ  ໋໊نଇͰ࣮ݱ͢Δ͔πʔϧͰ࣮ݱ͢Δ͔

࠷ޙʹ w 4PMWFZPVSPXOQSPCMFNT &$44 w $44ઃܭ͸σβΠϯΧϯϓͱ  ίʔυΛோΊ͍ͯͯ΋ղܾ͠ͳ͍ w શମͷྲྀΕͷதͰ$44ઃܭΛͲ͏͢΂͖͔Λߟ͑Δ

0CKFDU0SJFOUFE$44 IUUQTXXXTMJEFTIBSFOFUTUVCCPSOFMMBPCKFDUPSJFOUFEDTT #PPUTUSBQ$PNQPOFOUT IUUQHFUCPPUTUSBQDPNDPNQPOFOUT #&. IUUQTFOCFNJOGP "UPNJD%FTJHO IUUQBUPNJDEFTJHOCSBEGSPTUDPN &OEVSJOH$44 IUUQFDTTJP

あのモジュールこのコンポーネントそのブロック

あのモジュールこのコンポーネントそのブロック

More Decks by Takeshi Takatsudo

Other Decks in Programming

Featured

Transcript