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

Ca8b183e3e8cf320dbd76b241bbd6eba?s=47 machida
September 21, 2013

 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

Ca8b183e3e8cf320dbd76b241bbd6eba?s=128

machida

September 21, 2013
Tweet

Transcript

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

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

  3. ා࿩ w ා͍࿩͕࿩ແྉͰಡΊΔ w εϚϗɺ1$ͰಡΊΔ w ϗϥʔອը΋ແྉͰಡΊΔ w ΞϓϦɺ8FC͔ΒಡΊΔ w

    3VCZPO3BJMTͰ։ൃ 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/ ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ ,BMFJ4UZMFHVJEF w #BDLCPOFKT w 5XJUUFS#PPUTUSBQͬΆ͍ݟͨ໨ w 3BJMTͷ(FN͋Γ w

    $44ɺ-&44ରԠ w 4BTT͸ະରԠ
  54. http://kaleistyleguide.com/ ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ ,BMFJ4UZMFHVJEF 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 ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ 1BUUFSO1SJNFS 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 αϯϓϧ͕4BTT4ZOUBY w ݟͨ໨͕͓͠ΌΕ
  74. ,44ͷ೿ੜͷҰͭ /,44/BEBSFJ,44 w /BEBSFJͱ͍͏ձ͕ࣾΧελϚΠ ζͨ͠,44 w WJFX͕)BNMରԠ w 3BJMT༻͔͠ͳ͍ w

    αϯϓϧ͕4BTT4ZOUBY w ݟͨ໨͕͓͠ΌΕ http://nadarei.co/nkss-rails/
  75. /,44/BEBSFJ,44 w /BEBSFJͱ͍͏ձ͕ࣾ࡞ͬͨ,44 w WJFX͕)BNMରԠ w 3BJMTͷ(FNͷΈ w αϯϓϧ͕4BTT4ZOUBY w

    ݟͨ໨͕͓͠ΌΕ /,44ɺ܅ʹܾΊͨʂ ,44ͷ೿ੜͷҰͭ http://nadarei.co/nkss-rails/
  76. ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ /,44/BEBSFJ,44 w /BEBSFJͱ͍͏ձ͕ࣾ࡞ͬͨ,44 w WJFX͕)BNMରԠ w 3BJMTͷ(FNͷΈ w αϯϓϧ͕4BTT4ZOUBY

    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

    αϯϓϧ͕4BTT4ZOUBY w ݟͨ໨͕͓͠ΌΕ ொా͸͜ΕʹܾΊ·ͨ͠ʂ ίϯτϦϏϡοͨ ͜ͷબ୒͕ࢥΘ͵མͱ݀ͩ͠ͱ஌Βͣʹʜ
  78. https://github.com/adactio/Pattern-Primer ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ /,44/BEBSFJ,44 w /BEBSFJͱ͍͏ձ͕ࣾ࡞ͬͨ,44 w WJFX͕)BNMରԠ w 3BJMTͷ(FNͷΈ w

    αϯϓϧ͕4BTT4ZOUBY 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

    αϯϓϧ͕4BTT4ZOUBY 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

    αϯϓϧ͕4BTT4ZOUBY 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@CMPDLEP Λ෇͚Δ

  94. ύλʔϯϥΠϒϥϦΛ࡞Δ ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢ Ͳͷ4BTTͷαϯϓϧͳͷ͔Λ 4BTTϑΝΠϧʹ෇͚ͨ൪߸Ͱ ࢦఆ͢Δɻ 4BTTϑΝΠϧʮʯͷ αϯϓϧͰ͢Αɺͱ͍͏ҙຯͰɺ LTT@CMPDLEP Λ෇͚Δ Ͱɺ͜ͷ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@CMPDLEPΛ෇͚Δ

  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 ύλʔϯϥΠϒϥϦΛσβΠφʔ͚ͩͰಋೖ͢Δͷ͸݁ߏෑډ͕ߴ ͍ͷͰΤϯδχΞͷڠྗ͕ඞཁ

    ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ