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

2013年9月21日大阪 #PmD01 で発表させていただいた資料です。

合わせて読みたい

【アイコンを200こ描いた振り返り！】アイコンから知るデザインのヒントby awayuki
http://www.slideshare.net/awayukin/awayuki-pmd01-share

ズルいデザインテクニック2013 + セミフラット version
https://speakerdeck.com/ken_c_lo/zuruidezaintekunituku2013-plus-semihuratuto-version

Transcript

1. ,44Ͱ࡞ΔύλʔϯϥΠϒϥϦ େࡕ
   1N%
2. େࡕͷօ͞Μ͜Μʹͪ͸ w ொా఩ฏʢ·ͪͩͯͬ΃͍ʣͱਃ͠·͢ w ߹ಉձࣾϑΟϤϧυͱ͍͏ձࣾʹ͍·͢ w 5XJUUFSΞΧ΢ϯτ͸
   !NBDIJEB w ීஈ͸σβΠφʔͱͯ͠3BJMTΛ࢖ͬͯαʔϏεΛ։ൃ͢ΔνʔϜʹ ೖͬͯ·͢
3. ා
   ࿩ w ා͍࿩͕࿩ແྉͰಡΊΔ w εϚϗɺ1$ͰಡΊΔ w ϗϥʔອը΋ແྉͰಡΊΔ w ΞϓϦɺ8FC͔ΒಡΊΔ w 3VCZ
   PO
   3BJMT
   Ͱ։ൃ w ͘͢͝ා͍ ͜Θ͹ͳ ʮ͜Θ͹ͳʯͰݕࡧʂ
4. OPNVOFM w ϑΟϤϧυΠϯλʔϯͰ3BJMT ΍ͬͯͨ w ݱࡏಸྑࡏॅ w 3BJMT͕৮ΕΔब৬ઌืू w ҰਓͰαʔϏεΛ࡞ͬͨܦݧ΋ ͋Γ ͷΉͶΔ ٻ৬த
5. ౦ژͷ1%͔Βདྷ·ͨ͠
6. ౦ژͷ1%͔Βདྷ·ͨ͠
7. ౦ژͷ1%͔Βདྷ·ͨ͠
8. ౦ژͷ1%͔Βདྷ·ͨ͠
9. ౦ژͷ1%͔Βདྷ·ͨ͠
10. ౦ژͷ1%͔Βདྷ·ͨ͠
11. ౦ژͷ1%͔Βདྷ·ͨ͠
12. ౦ژͷ1%͔Βདྷ·ͨ͠
13. ౦ژͷ1%͔Βདྷ·ͨ͠
14. ౦ژͷ1%͔Βདྷ·ͨ͠
15. ౦ژͷ1%͔Βདྷ·ͨ͠ 1%ͬͯ͜Μͳײ͡
16. ౦ژͷ1%͔Βདྷ·ͨ͠ w ݄ೋճ։࠵ʢגࣜձࣾHBSCT༷ɺגࣜձࣾສ༿༷ʣ w ΤϯδχΞ͸΄΅
    3VCZJTU w σβΠφʔ͕΍Γ͍ͨ͜ͱΛݴ͏ͱɺ࠷దͳΤϯδχΞͱϖΞʹ͠ ͯɺ΍Γ͍ͨ͜ͱΛڭ͑ͯ͘ΕΔ w ऴΘͬͨ͋ͱ͸͍ͭ΋ͷళͰ͓ञΛҿΜͰ·͢ w ҙ֎ͱ೥ྸ૚ߴΊ w σβΠφ཰্ঢத w ւ࿝୔͞Μͷ൵ئͰ͋ͬͨঁࢠ཰΋্ঢத 1%ͬͯ͜Μͳײ͡
17. ౦ژͷ1%͔Βདྷ·ͨ͠ w ݄ೋճ։࠵ʢגࣜձࣾHBSCT༷ɺגࣜձࣾສ༿༷ʣ w ΤϯδχΞ͸΄΅
    3VCZJTU w σβΠφʔ͕΍Γ͍ͨ͜ͱΛݴ͏ͱɺ࠷దͳΤϯδχΞͱϖΞʹ͠ ͯɺ΍Γ͍ͨ͜ͱΛڭ͑ͯ͘ΕΔ w ऴΘͬͨ͋ͱ͸͍ͭ΋ͷళͰ͓ञΛҿΜͰ·͢ w ҙ֎ͱ೥ྸ૚ߴΊ w σβΠφ཰্ঢத w ւ࿝୔͞Μͷ൵ئͰ͋ͬͨঁࢠ཰΋্ঢத 1%ͬͯ͜Μͳײ͡ ౦ژʹ͓ӽ͠ͷࡍ͸༡ͼʹདྷ͍ͯͩ͘͞
18. ࠷ۙͷ։ൃελΠϧ ͓଴ͨͤ͠·ͨ͠ɺຊ୊Ͱ͢ɻ
19. ࠷ۙͷ։ൃελΠϧ ։ൃνʔϜ ΤϯδχΞ σβΠφʔ Ճೖ
20. w σβΠφʔ΋ϩʔΧϧʹ؀ڥΛͭ͘Δ w σβΠφʔ΋όʔδϣϯ؅ཧʹೖΔ w σβΠφʔ΋Ұॹʹ࢓༷ʢ໰୊ͷղܾखஈʣΛߟ͑Δ ࠷ۙͷ։ൃελΠϧ
21. ࠷ۙͷ։ൃελΠϧ ϓϩτλΠϓ ϑΟʔυόοΫ ࣍ͷετʔϦʔ΁ ܁Γฦ͢ ϦϦʔε ໰୊͸ղܾ͞Εͨʁ ϦϦʔε0,ʁ ໰୊Λݟ͚ͭΔ ܁Γฦ͢
22. ࠷ۙͷ։ൃελΠϧ ϓϩτλΠϓ ϑΟʔυόοΫ ࣍ͷετʔϦʔ΁ ܁Γฦ͢ ϦϦʔε ໰୊͸ղܾ͞Εͨʁ ϦϦʔε0,ʁ ໰୊Λݟ͚ͭΔ ܁Γฦ͢ σβΠφʔ͕νʔϜʹೖΔϝϦοτ w )5.-΍$44΍ը૾ϑΝΠϧΛ[JQͰϑΝΠϧΛ౉͞ΕͯɺͦΕΛγ εςϜʹ૊ΈࠐΉख͕ؒͳ͘ͳͬͨʢมߋͷࠩ෼͕Θ͔Βͳͯ͘ࢮ ͵͜ͱ͕ͳ͘ͳΔʣ w σβΠϯͰղܾ͢΂͖໰୊ΛσβΠφʔ͕ݟ͚ͭΔ w σβΠφʔ΋࢓༷ɺߏ଄Λཧղ͍ͯ͠ΔͷͰ࿩͕ૣ͍ʢ.5(΍࿈བྷ ͕ݮΔʣ
23. ࠷ۙͷ։ൃελΠϧ ϓϩτλΠϓ ϑΟʔυόοΫ ࣍ͷετʔϦʔ΁ ܁Γฦ͢ ϦϦʔε ໰୊͸ղܾ͞Εͨʁ ϦϦʔε0,ʁ ໰୊Λݟ͚ͭΔ ܁Γฦ͢ σβΠφʔʹ΋ϝϦοτ w ࣮ࡍʹಈ͘΋ͷΛ৮ͬͯ։ൃΛ͍ͯ͠ΔͷͰɺҙਤͱҧ͍ͬͯͨಈ ͖ʹ͙͢ؾ͚ͮΔ w ࣮σʔλʢ·ͨ͸ͦΕʹ͍ۙ΋ͷʣ͕ೖͬͨঢ়ଶͷ΋ͷΛݟͳ͕Β ։ൃͰ͖ΔͷͰɺ࣮ࡍʹՔಇͨ͠ͱ͖ͱΠϝʔδ͕ҧͬͯͨɺͱ͍ ͏͜ͱ͸ى͖ʹ͍͘ w ࢓༷ɺߏ଄Λཧղ͍ͯ͠ΔͷͰ֬ೝ͢Δ͜ͱ͕গͳ͍ʢ.5(΍࣭໰ ͕ݮΔʣ
24. ࠷ۙͷ։ൃελΠϧ ϓϩτλΠϓ ϑΟʔυόοΫ ࣍ͷετʔϦʔ΁ ܁Γฦ͢ ϦϦʔε ໰୊͸ղܾ͞Εͨʁ ϦϦʔε0,ʁ ໰୊Λݟ͚ͭΔ ܁Γฦ͢ σβΠϯʂ σβΠϯʂ σβΠϯʂ σβΠϯʂ
25. ࠷ۙͷ։ൃελΠϧ ϓϩτλΠϓ ϑΟʔυόοΫ ࣍ͷετʔϦʔ΁ ܁Γฦ͢ ϦϦʔε ໰୊͸ղܾ͞Εͨʁ ϦϦʔε0,ʁ ໰୊Λݟ͚ͭΔ ܁Γฦ͢ [JQೲ඼ʜ
26. ࠷ۙͷ։ൃελΠϧ ϓϩτλΠϓ ϑΟʔυόοΫ ࣍ͷετʔϦʔ΁ ܁Γฦ͢ ϦϦʔε ໰୊͸ղܾ͞Εͨʁ ϦϦʔε0,ʁ ໰୊Λݟ͚ͭΔ ܁Γฦ͢ [JQೲ඼ʜ ͸ɺաڈͷ࿩
27. ࠷ۙͷ։ൃελΠϧ ϓϩτλΠϓ ϑΟʔυόοΫ ࣍ͷετʔϦʔ΁ ܁Γฦ͢ ϦϦʔε ໰୊͸ղܾ͞Εͨʁ ϦϦʔε0,ʁ ໰୊Λݟ͚ͭΔ ܁Γฦ͢ [JQೲ඼ʜ ͜ΕͰϋοϐʔΤϯυ͔ͱࢥ͍͖΍ʜ
28. 5XJUUFS
    #PPUTUSBQͷొ৔
29. 5XJUUFS
    #PPUTUSBQͷొ৔ ΤϯδχΞ $44Λॻ͔ͳͯ͘΋σβΠϯ ͕ೖΔʂ ศར͗ͯ͢Ϡό͍ΜͰ͚͢Ͳ
30. 5XJUUFS
    #PPUTUSBQͷొ৔
31. 5XJUUFS
    #PPUTUSBQͷొ৔ ΤϯδχΞͷؒͰେώοτʂ
32. 5XJUUFS
    #PPUTUSBQͷొ৔ ΤϯδχΞ $44Λॻ͔ͳͯ͘΋σβΠϯ͕ೖΕΒ ΕΔʂ ͪΐͬͱ͜Εɺศར͗ͯ͢Ϡό͍ΜͰ ͚͢Ͳʂ
33. 5XJUUFS
    #PPUTUSBQͷొ৔ ΤϯδχΞ $44Λॻ͔ͳͯ͘΋σβΠϯ͕ೖΕΒ ΕΔʂ ͪΐͬͱ͜Εɺศར͗ͯ͢Ϡό͍ΜͰ ͚͢Ͳʂ ΤϯδχΞ͸ؾ෇͍ͨ
34. 5XJUUFS
    #PPUTUSBQͷొ৔ ΤϯδχΞ $44Λॻ͔ͳͯ͘΋σβΠϯ͕ೖΕΒ ΕΔʂ ͪΐͬͱ͜Εɺศར͗ͯ͢Ϡό͍ΜͰ ͚͢Ͳʂ w 5XJUUFS
    #PPUTUSBQతͳ΋ͷΛϓϩδΣΫ τͰ༻ҙ͢Ε͹ɺ͋Δఔ౓͸σβΠφʔ ແ͠ͰϓϩτλΠϓ͕࡞ΕΔͷͰ͸ʁ ΤϯδχΞ͸ؾ෇͍ͨ
35. 5XJUUFS
    #PPUTUSBQͷొ৔ ΤϯδχΞ $44Λॻ͔ͳͯ͘΋σβΠϯ͕ೖΕΒ ΕΔʂ ͪΐͬͱ͜Εɺศར͗ͯ͢Ϡό͍ΜͰ ͚͢Ͳʂ ΤϯδχΞ͸ؾ෇͍ͨ ϓϩτλΠϓ ϑΟʔυόοΫ ࣍ͷετʔϦʔ΁ ϦϦʔε ໰୊Λݟ͚ͭΔ ܁Γฦ͢
36. 5XJUUFS
    #PPUTUSBQͷొ৔ ΤϯδχΞ $44Λॻ͔ͳͯ͘΋σβΠϯ͕ೖΕΒ ΕΔʂ ͪΐͬͱ͜Εɺศར͗ͯ͢Ϡό͍ΜͰ ͚͢Ͳʂ ΤϯδχΞ͸ؾ෇͍ͨ ϓϩτλΠϓ ϑΟʔυόοΫ ࣍ͷετʔϦʔ΁ ϦϦʔε ໰୊Λݟ͚ͭΔ ߴ଎Խ
37. 5XJUUFS
    #PPUTUSBQͷొ৔ ΤϯδχΞ $44Λॻ͔ͳͯ͘΋σβΠϯ͕ೖΕΒ ΕΔʂ ͪΐͬͱ͜Εɺศར͗ͯ͢Ϡό͍ΜͰ ͚͢Ͳʂ ΤϯδχΞ͸ؾ෇͍ͨ 5XJUUFS
    #PPUTUSBQతͳ ΍ͭ࡞ͬͯΑ
38. 5XJUUFS
    #PPUTUSBQͷొ৔ ΤϯδχΞ $44Λॻ͔ͳͯ͘΋σβΠϯ͕ೖΕΒ ΕΔʂ ͪΐͬͱ͜Εɺศར͗ͯ͢Ϡό͍ΜͰ ͚͢Ͳʂ ΤϯδχΞ͸ؾ෇͍ͨ ͓ɺ͓͏ʜ 5XJUUFS
    #PPUTUSBQతͳ ΍ͭ࡞ͬͯΑ
39. #PPUTUSBQతͳ΋ͷͱ͸ʁ w ͲͷϖʔδͰ࢖ͬͯ΋ɺݟຊ௨Γʹ΍Ε͹ͦͷݟͨ໨͕࠶ݱ͞ΕΔ ΋ͷʢ$44Λॻ͘ඞཁ͕ͳ͍ʣ w ଞͷϖʔδͰग़͖ͯͨύʔπ΍ɺΑ͋͘Δύʔπ͕͋Β͔͡Ίݟຊ ʹ༻ҙ͞Ε͍ͯΔ΋ͷ w ࢖͍ํ΍ҙਤʹ͍ͭͯͷઆ໌͕ͪΌΜͱݟຊʹॻ͔Ε͍ͯΔ΋ͷ
40. #PPUTUSBQతͳ΋ͷͱ͸ʁ w ͲͷϖʔδͰ࢖ͬͯ΋ɺݟຊ௨Γʹ΍Ε͹ͦͷݟͨ໨͕࠶ݱ͞ΕΔ ΋ͷʢ$44Λॻ͘ඞཁ͕ͳ͍ʣ w ଞͷϖʔδͰग़͖ͯͨύʔπ΍ɺΑ͋͘Δύʔπ͕͋Β͔͡Ίݟຊ ʹ༻ҙ͞Ε͍ͯΔ΋ͷ w ࢖͍ํ΍ҙਤʹ͍ͭͯͷઆ໌͕ͪΌΜͱݟຊʹॻ͔Ε͍ͯΔ΋ͷ
41. #PPUTUSBQతͳ΋ͷͱ͸ʁ w ͲͷϖʔδͰ࢖ͬͯ΋ɺݟຊ௨Γʹ΍Ε͹ͦͷݟͨ໨͕࠶ݱ͞ΕΔ ΋ͷʢ$44Λॻ͘ඞཁ͕ͳ͍ʣ w ଞͷϖʔδͰग़͖ͯͨύʔπ΍ɺΑ͋͘Δύʔπ͕͋Β͔͡Ίݟຊ ʹ༻ҙ͞Ε͍ͯΔ΋ͷ w ࢖͍ํ΍ҙਤʹ͍ͭͯͷઆ໌͕ͪΌΜͱݟຊʹॻ͔Ε͍ͯΔ΋ͷ ݟຊʢύλʔϯϥΠϒϥϦʣ͕͋Δ͜ͱ͕ඞཁ
42. #PPUTUSBQతͳ΋ͷͱ͸ʁ w ݟຊʹ͋Δ௨ΓʹϚʔΫΞοϓΛͯ͠DMBTTΛ෇͚Δͱɺͦͷݟͨ໨ ͕࠶ݱ͞ΕΔ΋ͷ w ͲͷϖʔδͰ࢖ͬͯ΋ɺݟຊ௨Γʹ΍Ε͹ͦͷݟͨ໨͕࠶ݱ͞ΕΔ ΋ͷʢ$44Λॻ͖଍͢ඞཁ͕ͳ͍ʣ w ଞͷϖʔδͰग़͖ͯͨύʔπ΍ɺΑ͋͘Δύʔπ͕͋Β͔͡Ίݟຊ ʹ༻ҙ͞Ε͍ͯΔ΋ͷ w ࢖͍ํ΍ҙਤʹ͍ͭͯͷઆ໌͕ͪΌΜͱݟຊʹॻ͔Ε͍ͯΔ΋ͷ ݟຊʢύλʔϯϥΠϒϥϦʣ͕͋Δ͜ͱ͕ඞཁ
43. #PPUTUSBQతͳ΋ͷͱ͸ʁ w ݟຊʹ͋Δ௨ΓʹϚʔΫΞοϓΛͯ͠DMBTTΛ෇͚Δͱɺͦͷݟͨ໨ ͕࠶ݱ͞ΕΔ΋ͷ w ͲͷϖʔδͰ࢖ͬͯ΋ɺݟຊ௨Γʹ΍Ε͹ͦͷݟͨ໨͕࠶ݱ͞ΕΔ ΋ͷ w ଞͷϖʔδͰग़͖ͯͨύʔπ΍ɺΑ͋͘Δύʔπ͕͋Β͔͡Ίݟຊ ʹ༻ҙ͞Ε͍ͯΔ΋ͷ w ࢖͍ํ͕ͪΐͬͱ೉͍͠ͱ͖͸આ໌͕ͪΌΜͱݟຊʹॻ͔Ε͍ͯΔ ΋ͷ ݟຊ
    ˠ
    ύλʔϯϥΠϒϥϦ ελΠϧΨΠυͱύλʔϯϥΠϒϥϦ w ελΠϧΨΠυͱ͍͏ͱɺ
    ϚʔΫΞοϓͷن໿ͱɺσβΠϯͷύλ ʔϯͷϥΠϒϥϦΛҰͭʹͨ͠΋ͷʢ(JUIVCͳͲʣͱɺΞʔΫΞο ϓͷن໿͚ͩͷ΋ͷʢ(PPHMFͳͲʣͷೋछྨ͕͋ͬͯɺͲͬͪΛࢦ ͯ͠Δ͔࿩͕΍΍͘͜͠ͳΔͷͰɺ͜ͷεϥΠυͰ͸ɺΞʔΫΞο ϓͷن໿ΛʮελΠϧΨΠυʯɺσβΠϯͷύλʔϯͷϥΠϒϥϦ ΛʮύλʔϯϥΠϒϥϦʯͱݺΜͰ͍·͢ w ࠓճ͸ʮ5XJUUFS
    #PPUTUSBQΈ͍ͨʹ$44Λॻ͔ͣʹσβΠϯΛೖΕ ͍ͨʂʯͱ͍͏ΤϯδχΞ͔Βͷཁ๬ʹ౴͑Δͷ͕ςʔϚͳͷͰɺ ύλʔϯϥΠϒϥϦʹ࿩Λߜͬͯ·͢
44. ୳ͨ͠Β݁ߏ͋ͬͨύλʔϯϥΠϒϥϦ
45. https://github.com/styleguide/css (JUIVC ୳ͨ͠Β݁ߏ͋ͬͨύλʔϯϥΠϒϥϦ
46. http://www.starbucks.com/static/reference/styleguide/ ελʔόοΫε ୳ͨ͠Β݁ߏ͋ͬͨύλʔϯϥΠϒϥϦ
47. http://getbootstrap.com/css/ 5XJUUFS
    #PPUTUSBQ ୳ͨ͠Β݁ߏ͋ͬͨύλʔϯϥΠϒϥϦ
48. https://github.com/vincelane/disqus-style %*4264 ୳ͨ͠Β݁ߏ͋ͬͨύλʔϯϥΠϒϥϦ
49. http://foundation.zurb.com/docs/ 'PVOEBUJPO ୳ͨ͠Β݁ߏ͋ͬͨύλʔϯϥΠϒϥϦ
50. http://showcase.nuxeo.com/nuxeo/styleGuide/ OVYFP ୳ͨ͠Β݁ߏ͋ͬͨύλʔϯϥΠϒϥϦ
51. ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ
52. http://jacobrask.github.io/styledocco/ ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ 4UZMF%PDDP w /PEFKT w 4BTTɺ
    -FTTɺ4UZMVTʹରԠ w ݁ߏ࢖ΘΕͯΔ
53. http://kaleistyleguide.com/ ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ ,BMFJ
    
    4UZMF
    HVJEF w #BDLCPOFKT w 5XJUUFS#PPUTUSBQͬΆ͍ݟͨ໨ w 3BJMTͷ(FN͋Γ w $44ɺ-&44ରԠ w 4BTT͸ະରԠ
54. http://kaleistyleguide.com/ ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ ,BMFJ
    
    4UZMF
    HVJEF w #BDLCPOFKT w 5XJUUFS#PPUTUSBQͬΆ͍ݟͨ໨ w 3BJMTͷ(FN͋Γ w $44ɺ-&44͸ࡁΈɺ4BTT͸ະର Ԡ 4BTTରԠʹ৆ۚ͋Γ ͜͜ʹ͍ΔΤϯδχΞͷ͔ͨɺ ͜ͷλεΫ୭͔΍ͬͯʂ
55. http://pea.rs/ ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ 1FBST w ύλʔϯϥΠϒϥϦΛ࡞ΔͨΊ ͷ8PSE1SFTTͷςʔϚ
56. https://github.com/adactio/Pattern-Primer ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ 1BUUFSO
    1SJNFS w 1)1൛ɺ/PEFKT൛ɺ3VCZ൛ ʢ4JOBUSBʣɺ+FLZMM൛
    ͕͋Δ
57. 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Ͱಈ͘
58. 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Ͱಈ͘ 3VCZʹ༏ͦ͠͏ͳͷͰ,44͕Α͛͞ ˞ொాʹͱͬͯ͸
59. ,44ͱ͸ʁ
60. ,44ͱ͸ʁ http://warpspire.com/kss/ ,44ͷ࢖͍ํ͸ ຊՈͷϖʔδʹ͋Γ·͢
61. ,44ͱ͸ʁ https://github.com/styleguide/css ,44ͷྫͱ͍͑͹ (JUIVC
62. https://github.com/styleguide/css
63. w ߲໨͝ͱʹ൪߸͕෇͍ͯΔ
64. w ߲໨͝ͱʹ൪߸͕෇͍ͯΔ
65. w ͦΕͧΕͷ߲໨ͷதͷύʔ πʹ΋൪߸͕෇͍ͯΔ w ɺɺʜͱɺ൪߸ ॱʹύʔπͷαϯϓϧ͕ฒ ΜͰΔ
66. ύʔπͷ൪߸
67. ύʔπͷઆ໌
68. ύʔπͷݟͨ໨
69. ύʔπͷόϦΤʔγϣϯ
70. ύʔπͷϚʔΫΞοϓ
71. ύʔπͷϚʔΫΞοϓ ʜͱ͍͏΋ͷΛ࡞Δπʔϧ͕,44
72. https://github.com/adactio/Pattern-Primer ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ ,44 w $44ɺ4$44ɺ-&44Ͱ࢖͑Δ w 4UZMF%PDDPͷର߅ w (JUIVCͷਓ͕࡞ͬͨ w ݟͨ໨͸(JUIVCͷ4UZMF(VJEFͱ ಉ͡ w 3BJMT༻ͷ(FN͋Γ w FYBNQMF͸4JOBUSBͰಈ͘ ,44
    ͷ೿ੜ͕ͨ͘͞Μ͋ͬͨ w IUUQTHJUIVCDPNEFXTLJLTTSBJMT w IUUQTHJUIVCDPNULHSVOULTT w IUUQTHJUIVCDPNTPFOLFTDIOPPSHSVOULTT w IUUQTHJUIVCDPNTDBOJODLTTQIQ w IUUQTHJUIVCDPNNBESLTTNBLF w IUUQTHJUIVCDPN%BSFQNJEEMFNBOLTT w IUUQTHJUIVCDPNTNUNJEEMFNBOLTT
73. http://nadarei.co/nkss-rails/ ,44ͷ೿ੜͷҰͭ /,44
    /BEBSFJ
    ,44 w /BEBSFJͱ͍͏ձ͕ࣾΧελϚΠ ζͨ͠,44 w WJFX͕)BNMରԠ w 3BJMT༻͔͠ͳ͍ w αϯϓϧ͕4BTT
    4ZOUBY w ݟͨ໨͕͓͠ΌΕ
74. ,44ͷ೿ੜͷҰͭ /,44
    /BEBSFJ
    ,44 w /BEBSFJͱ͍͏ձ͕ࣾΧελϚΠ ζͨ͠,44 w WJFX͕)BNMରԠ w 3BJMT༻͔͠ͳ͍ w αϯϓϧ͕4BTT
    4ZOUBY w ݟͨ໨͕͓͠ΌΕ http://nadarei.co/nkss-rails/
75. /,44
    /BEBSFJ
    ,44 w /BEBSFJͱ͍͏ձ͕ࣾ࡞ͬͨ,44 w WJFX͕)BNMରԠ w 3BJMTͷ(FNͷΈ w αϯϓϧ͕4BTT
    4ZOUBY w ݟͨ໨͕͓͠ΌΕ /,44ɺ܅ʹܾΊͨʂ ,44ͷ೿ੜͷҰͭ http://nadarei.co/nkss-rails/
76. ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ /,44
    /BEBSFJ
    ,44 w /BEBSFJͱ͍͏ձ͕ࣾ࡞ͬͨ,44 w WJFX͕)BNMରԠ w 3BJMTͷ(FNͷΈ w αϯϓϧ͕4BTT
    4ZOUBY w ݟͨ໨͕͓͠ΌΕ ொా͸͜ΕʹܾΊ·ͨ͠ʂ ௐࢠʹ৐ͬͯ ίϯτϦϏϡοͨ http://nadarei.co/nkss-rails/
77. https://github.com/adactio/Pattern-Primer ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ /,44
    /BEBSFJ
    ,44 w /BEBSFJͱ͍͏ձ͕ࣾ࡞ͬͨ,44 w WJFX͕)BNMରԠ w 3BJMTͷ(FNͷΈ w αϯϓϧ͕4BTT
    4ZOUBY w ݟͨ໨͕͓͠ΌΕ ொా͸͜ΕʹܾΊ·ͨ͠ʂ ίϯτϦϏϡοͨ ͜ͷબ୒͕ࢥΘ͵མͱ݀ͩ͠ͱ஌Βͣʹʜ
78. https://github.com/adactio/Pattern-Primer ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ /,44
    /BEBSFJ
    ,44 w /BEBSFJͱ͍͏ձ͕ࣾ࡞ͬͨ,44 w WJFX͕)BNMରԠ w 3BJMTͷ(FNͷΈ w αϯϓϧ͕4BTT
    4ZOUBY w ݟͨ໨͕͓͠ΌΕ ொా͸͜ΕʹܾΊ·ͨ͠ʂ ίϯτϦϏϡοͨ ͜ͷબ୒͕ࢥΘ͵མͱ݀ͩ͠ͱ஌Βͣʹʜ w ෆ۩߹΍,44ʹ͸࣮૷͞ΕͯΔͷʹɺ/,44ʹ͸ͳ͍ػೳ͕͋ͬͨΓ ͳͲɺࠓ೔ͷൃද͕ة͏͍ঢ়گʹʢࡢ೔ͷ࿩ʣ w ٸᬎϑΟϤϧυͷΤϯδχΞͷۨܗ͞Μʹख఻ͬͯ΋Βͬͯ௚ͨ͠ Γɺػೳ௥Ճͨ͠Γ w ΋͸΍ผ෺ʹͳ͖ͬͯͨͷͰɺGKPSEOLTTSBJMT
    ͱͯ͠ެ։͠Α͏͔ ͳ
79. https://github.com/adactio/Pattern-Primer ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ /,44
    /BEBSFJ
    ,44 w /BEBSFJͱ͍͏ձ͕ࣾ࡞ͬͨ,44 w WJFX͕)BNMରԠ w 3BJMTͷ(FNͷΈ w αϯϓϧ͕4BTT
    4ZOUBY w ݟͨ໨͕͓͠ΌΕ ொా͸͜ΕʹܾΊ·ͨ͠ʂ ίϯτϦϏϡοͨ ͜ͷબ୒͕ࢥΘ͵མͱ݀ͩ͠ͱ஌Βͣʹʜ w ෆ۩߹΍,44ʹ͸࣮૷͞ΕͯΔͷʹɺ/,44ʹ͸ͳ͍ػೳ͕͋ͬͨΓ ͳͲɺࠓ೔ͷൃද͕ة͏͍ঢ়گʹʢࡢ೔ͷ࿩ʣ w ٸᬎϑΟϤϧυͷΤϯδχΞͷۨܗ͞Μʹख఻ͬͯ΋Βͬͯ௚ͨ͠ Γɺػೳ௥Ճͨ͠Γ w ΋͸΍ผ෺ʹͳ͖ͬͯͨͷͰɺGKPSEOLTTSBJMT
    ͱͯ͠ެ։͠Α͏͔ ͳ ۙ͘ʹΤϯδχΞ͕͍Δͬͯૉ੖Β͍͠
80. https://github.com/adactio/Pattern-Primer ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ /,44
    /BEBSFJ
    ,44 w /BEBSFJͱ͍͏ձ͕ࣾ࡞ͬͨ,44 w WJFX͕)BNMରԠ w 3BJMTͷ(FNͷΈ w αϯϓϧ͕4BTT
    4ZOUBY w ݟͨ໨͕͓͠ΌΕ ொా͸͜ΕʹܾΊ·ͨ͠ʂ ίϯτϦϏϡοͨ gem 'nkss-rails', :git => 'git@github.com:machida/nkss-rails.git', :branch => "fjord-nkss-rails" मਖ਼ͨ͠ͷ͸ͪ͜Β
81. ύλʔϯϥΠϒϥϦΛ࡞Δ
82. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸ྫͱͯ͠৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ ʢπʔϧʹΑͬͯগͣͭ͠࡞Γํ͕ҟͳΓ·͕͢ɺ,44ܥͩͬͨΒେମಉ͡ʣ
83. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ ৭ͷ΋Ζ΋ΖΛॻ͍ͨ 4BTTϑΝΠϧ @DPMPSTDTTTBTT Λ࡞ͬͨ
84. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ ͜͜ʹ ,44ಠࣗͷઆ໌ॻ͖Λૠೖ
85. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ 
    
    ৭ͷϧʔϧ  
    
    CMBDLɺCMVFɺHSFFOɺPSBOHFɺZFMMPXɺSFEɺXIJUF
    ͷม਺Λ༻ҙɻ 
    
    CPY\৭໊^
    Ͱഎܠ৭͕෇͖·͢ɻ 
    
    ৭͸
    IUUQqBUVJDPMPSTDPN
    ͔Β௖͍ͯ·͢ɻ  
    OPOF  
    4UZMFHVJEF
     ,44ಠࣗͷઆ໌ॻ͖ͱ͸ίϨ
86. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ 
    
    ৭ͷϧʔϧ  
    
    CMBDLɺCMVFɺHSFFOɺPSBOHFɺZFMMPXɺSFEɺXIJUF
    ͷม਺Λ༻ҙɻ 
    
    CPY\৭໊^
    Ͱഎܠ৭͕෇͖·͢ɻ 
    
    ৭͸
    IUUQqBUVJDPMPSTDPN
    ͔Β௖͍ͯ·͢ɻ  
    OPOF  
    4UZMFHVJEF
     ,44ಠࣗͷઆ໌ॻ͖ͱ͸ίϨ ίϝϯτΞ΢τ
87. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ 
    
    ৭ͷϧʔϧ  
    
    CMBDLɺCMVFɺHSFFOɺPSBOHFɺZFMMPXɺSFEɺXIJUF
    ͷม਺Λ༻ҙɻ 
    
    CPY\৭໊^
    Ͱഎܠ৭͕෇͖·͢ɻ 
    
    ৭͸
    IUUQqBUVJDPMPSTDPN
    ͔Β௖͍ͯ·͢ɻ  
    OPOF  
    4UZMFHVJEF
     ,44ಠࣗͷઆ໌ॻ͖ͱ͸ίϨ ϚʔΫμ΢ϯͰઆ໌Λॻ͘
88. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ 
    
    ৭ͷϧʔϧ  
    
    CMBDLɺCMVFɺHSFFOɺPSBOHFɺZFMMPXɺSFEɺXIJUF
    ͷม਺Λ༻ҙɻ 
    
    CPY\৭໊^
    Ͱഎܠ৭͕෇͖·͢ɻ 
    
    ৭͸
    IUUQqBUVJDPMPSTDPN
    ͔Β௖͍ͯ·͢ɻ  
    OPOF  
    4UZMFHVJEF
     ,44ಠࣗͷઆ໌ॻ͖ͱ͸ίϨ ͋ͱͰઆ໌͠·͢
89. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ 
    
    ৭ͷϧʔϧ  
    
    CMBDLɺCMVFɺHSFFOɺPSBOHFɺZFMMPXɺSFEɺXIJUF
    ͷม਺Λ༻ҙɻ 
    
    CPY\৭໊^
    Ͱഎܠ৭͕෇͖·͢ɻ 
    
    ৭͸
    IUUQqBUVJDPMPSTDPN
    ͔Β௖͍ͯ·͢ɻ  
    OPOF  
    4UZMFHVJEF
     ,44ಠࣗͷઆ໌ॻ͖ͱ͸ίϨ 4UZMFHVJEF
    ʴ
    ൪߸
    Λ෇͚Δ
    
90. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ ॻ͖଍ͨ͠
91. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ ͍ͭͮͯɺઌ΄ͲͷελΠϧ ΛݟͤΔͨΊͷαϯϓϧͷ WJFXΛ࡞੒
92. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ IUNMIBNM
    ͱ͍͏໊લ Λ෇͚Δ
93. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ Ͳͷ4BTTͷαϯϓϧͳͷ͔Λ 4BTTϑΝΠϧʹ෇͚ͨ൪߸Ͱ ࢦఆ͢Δɻ 4BTTϑΝΠϧʮʯͷ αϯϓϧͰ͢Αɺͱ͍͏ҙຯͰɺ 
    LTT@CMPDL
    
    EP Λ෇͚Δ
94. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ Ͳͷ4BTTͷαϯϓϧͳͷ͔Λ 4BTTϑΝΠϧʹ෇͚ͨ൪߸Ͱ ࢦఆ͢Δɻ 4BTTϑΝΠϧʮʯͷ αϯϓϧͰ͢Αɺͱ͍͏ҙຯͰɺ 
    LTT@CMPDL
    
    EP Λ෇͚Δ Ͱɺ͜ͷWJFXʹΞΫηε͢Δͱʜ
95. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
96. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ ͋Βɺૉఢʂ
97. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ 4BTTϑΝΠϧʹ෇͚ͨ൪߸
98. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ ϚʔΫμ΢ϯͰॻ͍ͨઆ໌
99. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ )".-Ͱॻ͍ͨWJFX
100. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ )".-Ͱॻ͍ͨϚʔΫΞοϓ
101. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ )".-Ͱॻ͍ͨϚʔΫΞοϓ ख࡞ۀͰ࡞Δͱ໘౗ͳͷΛࣗಈੜ੒
102. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ w ΤϯδχΞ͕$44Λॻ͍ͯ΋ɺ͜ͷϖʔδͷ੺ͱͬͪ͜ͷϖʔδͷ ੺͕ඍົʹҧ͘ͳ͍ʁͬͯ͜ͱ͕ແ͘ͳΔ w ͜ͷ৭ͷม਺ͬͯͳΜ͚ͩͬʁʜHSFQ͕ඞཁແ͘ͳΔ w σβΠφʔ͕σβΠϯೖΕΔલͷঢ়ଶͰ΋ɺͦΕͳΓʹ৭͸·ͱ· ͬͨײ͡ʹͳΔ w ৭ͷ༻్·ͰυΩϡϝϯτԽ͢Ε͹ɺΤϯδχΞ͕͜ͷ৔߹ͬͯͲ ͷ৭Λ࢖͏΂͖ʁͱ೰Ή͜ͱ͕ͳ͘ͳΔ ৭ͷϧʔϧΛνʔϜͰڞ༗͜ͱͷϝϦοτ
103. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ 
     
     HSFFO
     ͸҆શɺ੒ޭΛϢʔβʔʹ఻͑Δͱ͖ʹ࢖͏ʢTVDDFTTʣ 
     
     ZFMMPX
     ͸஫ҙΛϢʔβʔʹ఻͑Δͱ͖ʹ࢖͏ʢVOLOPXOʣ 
     
     SFE
     ͸Ϣʔβʔʹܯࠂ͢Δͱ͖ʹ࢖͏ʢFSSPSʣ 
     
     HSBZ
     ͸ࡁΈɺෆՄೳΛ఻͑Δͱ͖ʹ࢖͏ʢEJTBCMFʣ Έ͍ͨͳײ͡Ͱɺ ࢖͍ํΛॻ͍ͨΓ͢ΔͱσβΠφʔͷҙਤΛ νʔϜ಺Ͱڞ༗Ͱ͖Δ͠ɺ ৭ͷϧʔϧΛνʔϜͰڞ༗͜ͱͷϝϦοτ
104. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ 
     
     HSFFO
     ͸҆શɺ੒ޭΛϢʔβʔʹ఻͑Δͱ͖ʹ࢖͏ʢTVDDFTTʣ 
     
     ZFMMPX
     ͸஫ҙΛϢʔβʔʹ఻͑Δͱ͖ʹ࢖͏ʢVOLOPXOʣ 
     
     SFE
     ͸Ϣʔβʔʹܯࠂ͢Δͱ͖ʹ࢖͏ʢFSSPSʣ 
     
     HSBZ
     ͸ࡁΈɺෆՄೳΛ఻͑Δͱ͖ʹ࢖͏ʢEJTBCMFʣ ͦ͏͍͏΋ͷΛॻ͘৔ॴ͕͋Δ͜ͱͰɺ ͦΕΛॻ͘Α͏ʹσβΠφʔʹ஫จ͕Ͱ͖Δ ৭ͷϧʔϧΛνʔϜͰڞ༗͜ͱͷϝϦοτ
105. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ 
     
     HSFFO
     ͸҆શɺ੒ޭΛϢʔβʔʹ఻͑Δͱ͖ʹ࢖͏ʢTVDDFTTʣ 
     
     ZFMMPX
     ͸஫ҙΛϢʔβʔʹ఻͑Δͱ͖ʹ࢖͏ʢVOLOPXOʣ 
     
     SFE
     ͸Ϣʔβʔʹܯࠂ͢Δͱ͖ʹ࢖͏ʢFSSPSʣ 
     
     HSBZ
     ͸ࡁΈɺෆՄೳΛ఻͑Δͱ͖ʹ࢖͏ʢEJTBCMFʣ ٯʹΤϯδχΞ͕ؒҧͬͨ࢖͍ํΛͨ͠Γɺ ࢖͍ํͷ࣭໰Λड͚ͨΓ͢Δ͚ͩ υΩϡϝϯτΛڧԽ͞Ε͍ͯ͘ υΩϡϝϯτͲ͏ҭ͔ͭ͸νʔϜ࣍ୈ ৭ͷϧʔϧΛνʔϜͰڞ༗͜ͱͷϝϦοτ
106. ύλʔϯϥΠϒϥϦΛ࡞Δ ࣍͸ྫͱͯ͠ϘλϯͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
107. ϘλϯͷύλʔϯϥΠϒϥϦ
108. ϘλϯͷύλʔϯϥΠϒϥϦ w QSJNBSZ
     ͱ͍͏ΫϥεͰϝΠϯͱͳΔී௨ͷϘλϯ w EBOHFS
     ͱ͍͏ΫϥεͰ࡟আͳΜ͔ʹ࢖͏Ϙλϯ w CMVF
     ͱ͍͏ΫϥεͰ໨ཱ͍ͨͤͨͱ͖ʹ࢖͏Ϙλϯ w ϘλϯͦΕͧΕʹʮIPWFSʯɺʮBDUJWFʯɺ ʮEJTBCMFEʯͷঢ়ଶ͕ཉ͍͠
109. ϘλϯͷύλʔϯϥΠϒϥϦ w QSJNBSZ
     ͱ͍͏ΫϥεͰϝΠϯͱͳΔී௨ͷϘλϯ w EBOHFS
     ͱ͍͏ΫϥεͰ࡟আͳΜ͔ʹ࢖͏Ϙλϯ w CMVF
     ͱ͍͏ΫϥεͰ໨ཱ͍ͨͤͨͱ͖ʹ࢖͏Ϙλϯ w ϘλϯͦΕͧΕʹʮIPWFSʯɺʮBDUJWFʯɺ ʮEJTBCMFEʯͷঢ়ଶ͕ཉ͍͠ ന͍Ϙλϯ ੺͍Ϙλϯ ੨͍Ϙλϯ ޫΔ ΁͜Ή ൒ಁ໌
110. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ ,44ಠࣗͷઆ໌ॻ͖
111. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ // ## デフォルトボタン // 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. ίϝϯτΞ΢τ
112. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ // ## デフォルトボタン // 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. ϚʔΫμ΢ϯͰઆ໌
113. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ // ## デフォルトボタン // 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. ൪߸
114. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ // ## デフォルトボタン // 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. όϦΤʔγϣϯ
115. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ ϘλϯͷWJFX ͨͬͨޒߦ͚ͩ IUNMIBNM
     ͱ͍͏໊લΛ෇͚Δ
116. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ ϘλϯͷWJFX ͨͬͨޒߦ͚ͩ 4BTTϑΝΠϧʮʯͷαϯϓϧͳͷͰɺ 
     LTT@CMPDL
     
     EP
     
     
     Λ෇͚Δ
117. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ = 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
     ͱ͸ʁ
118. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ <p class="buttons"> <a href="#" class="button $modifier_class">aタグのボタン</a> <input type= "button" value="inputタグのボタン" class="button $modifier_class"> <button type= "button" value="buttonタグのボタン" class="button $modifier_class"> </p> )5.- NPEJpFS@DMBTT
     ͱ͸ʁ
119. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ // ## デフォルトボタン // 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. όϦΤʔγϣϯ
120. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ .primary .primary:hover .primary:active .primary:disabled .danger .danger:hover .danger:active .danger:disabled .blue .blue:hover .blue:active .blue:disabled NPEJpFS@DMBTT ࣗಈͰೖΕͯ͘ΕΔ
121. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ <p class="buttons"> <a class="button danger" href="#">aタグのボタン</a> <input class="button danger" type="button" value="inputタグのボタン"> <button class="button danger" type="button">buttonタグのボタン</button> </p> <p class="buttons"> <a class="button danger pseudo-class-hover" href="#">aタグのボタン</a> <input class="button danger pseudo-class-hover" type="button" value="inputタグのボタン"> <button class="button danger pseudo-class-hover" type="button">buttonタグのボタン</button> </p> <p class="buttons"> <a class="button danger pseudo-class-active" href="#">aタグのボタン</a> <input class="button danger pseudo-class-active" type="button" value="inputタグのボタン"> <button class="button danger pseudo-class-active" type="button">buttonタグのボタン</button> </p> ͜͏ॻ͖ͩ͞ΕΔ
122. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ .primary .primary:hover .primary:active .primary:disabled .danger .danger:hover .danger:active .danger:disabled .blue .blue:hover .blue:active .blue:disabled WJFX͸͜Ε͚ͩͳͷʹ όϦΤʔγϣϯ෼͚ͩϧʔϓ
123. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ όϦΤʔγϣϯ͸͜Μͳײ͡Ͱදࣔ͞ΕΔ
124. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ ٖࣅΫϥεͷݟͨ໨΋ݟΕΔʂ
125. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ ٖࣅΫϥεͷݟͨ໨΋ݟΕΔʂ σβΠφʔͱͯ͠΋ҰཡͰݟΕΔͷ͸݁ߏศར
126. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ w σβΠφʔͰͳͯ͘΋Ϙλϯͷݟͨ໨Λ࣮૷Ͱ͖ΔΑ͏ʹͳΔ w Ϙλϯʹؔ͢ΔσβΠφʔͷҙਤ͕ڞ༗Ͱ͖Δ w ͬͪ͜͸Ϙλϯ੨͍ͷʹɺͳΜͰͬͪ͜͸྘ͳͷʁͱ͍͏Α͏ͳ͜ ͱ͕͋ͬͨࡍɺ΋ͦ͠Ε͕୯ͳΔσβΠφʔͷؾ·͙ΕͩͬͨΒɺ ʮͪΌΜͱߟ͑ͯσβΠϯ͠ΖʯͱಥͬࠐΊΔ w ػೳͱݟͨ໨͕Ұகͯ͠࢖͍উख͕޲্ ϘλϯͷϧʔϧΛνʔϜͰڞ༗͢Δ͜ͱͷϝϦοτ
127. ·ͱΊ w ύλʔϯϥΠϒϥϦ͕͋Δͱɺ͋Δఔ౓ͷݟͨ໨͸ΤϯδχΞ͚ͩ Ͱ࣮૷Ͱ͖ΔͷͰɺϓϩτλΠϓ
     ˠ
     ݕূͷεϐʔυ্͕͕Δ w ύλʔϯϥΠϒϥϦ͕͋Δͱɺͳͥͦͷݟͨ໨ͳͷ͔ʁσβΠφʔ ͷҙਤΛνʔϜͰڞ༗͢Δ͜ͱ͕Ͱ͖Δ w ύλʔϯϥΠϒϥϦΛσβΠφʔ͚ͩͰಋೖ͢Δͷ͸݁ߏෑډ͕ߴ ͍ͷͰΤϯδχΞͷڠྗ͕ඞཁ
128. ·ͱΊ w ύλʔϯϥΠϒϥϦ͕͋Δͱɺ͋Δఔ౓ͷݟͨ໨͸ΤϯδχΞ͚ͩ Ͱ࣮૷Ͱ͖ΔͷͰɺϓϩτλΠϓ
     ˠ
     ݕূͷεϐʔυ্͕͕Δ w ύλʔϯϥΠϒϥϦ͕͋Δͱɺͳͥͦͷݟͨ໨ͳͷ͔ʁσβΠφʔ ͷҙਤΛνʔϜͰڞ༗͢Δ͜ͱ͕Ͱ͖Δ w ύλʔϯϥΠϒϥϦΛσβΠφʔ͚ͩͰಋೖ͢Δͷ͸݁ߏෑډ͕ߴ ͍ͷͰΤϯδχΞͷڠྗ͕ඞཁ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ