KSSで作るパターンライブラリ

,44Ͱ࡞ΔύλʔϯϥΠϒϥϦ
େࡕ1N%

View Slide

େࡕͷօ͞Μ͜Μʹͪ͸
w ொా఩ฏʢ·ͪͩͯͬ΃͍ʣͱਃ͠·͢
w ߹ಉձࣾϑΟϤϧυͱ͍͏ձࣾʹ͍·͢
w 5XJUUFSΞΧ΢ϯτ͸!NBDIJEB
w ීஈ͸σβΠφʔͱͯ͠3BJMTΛ࢖ͬͯαʔϏεΛ։ൃ͢ΔνʔϜʹ
ೖͬͯ·͢

View Slide

ා࿩
w ා͍࿩͕࿩ແྉͰಡΊΔ
w εϚϗɺ1$ͰಡΊΔ
w ϗϥʔອը΋ແྉͰಡΊΔ
w ΞϓϦɺ8FC͔ΒಡΊΔ
w 3VCZPO3BJMTͰ։ൃ
w ͘͢͝ා͍
͜Θ͹ͳ
ʮ͜Θ͹ͳʯͰݕࡧʂ

View Slide

OPNVOFM
w ϑΟϤϧυΠϯλʔϯͰ3BJMT
΍ͬͯͨ
w ݱࡏಸྑࡏॅ
w 3BJMT͕৮ΕΔब৬ઌืू
w ҰਓͰαʔϏεΛ࡞ͬͨܦݧ΋
͋Γ
ͷΉͶΔ ٻ৬த

View Slide

౦ژͷ1%͔Βདྷ·ͨ͠

View Slide

1%ͬͯ͜Μͳײ͡

View Slide

w ݄ೋճ։࠵ʢגࣜձࣾHBSCT༷ɺגࣜձࣾສ༿༷ʣ
w ΤϯδχΞ͸΄΅3VCZJTU
w σβΠφʔ͕΍Γ͍ͨ͜ͱΛݴ͏ͱɺ࠷దͳΤϯδχΞͱϖΞʹ͠
ͯɺ΍Γ͍ͨ͜ͱΛڭ͑ͯ͘ΕΔ
w ऴΘͬͨ͋ͱ͸͍ͭ΋ͷళͰ͓ञΛҿΜͰ·͢
w ҙ֎ͱ೥ྸ૚ߴΊ
w σβΠφ཰্ঢத
w ւ࿝୔͞Μͷ൵ئͰ͋ͬͨঁࢠ཰΋্ঢத
1%ͬͯ͜Μͳײ͡

View Slide

w ݄ೋճ։࠵ʢגࣜձࣾHBSCT༷ɺגࣜձࣾສ༿༷ʣ
w ΤϯδχΞ͸΄΅3VCZJTU
w σβΠφʔ͕΍Γ͍ͨ͜ͱΛݴ͏ͱɺ࠷దͳΤϯδχΞͱϖΞʹ͠
ͯɺ΍Γ͍ͨ͜ͱΛڭ͑ͯ͘ΕΔ
w ऴΘͬͨ͋ͱ͸͍ͭ΋ͷళͰ͓ञΛҿΜͰ·͢
w ҙ֎ͱ೥ྸ૚ߴΊ
w σβΠφ཰্ঢத
w ւ࿝୔͞Μͷ൵ئͰ͋ͬͨঁࢠ཰΋্ঢத
1%ͬͯ͜Μͳײ͡
౦ژʹ͓ӽ͠ͷࡍ͸༡ͼʹདྷ͍ͯͩ͘͞

View Slide

࠷ۙͷ։ൃελΠϧ
͓଴ͨͤ͠·ͨ͠ɺຊ୊Ͱ͢ɻ

View Slide

։ൃνʔϜ
ΤϯδχΞ
σβΠφʔ
Ճೖ

View Slide

w σβΠφʔ΋ϩʔΧϧʹ؀ڥΛͭ͘Δ
w σβΠφʔ΋όʔδϣϯ؅ཧʹೖΔ
w σβΠφʔ΋Ұॹʹ࢓༷ʢ໰୊ͷղܾखஈʣΛߟ͑Δ

View Slide

ϓϩτλΠϓ
ϑΟʔυόοΫ
࣍ͷετʔϦʔ΁
܁Γฦ͢
ϦϦʔε
໰୊͸ղܾ͞Εͨʁ
ϦϦʔε0,ʁ
໰୊Λݟ͚ͭΔ
܁Γฦ͢

View Slide

ϓϩτλΠϓ
ϑΟʔυόοΫ
࣍ͷετʔϦʔ΁
܁Γฦ͢
ϦϦʔε
ϦϦʔε0,ʁ
໰୊Λݟ͚ͭΔ
܁Γฦ͢
σβΠφʔ͕νʔϜʹೖΔϝϦοτ
w )5.-΍$44΍ը૾ϑΝΠϧΛ[JQͰϑΝΠϧΛ౉͞ΕͯɺͦΕΛγ
εςϜʹ૊ΈࠐΉख͕ؒͳ͘ͳͬͨʢมߋͷࠩ෼͕Θ͔Βͳͯ͘ࢮ
͵͜ͱ͕ͳ͘ͳΔʣ
w σβΠϯͰղܾ͢΂͖໰୊ΛσβΠφʔ͕ݟ͚ͭΔ
w σβΠφʔ΋࢓༷ɺߏ଄Λཧղ͍ͯ͠ΔͷͰ࿩͕ૣ͍ʢ.5(΍࿈བྷ
͕ݮΔʣ

View Slide

ϓϩτλΠϓ
ϑΟʔυόοΫ
࣍ͷετʔϦʔ΁
܁Γฦ͢
ϦϦʔε
ϦϦʔε0,ʁ
໰୊Λݟ͚ͭΔ
܁Γฦ͢
σβΠφʔʹ΋ϝϦοτ
w ࣮ࡍʹಈ͘΋ͷΛ৮ͬͯ։ൃΛ͍ͯ͠ΔͷͰɺҙਤͱҧ͍ͬͯͨಈ
͖ʹ͙͢ؾ͚ͮΔ
w ࣮σʔλʢ·ͨ͸ͦΕʹ͍ۙ΋ͷʣ͕ೖͬͨঢ়ଶͷ΋ͷΛݟͳ͕Β
։ൃͰ͖ΔͷͰɺ࣮ࡍʹՔಇͨ͠ͱ͖ͱΠϝʔδ͕ҧͬͯͨɺͱ͍
͏͜ͱ͸ى͖ʹ͍͘
w ࢓༷ɺߏ଄Λཧղ͍ͯ͠ΔͷͰ֬ೝ͢Δ͜ͱ͕গͳ͍ʢ.5(΍࣭໰
͕ݮΔʣ

View Slide

ϓϩτλΠϓ
ϑΟʔυόοΫ
࣍ͷετʔϦʔ΁
܁Γฦ͢
ϦϦʔε
ϦϦʔε0,ʁ
໰୊Λݟ͚ͭΔ
܁Γฦ͢
σβΠϯʂ
σβΠϯʂ
σβΠϯʂ
σβΠϯʂ

View Slide

ϓϩτλΠϓ
ϑΟʔυόοΫ
࣍ͷετʔϦʔ΁
܁Γฦ͢
ϦϦʔε
ϦϦʔε0,ʁ
໰୊Λݟ͚ͭΔ
܁Γฦ͢
[JQೲ඼ʜ

View Slide

ϓϩτλΠϓ
ϑΟʔυόοΫ
࣍ͷετʔϦʔ΁
܁Γฦ͢
ϦϦʔε
ϦϦʔε0,ʁ
໰୊Λݟ͚ͭΔ
܁Γฦ͢
[JQೲ඼ʜ
͸ɺաڈͷ࿩

View Slide

ϓϩτλΠϓ
ϑΟʔυόοΫ
࣍ͷετʔϦʔ΁
܁Γฦ͢
ϦϦʔε
ϦϦʔε0,ʁ
໰୊Λݟ͚ͭΔ
܁Γฦ͢
[JQೲ඼ʜ
͜ΕͰϋοϐʔΤϯυ͔ͱࢥ͍͖΍ʜ

View Slide

5XJUUFS#PPUTUSBQͷొ৔

View Slide

ΤϯδχΞ
$44Λॻ͔ͳͯ͘΋σβΠϯ
͕ೖΔʂ
ศར͗ͯ͢Ϡό͍ΜͰ͚͢Ͳ

View Slide


View Slide

ΤϯδχΞͷؒͰେώοτʂ

View Slide

ΤϯδχΞ
$44Λॻ͔ͳͯ͘΋σβΠϯ͕ೖΕΒ
ΕΔʂ
ͪΐͬͱ͜Εɺศར͗ͯ͢Ϡό͍ΜͰ
͚͢Ͳʂ

View Slide

ΤϯδχΞ
ΕΔʂ
͚͢Ͳʂ
ΤϯδχΞ͸ؾ෇͍ͨ

View Slide

ΤϯδχΞ
ΕΔʂ
͚͢Ͳʂ
w 5XJUUFS#PPUTUSBQతͳ΋ͷΛϓϩδΣΫ
τͰ༻ҙ͢Ε͹ɺ͋Δఔ౓͸σβΠφʔ
ແ͠ͰϓϩτλΠϓ͕࡞ΕΔͷͰ͸ʁ

View Slide

ΤϯδχΞ
ΕΔʂ
͚͢Ͳʂ
ϓϩτλΠϓ
ϑΟʔυόοΫ
࣍ͷετʔϦʔ΁
ϦϦʔε
໰୊Λݟ͚ͭΔ
܁Γฦ͢

View Slide

ΤϯδχΞ
ΕΔʂ
͚͢Ͳʂ
ϓϩτλΠϓ
ϑΟʔυόοΫ
࣍ͷετʔϦʔ΁
ϦϦʔε
໰୊Λݟ͚ͭΔ
ߴ଎Խ

View Slide

ΤϯδχΞ
ΕΔʂ
͚͢Ͳʂ
5XJUUFS#PPUTUSBQతͳ
΍ͭ࡞ͬͯΑ

View Slide

ΤϯδχΞ
ΕΔʂ
͚͢Ͳʂ
͓ɺ͓͏ʜ
5XJUUFS#PPUTUSBQతͳ
΍ͭ࡞ͬͯΑ

View Slide

#PPUTUSBQతͳ΋ͷͱ͸ʁ
w ͲͷϖʔδͰ࢖ͬͯ΋ɺݟຊ௨Γʹ΍Ε͹ͦͷݟͨ໨͕࠶ݱ͞ΕΔ
΋ͷʢ$44Λॻ͘ඞཁ͕ͳ͍ʣ
w ଞͷϖʔδͰग़͖ͯͨύʔπ΍ɺΑ͋͘Δύʔπ͕͋Β͔͡Ίݟຊ
ʹ༻ҙ͞Ε͍ͯΔ΋ͷ
w ࢖͍ํ΍ҙਤʹ͍ͭͯͷઆ໌͕ͪΌΜͱݟຊʹॻ͔Ε͍ͯΔ΋ͷ

View Slide

΋ͷʢ$44Λॻ͘ඞཁ͕ͳ͍ʣ
ݟຊʢύλʔϯϥΠϒϥϦʣ͕͋Δ͜ͱ͕ඞཁ

View Slide

w ݟຊʹ͋Δ௨ΓʹϚʔΫΞοϓΛͯ͠DMBTTΛ෇͚Δͱɺͦͷݟͨ໨
͕࠶ݱ͞ΕΔ΋ͷ
΋ͷʢ$44Λॻ͖଍͢ඞཁ͕ͳ͍ʣ
ݟຊʢύλʔϯϥΠϒϥϦʣ͕͋Δ͜ͱ͕ඞཁ

View Slide

w ݟຊʹ͋Δ௨ΓʹϚʔΫΞοϓΛͯ͠DMBTTΛ෇͚Δͱɺͦͷݟͨ໨
͕࠶ݱ͞ΕΔ΋ͷ
΋ͷ
w ࢖͍ํ͕ͪΐͬͱ೉͍͠ͱ͖͸આ໌͕ͪΌΜͱݟຊʹॻ͔Ε͍ͯΔ
΋ͷ
ݟຊˠύλʔϯϥΠϒϥϦ
ελΠϧΨΠυͱύλʔϯϥΠϒϥϦ
w ελΠϧΨΠυͱ͍͏ͱɺϚʔΫΞοϓͷن໿ͱɺσβΠϯͷύλ
ʔϯͷϥΠϒϥϦΛҰͭʹͨ͠΋ͷʢ(JUIVCͳͲʣͱɺΞʔΫΞο
ϓͷن໿͚ͩͷ΋ͷʢ(PPHMFͳͲʣͷೋछྨ͕͋ͬͯɺͲͬͪΛࢦ
ͯ͠Δ͔࿩͕΍΍͘͜͠ͳΔͷͰɺ͜ͷεϥΠυͰ͸ɺΞʔΫΞο
ϓͷن໿ΛʮελΠϧΨΠυʯɺσβΠϯͷύλʔϯͷϥΠϒϥϦ
ΛʮύλʔϯϥΠϒϥϦʯͱݺΜͰ͍·͢
w ࠓճ͸ʮ5XJUUFS#PPUTUSBQΈ͍ͨʹ$44Λॻ͔ͣʹσβΠϯΛೖΕ
͍ͨʂʯͱ͍͏ΤϯδχΞ͔Βͷཁ๬ʹ౴͑Δͷ͕ςʔϚͳͷͰɺ
ύλʔϯϥΠϒϥϦʹ࿩Λߜͬͯ·͢

View Slide

୳ͨ͠Β݁ߏ͋ͬͨύλʔϯϥΠϒϥϦ

View Slide

https://github.com/styleguide/css
(JUIVC

View Slide

http://www.starbucks.com/static/reference/styleguide/
ελʔόοΫε

View Slide

http://getbootstrap.com/css/
5XJUUFS#PPUTUSBQ

View Slide

https://github.com/vincelane/disqus-style
%*4264

View Slide

http://foundation.zurb.com/docs/
'PVOEBUJPO

View Slide

http://showcase.nuxeo.com/nuxeo/styleGuide/
OVYFP

View Slide

ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ

View Slide

http://jacobrask.github.io/styledocco/
4UZMF%PDDP
w /PEFKT
w 4BTTɺ-FTTɺ4UZMVTʹରԠ
w ݁ߏ࢖ΘΕͯΔ

View Slide

http://kaleistyleguide.com/
,BMFJ4UZMFHVJEF
w #BDLCPOFKT
w 5XJUUFS#PPUTUSBQͬΆ͍ݟͨ໨
w 3BJMTͷ(FN͋Γ
w $44ɺ-&44ରԠ
w 4BTT͸ະରԠ

View Slide

http://kaleistyleguide.com/
,BMFJ4UZMFHVJEF
w #BDLCPOFKT
w 5XJUUFS#PPUTUSBQͬΆ͍ݟͨ໨
w 3BJMTͷ(FN͋Γ
w $44ɺ-&44͸ࡁΈɺ4BTT͸ະର
Ԡ
4BTTରԠʹ৆ۚ͋Γ
͜͜ʹ͍ΔΤϯδχΞͷ͔ͨɺ
͜ͷλεΫ୭͔΍ͬͯʂ

View Slide

http://pea.rs/
1FBST
w ύλʔϯϥΠϒϥϦΛ࡞ΔͨΊ
ͷ8PSE1SFTTͷςʔϚ

View Slide

https://github.com/adactio/Pattern-Primer
1BUUFSO1SJNFS
w 1)1൛ɺ/PEFKT൛ɺ3VCZ൛
ʢ4JOBUSBʣɺ+FLZMM൛͕͋Δ

View Slide

http://warpspire.com/kss/
,44
w $44ɺ4$44ɺ-&44Ͱ࢖͑Δ
w 4UZMF%PDDPͷର߅
w (JUIVCͷਓ͕࡞ͬͨ
w ݟͨ໨͸(JUIVCͷ4UZMF(VJEFͱ
ಉ͡
w 3BJMT༻ͷ(FN͋Γ
w FYBNQMF͸4JOBUSBͰಈ͘

View Slide

,44
w $44ɺ4$44ɺ-&44Ͱ࢖͑Δ
w 4UZMF%PDDPͷର߅
ಉ͡
w 3BJMT༻ͷ(FN͋Γ
3VCZʹ༏ͦ͠͏ͳͷͰ,44͕Α͛͞
˞ொాʹͱͬͯ͸

View Slide

,44ͱ͸ʁ

View Slide

,44ͱ͸ʁ
,44ͷ࢖͍ํ͸
ຊՈͷϖʔδʹ͋Γ·͢

View Slide

,44ͱ͸ʁ
,44ͷྫͱ͍͑͹
(JUIVC

View Slide


View Slide

w ߲໨͝ͱʹ൪߸͕෇͍ͯΔ

View Slide

w ͦΕͧΕͷ߲໨ͷதͷύʔ
πʹ΋൪߸͕෇͍ͯΔ
w ɺɺʜͱɺ൪߸
ॱʹύʔπͷαϯϓϧ͕ฒ
ΜͰΔ

View Slide

ύʔπͷ൪߸

View Slide

ύʔπͷઆ໌

View Slide

ύʔπͷݟͨ໨

View Slide

ύʔπͷόϦΤʔγϣϯ

View Slide

ύʔπͷϚʔΫΞοϓ

View Slide

ύʔπͷϚʔΫΞοϓ
ʜͱ͍͏΋ͷΛ࡞Δπʔϧ͕,44

View Slide

,44
w $44ɺ4$44ɺ-&44Ͱ࢖͑Δ
w 4UZMF%PDDPͷର߅
ಉ͡
w 3BJMT༻ͷ(FN͋Γ
,44ͷ೿ੜ͕ͨ͘͞Μ͋ͬͨ
w IUUQTHJUIVCDPNEFXTLJLTTSBJMT
w IUUQTHJUIVCDPNULHSVOULTT
w IUUQTHJUIVCDPNTPFOLFTDIOPPSHSVOULTT
w IUUQTHJUIVCDPNTDBOJODLTTQIQ
w IUUQTHJUIVCDPNNBESLTTNBLF
w IUUQTHJUIVCDPN%BSFQNJEEMFNBOLTT
w IUUQTHJUIVCDPNTNUNJEEMFNBOLTT

View Slide

http://nadarei.co/nkss-rails/
,44ͷ೿ੜͷҰͭ
/,44/BEBSFJ,44
w /BEBSFJͱ͍͏ձ͕ࣾΧελϚΠ
ζͨ͠,44
w WJFX͕)BNMରԠ
w 3BJMT༻͔͠ͳ͍
w αϯϓϧ͕4BTT4ZOUBY
w ݟͨ໨͕͓͠ΌΕ

View Slide

,44ͷ೿ੜͷҰͭ
/,44/BEBSFJ,44
w /BEBSFJͱ͍͏ձ͕ࣾΧελϚΠ
ζͨ͠,44
w WJFX͕)BNMରԠ
w 3BJMT༻͔͠ͳ͍
w ݟͨ໨͕͓͠ΌΕ

View Slide

/,44/BEBSFJ,44
w /BEBSFJͱ͍͏ձ͕ࣾ࡞ͬͨ,44
w WJFX͕)BNMରԠ
w 3BJMTͷ(FNͷΈ
w ݟͨ໨͕͓͠ΌΕ
/,44ɺ܅ʹܾΊͨʂ
,44ͷ೿ੜͷҰͭ

View Slide

/,44/BEBSFJ,44
w WJFX͕)BNMରԠ
w 3BJMTͷ(FNͷΈ
w ݟͨ໨͕͓͠ΌΕ
ொా͸͜ΕʹܾΊ·ͨ͠ʂ
ௐࢠʹ৐ͬͯ
ίϯτϦϏϡοͨ

View Slide

/,44/BEBSFJ,44
w WJFX͕)BNMରԠ
w 3BJMTͷ(FNͷΈ
w ݟͨ໨͕͓͠ΌΕ
ίϯτϦϏϡοͨ
͜ͷબ୒͕ࢥΘ͵མͱ݀ͩ͠ͱ஌Βͣʹʜ

View Slide

/,44/BEBSFJ,44
w WJFX͕)BNMରԠ
w 3BJMTͷ(FNͷΈ
w ݟͨ໨͕͓͠ΌΕ
ίϯτϦϏϡοͨ
w ෆ۩߹΍,44ʹ͸࣮૷͞ΕͯΔͷʹɺ/,44ʹ͸ͳ͍ػೳ͕͋ͬͨΓ
ͳͲɺࠓ೔ͷൃද͕ة͏͍ঢ়گʹʢࡢ೔ͷ࿩ʣ
w ٸᬎϑΟϤϧυͷΤϯδχΞͷۨܗ͞Μʹख఻ͬͯ΋Βͬͯ௚ͨ͠
Γɺػೳ௥Ճͨ͠Γ
w ΋͸΍ผ෺ʹͳ͖ͬͯͨͷͰɺGKPSEOLTTSBJMTͱͯ͠ެ։͠Α͏͔
ͳ

View Slide

/,44/BEBSFJ,44
w WJFX͕)BNMରԠ
w 3BJMTͷ(FNͷΈ
w ݟͨ໨͕͓͠ΌΕ
ίϯτϦϏϡοͨ
w ෆ۩߹΍,44ʹ͸࣮૷͞ΕͯΔͷʹɺ/,44ʹ͸ͳ͍ػೳ͕͋ͬͨΓ
ͳͲɺࠓ೔ͷൃද͕ة͏͍ঢ়گʹʢࡢ೔ͷ࿩ʣ
w ٸᬎϑΟϤϧυͷΤϯδχΞͷۨܗ͞Μʹख఻ͬͯ΋Βͬͯ௚ͨ͠
Γɺػೳ௥Ճͨ͠Γ
w ΋͸΍ผ෺ʹͳ͖ͬͯͨͷͰɺGKPSEOLTTSBJMTͱͯ͠ެ։͠Α͏͔
ͳ
ۙ͘ʹΤϯδχΞ͕͍Δͬͯૉ੖Β͍͠

View Slide

/,44/BEBSFJ,44
w WJFX͕)BNMରԠ
w 3BJMTͷ(FNͷΈ
w ݟͨ໨͕͓͠ΌΕ
ίϯτϦϏϡοͨ
gem 'nkss-rails', :git => '[email protected]:machida/nkss-rails.git',
:branch => "fjord-nkss-rails"
मਖ਼ͨ͠ͷ͸ͪ͜Β

View Slide

ύλʔϯϥΠϒϥϦΛ࡞Δ

View Slide

·ͣ͸ྫͱͯ͠৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
ʢπʔϧʹΑͬͯগͣͭ͠࡞Γํ͕ҟͳΓ·͕͢ɺ,44ܥͩͬͨΒେମಉ͡ʣ

View Slide

·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
৭ͷ΋Ζ΋ΖΛॻ͍ͨ
4BTTϑΝΠϧ
@DPMPSTDTTTBTT
Λ࡞ͬͨ

View Slide

͜͜ʹ
,44ಠࣗͷઆ໌ॻ͖Λૠೖ

View Slide

৭ͷϧʔϧ

CMBDLɺCMVFɺHSFFOɺPSBOHFɺZFMMPXɺSFEɺXIJUFͷม਺Λ༻ҙɻ
CPY\৭໊^Ͱഎܠ৭͕෇͖·͢ɻ
৭͸IUUQqBUVJDPMPSTDPN͔Β௖͍ͯ·͢ɻ

OPOF

4UZMFHVJEF
,44ಠࣗͷઆ໌ॻ͖ͱ͸ίϨ

View Slide

৭ͷϧʔϧ


OPOF

4UZMFHVJEF
ίϝϯτΞ΢τ

View Slide

৭ͷϧʔϧ


OPOF

4UZMFHVJEF
ϚʔΫμ΢ϯͰઆ໌Λॻ͘

View Slide

৭ͷϧʔϧ


OPOF

4UZMFHVJEF
͋ͱͰઆ໌͠·͢

View Slide

৭ͷϧʔϧ


OPOF

4UZMFHVJEF
4UZMFHVJEFʴ൪߸Λ෇͚Δ

View Slide

ॻ͖଍ͨ͠

View Slide

͍ͭͮͯɺઌ΄ͲͷελΠϧ
ΛݟͤΔͨΊͷαϯϓϧͷ
WJFXΛ࡞੒

View Slide

IUNMIBNMͱ͍͏໊લ
Λ෇͚Δ

View Slide

Ͳͷ4BTTͷαϯϓϧͳͷ͔Λ
4BTTϑΝΠϧʹ෇͚ͨ൪߸Ͱ
ࢦఆ͢Δɻ
4BTTϑΝΠϧʮʯͷ
αϯϓϧͰ͢Αɺͱ͍͏ҙຯͰɺ
LTT@CMPDLEP
Λ෇͚Δ

View Slide

Ͳͷ4BTTͷαϯϓϧͳͷ͔Λ
4BTTϑΝΠϧʹ෇͚ͨ൪߸Ͱ
ࢦఆ͢Δɻ
4BTTϑΝΠϧʮʯͷ
αϯϓϧͰ͢Αɺͱ͍͏ҙຯͰɺ
LTT@CMPDLEP
Λ෇͚Δ
Ͱɺ͜ͷWJFXʹΞΫηε͢Δͱʜ

View Slide


View Slide

͋Βɺૉఢʂ

View Slide

4BTTϑΝΠϧʹ෇͚ͨ൪߸

View Slide

ϚʔΫμ΢ϯͰॻ͍ͨઆ໌

View Slide

)".-Ͱॻ͍ͨWJFX

View Slide

)".-Ͱॻ͍ͨϚʔΫΞοϓ

View Slide

)".-Ͱॻ͍ͨϚʔΫΞοϓ
ख࡞ۀͰ࡞Δͱ໘౗ͳͷΛࣗಈੜ੒

View Slide

w ΤϯδχΞ͕$44Λॻ͍ͯ΋ɺ͜ͷϖʔδͷ੺ͱͬͪ͜ͷϖʔδͷ
੺͕ඍົʹҧ͘ͳ͍ʁͬͯ͜ͱ͕ແ͘ͳΔ
w ͜ͷ৭ͷม਺ͬͯͳΜ͚ͩͬʁʜHSFQ͕ඞཁແ͘ͳΔ
w σβΠφʔ͕σβΠϯೖΕΔલͷঢ়ଶͰ΋ɺͦΕͳΓʹ৭͸·ͱ·
ͬͨײ͡ʹͳΔ
w ৭ͷ༻్·ͰυΩϡϝϯτԽ͢Ε͹ɺΤϯδχΞ͕͜ͷ৔߹ͬͯͲ
ͷ৭Λ࢖͏΂͖ʁͱ೰Ή͜ͱ͕ͳ͘ͳΔ
৭ͷϧʔϧΛνʔϜͰڞ༗͜ͱͷϝϦοτ

View Slide

HSFFO͸҆શɺ੒ޭΛϢʔβʔʹ఻͑Δͱ͖ʹ࢖͏ʢTVDDFTTʣ
ZFMMPX͸஫ҙΛϢʔβʔʹ఻͑Δͱ͖ʹ࢖͏ʢVOLOPXOʣ
SFE͸Ϣʔβʔʹܯࠂ͢Δͱ͖ʹ࢖͏ʢFSSPSʣ
HSBZ͸ࡁΈɺෆՄೳΛ఻͑Δͱ͖ʹ࢖͏ʢEJTBCMFʣ
Έ͍ͨͳײ͡Ͱɺ
࢖͍ํΛॻ͍ͨΓ͢ΔͱσβΠφʔͷҙਤΛ
νʔϜ಺Ͱڞ༗Ͱ͖Δ͠ɺ

View Slide

ͦ͏͍͏΋ͷΛॻ͘৔ॴ͕͋Δ͜ͱͰɺ
ͦΕΛॻ͘Α͏ʹσβΠφʔʹ஫จ͕Ͱ͖Δ

View Slide

ٯʹΤϯδχΞ͕ؒҧͬͨ࢖͍ํΛͨ͠Γɺ
࢖͍ํͷ࣭໰Λड͚ͨΓ͢Δ͚ͩ
υΩϡϝϯτΛڧԽ͞Ε͍ͯ͘
υΩϡϝϯτͲ͏ҭ͔ͭ͸νʔϜ࣍ୈ

View Slide

࣍͸ྫͱͯ͠ϘλϯͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢

View Slide

ϘλϯͷύλʔϯϥΠϒϥϦ

View Slide

w QSJNBSZͱ͍͏ΫϥεͰϝΠϯͱͳΔී௨ͷϘλϯ
w EBOHFSͱ͍͏ΫϥεͰ࡟আͳΜ͔ʹ࢖͏Ϙλϯ
w CMVFͱ͍͏ΫϥεͰ໨ཱ͍ͨͤͨͱ͖ʹ࢖͏Ϙλϯ
w ϘλϯͦΕͧΕʹʮIPWFSʯɺʮBDUJWFʯɺ
ʮEJTBCMFEʯͷঢ়ଶ͕ཉ͍͠

View Slide

w QSJNBSZͱ͍͏ΫϥεͰϝΠϯͱͳΔී௨ͷϘλϯ
w EBOHFSͱ͍͏ΫϥεͰ࡟আͳΜ͔ʹ࢖͏Ϙλϯ
w CMVFͱ͍͏ΫϥεͰ໨ཱ͍ͨͤͨͱ͖ʹ࢖͏Ϙλϯ
w ϘλϯͦΕͧΕʹʮIPWFSʯɺʮBDUJWFʯɺ
ʮEJTBCMFEʯͷঢ়ଶ͕ཉ͍͠
ന͍Ϙλϯ
੺͍Ϙλϯ
੨͍Ϙλϯ
ޫΔ ΁͜Ή
൒ಁ໌

View Slide

,44ಠࣗͷઆ໌ॻ͖

View Slide

// ## デフォルトボタン
// Sass
// - - -
// .button
// +button-base(文字サイズ, 高さ, 横幅, マージン, 文字の太さ)
// +button-default(ボタンの色, 文字の色, 角丸, ノーマル時のシャドウ…
// - - -
// - こんな感じで +button-base と +button-default を組み合わせでできてます。
// - buttonタグ、aタグ、submit type="button"、どれにスタイルをあてても同じ…
//
// .primary - （白）メインとなる普通のボタン
// .primary:hover - （白）メインとなる普通のボタンマウスオン
// .primary:active - （白）メインとなる普通のボタンクリック
// .primary:disabled - （白）メインとなる普通のボタン無効
// .danger - （赤）削除なんかに使う危険なボタン
// .danger:hover - （赤）削除なんかに使う危険なボタンマウスオン
// .danger:active - （赤）削除なんかに使う危険なボタンクリック
// .danger:disabled - （赤）削除なんかに使う危険なボタン無効
// .blue - （青）目立たせたいときに使うボタン
// .blue:hover - （青）目立たせたいときに使うボタンマウスオン
// .blue:active - （青）目立たせたいときに使うボタンクリック
// .blue:disabled - （青）目立たせたいときに使うボタン無効
//
// Styleguide 2.1.
ίϝϯτΞ΢τ

View Slide

// Sass
// - - -
// .button
// - - -
//
//
// Styleguide 2.1.
ϚʔΫμ΢ϯͰઆ໌

View Slide

// Sass
// - - -
// .button
// - - -
//
//
// Styleguide 2.1. ൪߸

View Slide

// Sass
// - - -
// .button
// - - -
//
//
// Styleguide 2.1. όϦΤʔγϣϯ

View Slide

ϘλϯͷWJFX
ͨͬͨޒߦ͚ͩ
IUNMIBNMͱ͍͏໊લΛ෇͚Δ

View Slide

ϘλϯͷWJFX
ͨͬͨޒߦ͚ͩ
4BTTϑΝΠϧʮʯͷαϯϓϧͳͷͰɺ
LTT@CMPDLEPΛ෇͚Δ

View Slide

= kss_block '2.1' do
%p.buttons
%a{:href => "#", :class => "button $modifier_class"} aタグのボタン
%input{:type => "button", :value => "inputタグのボタン", :class =>
"button $modifier_class"}
%button{:type => "button", :class => "button $modifier_class"} buttonタグ
のボタン
NPEJpFS@DMBTTͱ͸ʁ

View Slide


aタグのボタン

)5.-
NPEJpFS@DMBTTͱ͸ʁ

View Slide

// Sass
// - - -
// .button
// - - -
//
//
// Styleguide 2.1. όϦΤʔγϣϯ

View Slide

.primary
.primary:hover
.primary:active
.primary:disabled
.danger
.danger:hover
.danger:active
.danger:disabled
.blue
.blue:hover
.blue:active
.blue:disabled
NPEJpFS@DMBTT
ࣗಈͰೖΕͯ͘ΕΔ

View Slide


aタグのボタン

buttonタグのボタン

aタグのボタン


aタグのボタン


͜͏ॻ͖ͩ͞ΕΔ

View Slide

.primary
.primary:hover
.primary:active
.primary:disabled
.danger
.danger:hover
.danger:active
.danger:disabled
.blue
.blue:hover
.blue:active
.blue:disabled
WJFX͸͜Ε͚ͩͳͷʹ
όϦΤʔγϣϯ෼͚ͩϧʔϓ

View Slide

όϦΤʔγϣϯ͸͜Μͳײ͡Ͱදࣔ͞ΕΔ

View Slide

ٖࣅΫϥεͷݟͨ໨΋ݟΕΔʂ

View Slide

ٖࣅΫϥεͷݟͨ໨΋ݟΕΔʂ
σβΠφʔͱͯ͠΋ҰཡͰݟΕΔͷ͸݁ߏศར

View Slide

w σβΠφʔͰͳͯ͘΋Ϙλϯͷݟͨ໨Λ࣮૷Ͱ͖ΔΑ͏ʹͳΔ
w Ϙλϯʹؔ͢ΔσβΠφʔͷҙਤ͕ڞ༗Ͱ͖Δ
w ͬͪ͜͸Ϙλϯ੨͍ͷʹɺͳΜͰͬͪ͜͸྘ͳͷʁͱ͍͏Α͏ͳ͜
ͱ͕͋ͬͨࡍɺ΋ͦ͠Ε͕୯ͳΔσβΠφʔͷؾ·͙ΕͩͬͨΒɺ
ʮͪΌΜͱߟ͑ͯσβΠϯ͠ΖʯͱಥͬࠐΊΔ
w ػೳͱݟͨ໨͕Ұகͯ͠࢖͍উख͕޲্
ϘλϯͷϧʔϧΛνʔϜͰڞ༗͢Δ͜ͱͷϝϦοτ

View Slide

·ͱΊ
w ύλʔϯϥΠϒϥϦ͕͋Δͱɺ͋Δఔ౓ͷݟͨ໨͸ΤϯδχΞ͚ͩ
Ͱ࣮૷Ͱ͖ΔͷͰɺϓϩτλΠϓˠݕূͷεϐʔυ্͕͕Δ
w ύλʔϯϥΠϒϥϦ͕͋Δͱɺͳͥͦͷݟͨ໨ͳͷ͔ʁσβΠφʔ
ͷҙਤΛνʔϜͰڞ༗͢Δ͜ͱ͕Ͱ͖Δ
w ύλʔϯϥΠϒϥϦΛσβΠφʔ͚ͩͰಋೖ͢Δͷ͸݁ߏෑډ͕ߴ
͍ͷͰΤϯδχΞͷڠྗ͕ඞཁ

View Slide

·ͱΊ
w ύλʔϯϥΠϒϥϦ͕͋Δͱɺ͋Δఔ౓ͷݟͨ໨͸ΤϯδχΞ͚ͩ
Ͱ࣮૷Ͱ͖ΔͷͰɺϓϩτλΠϓˠݕূͷεϐʔυ্͕͕Δ
w ύλʔϯϥΠϒϥϦ͕͋Δͱɺͳͥͦͷݟͨ໨ͳͷ͔ʁσβΠφʔ
ͷҙਤΛνʔϜͰڞ༗͢Δ͜ͱ͕Ͱ͖Δ
w ύλʔϯϥΠϒϥϦΛσβΠφʔ͚ͩͰಋೖ͢Δͷ͸݁ߏෑډ͕ߴ
͍ͷͰΤϯδχΞͷڠྗ͕ඞཁ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ

View Slide

KSSで作るパターンライブラリ

KSSで作るパターンライブラリ

machida

More Decks by machida

Other Decks in Design

Featured

Transcript