$30 off During Our Annual Pro Sale. View Details »

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

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

machida

September 21, 2013
Tweet

More Decks by machida

Other Decks in Design

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. ౦ژͷ1%͔Βདྷ·ͨ͠

    View Slide

  6. ౦ژͷ1%͔Βདྷ·ͨ͠

    View Slide

  7. ౦ژͷ1%͔Βདྷ·ͨ͠

    View Slide

  8. ౦ژͷ1%͔Βདྷ·ͨ͠

    View Slide

  9. ౦ژͷ1%͔Βདྷ·ͨ͠

    View Slide

  10. ౦ژͷ1%͔Βདྷ·ͨ͠

    View Slide

  11. ౦ژͷ1%͔Βདྷ·ͨ͠

    View Slide

  12. ౦ژͷ1%͔Βདྷ·ͨ͠

    View Slide

  13. ౦ژͷ1%͔Βདྷ·ͨ͠

    View Slide

  14. ౦ژͷ1%͔Βདྷ·ͨ͠

    View Slide

  15. ౦ژͷ1%͔Βདྷ·ͨ͠
    1%ͬͯ͜Μͳײ͡

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. ࠷ۙͷ։ൃελΠϧ
    ։ൃνʔϜ
    ΤϯδχΞ
    σβΠφʔ
    Ճೖ

    View Slide

  20. w σβΠφʔ΋ϩʔΧϧʹ؀ڥΛͭ͘Δ
    w σβΠφʔ΋όʔδϣϯ؅ཧʹೖΔ
    w σβΠφʔ΋Ұॹʹ࢓༷ʢ໰୊ͷղܾखஈʣΛߟ͑Δ
    ࠷ۙͷ։ൃελΠϧ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. ࠷ۙͷ։ൃελΠϧ
    ϓϩτλΠϓ
    ϑΟʔυόοΫ
    ࣍ͷετʔϦʔ΁
    ܁Γฦ͢
    ϦϦʔε
    ໰୊͸ղܾ͞Εͨʁ
    ϦϦʔε0,ʁ
    ໰୊Λݟ͚ͭΔ
    ܁Γฦ͢
    σβΠϯʂ
    σβΠϯʂ
    σβΠϯʂ
    σβΠϯʂ

    View Slide

  25. ࠷ۙͷ։ൃελΠϧ
    ϓϩτλΠϓ
    ϑΟʔυόοΫ
    ࣍ͷετʔϦʔ΁
    ܁Γฦ͢
    ϦϦʔε
    ໰୊͸ղܾ͞Εͨʁ
    ϦϦʔε0,ʁ
    ໰୊Λݟ͚ͭΔ
    ܁Γฦ͢
    [JQೲ඼ʜ

    View Slide

  26. ࠷ۙͷ։ൃελΠϧ
    ϓϩτλΠϓ
    ϑΟʔυόοΫ
    ࣍ͷετʔϦʔ΁
    ܁Γฦ͢
    ϦϦʔε
    ໰୊͸ղܾ͞Εͨʁ
    ϦϦʔε0,ʁ
    ໰୊Λݟ͚ͭΔ
    ܁Γฦ͢
    [JQೲ඼ʜ
    ͸ɺաڈͷ࿩

    View Slide

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

    View Slide

  28. 5XJUUFS#PPUTUSBQͷొ৔

    View Slide

  29. 5XJUUFS#PPUTUSBQͷొ৔
    ΤϯδχΞ
    $44Λॻ͔ͳͯ͘΋σβΠϯ
    ͕ೖΔʂ
    ศར͗ͯ͢Ϡό͍ΜͰ͚͢Ͳ

    View Slide

  30. 5XJUUFS#PPUTUSBQͷొ৔

    View Slide

  31. 5XJUUFS#PPUTUSBQͷొ৔
    ΤϯδχΞͷؒͰେώοτʂ

    View Slide

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

    View Slide

  33. 5XJUUFS#PPUTUSBQͷొ৔
    ΤϯδχΞ
    $44Λॻ͔ͳͯ͘΋σβΠϯ͕ೖΕΒ
    ΕΔʂ
    ͪΐͬͱ͜Εɺศར͗ͯ͢Ϡό͍ΜͰ
    ͚͢Ͳʂ
    ΤϯδχΞ͸ؾ෇͍ͨ

    View Slide

  34. 5XJUUFS#PPUTUSBQͷొ৔
    ΤϯδχΞ
    $44Λॻ͔ͳͯ͘΋σβΠϯ͕ೖΕΒ
    ΕΔʂ
    ͪΐͬͱ͜Εɺศར͗ͯ͢Ϡό͍ΜͰ
    ͚͢Ͳʂ
    w 5XJUUFS#PPUTUSBQతͳ΋ͷΛϓϩδΣΫ
    τͰ༻ҙ͢Ε͹ɺ͋Δఔ౓͸σβΠφʔ
    ແ͠ͰϓϩτλΠϓ͕࡞ΕΔͷͰ͸ʁ
    ΤϯδχΞ͸ؾ෇͍ͨ

    View Slide

  35. 5XJUUFS#PPUTUSBQͷొ৔
    ΤϯδχΞ
    $44Λॻ͔ͳͯ͘΋σβΠϯ͕ೖΕΒ
    ΕΔʂ
    ͪΐͬͱ͜Εɺศར͗ͯ͢Ϡό͍ΜͰ
    ͚͢Ͳʂ
    ΤϯδχΞ͸ؾ෇͍ͨ
    ϓϩτλΠϓ
    ϑΟʔυόοΫ
    ࣍ͷετʔϦʔ΁
    ϦϦʔε
    ໰୊Λݟ͚ͭΔ
    ܁Γฦ͢

    View Slide

  36. 5XJUUFS#PPUTUSBQͷొ৔
    ΤϯδχΞ
    $44Λॻ͔ͳͯ͘΋σβΠϯ͕ೖΕΒ
    ΕΔʂ
    ͪΐͬͱ͜Εɺศར͗ͯ͢Ϡό͍ΜͰ
    ͚͢Ͳʂ
    ΤϯδχΞ͸ؾ෇͍ͨ
    ϓϩτλΠϓ
    ϑΟʔυόοΫ
    ࣍ͷετʔϦʔ΁
    ϦϦʔε
    ໰୊Λݟ͚ͭΔ
    ߴ଎Խ

    View Slide

  37. 5XJUUFS#PPUTUSBQͷొ৔
    ΤϯδχΞ
    $44Λॻ͔ͳͯ͘΋σβΠϯ͕ೖΕΒ
    ΕΔʂ
    ͪΐͬͱ͜Εɺศར͗ͯ͢Ϡό͍ΜͰ
    ͚͢Ͳʂ
    ΤϯδχΞ͸ؾ෇͍ͨ
    5XJUUFS#PPUTUSBQతͳ
    ΍ͭ࡞ͬͯΑ

    View Slide

  38. 5XJUUFS#PPUTUSBQͷొ৔
    ΤϯδχΞ
    $44Λॻ͔ͳͯ͘΋σβΠϯ͕ೖΕΒ
    ΕΔʂ
    ͪΐͬͱ͜Εɺศར͗ͯ͢Ϡό͍ΜͰ
    ͚͢Ͳʂ
    ΤϯδχΞ͸ؾ෇͍ͨ
    ͓ɺ͓͏ʜ
    5XJUUFS#PPUTUSBQతͳ
    ΍ͭ࡞ͬͯΑ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  42. #PPUTUSBQతͳ΋ͷͱ͸ʁ
    w ݟຊʹ͋Δ௨ΓʹϚʔΫΞοϓΛͯ͠DMBTTΛ෇͚Δͱɺͦͷݟͨ໨
    ͕࠶ݱ͞ΕΔ΋ͷ
    w ͲͷϖʔδͰ࢖ͬͯ΋ɺݟຊ௨Γʹ΍Ε͹ͦͷݟͨ໨͕࠶ݱ͞ΕΔ
    ΋ͷʢ$44Λॻ͖଍͢ඞཁ͕ͳ͍ʣ
    w ଞͷϖʔδͰग़͖ͯͨύʔπ΍ɺΑ͋͘Δύʔπ͕͋Β͔͡Ίݟຊ
    ʹ༻ҙ͞Ε͍ͯΔ΋ͷ
    w ࢖͍ํ΍ҙਤʹ͍ͭͯͷઆ໌͕ͪΌΜͱݟຊʹॻ͔Ε͍ͯΔ΋ͷ
    ݟຊʢύλʔϯϥΠϒϥϦʣ͕͋Δ͜ͱ͕ඞཁ

    View Slide

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

    View Slide

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

    View Slide

  45. https://github.com/styleguide/css
    (JUIVC
    ୳ͨ͠Β݁ߏ͋ͬͨύλʔϯϥΠϒϥϦ

    View Slide

  46. http://www.starbucks.com/static/reference/styleguide/
    ελʔόοΫε
    ୳ͨ͠Β݁ߏ͋ͬͨύλʔϯϥΠϒϥϦ

    View Slide

  47. http://getbootstrap.com/css/
    5XJUUFS#PPUTUSBQ
    ୳ͨ͠Β݁ߏ͋ͬͨύλʔϯϥΠϒϥϦ

    View Slide

  48. https://github.com/vincelane/disqus-style
    %*4264
    ୳ͨ͠Β݁ߏ͋ͬͨύλʔϯϥΠϒϥϦ

    View Slide

  49. http://foundation.zurb.com/docs/
    'PVOEBUJPO
    ୳ͨ͠Β݁ߏ͋ͬͨύλʔϯϥΠϒϥϦ

    View Slide

  50. http://showcase.nuxeo.com/nuxeo/styleGuide/
    OVYFP
    ୳ͨ͠Β݁ߏ͋ͬͨύλʔϯϥΠϒϥϦ

    View Slide

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

    View Slide

  52. http://jacobrask.github.io/styledocco/
    ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ
    4UZMF%PDDP
    w /PEFKT
    w 4BTTɺ-FTTɺ4UZMVTʹରԠ
    w ݁ߏ࢖ΘΕͯΔ

    View Slide

  53. http://kaleistyleguide.com/
    ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ
    ,BMFJ4UZMFHVJEF
    w #BDLCPOFKT
    w 5XJUUFS#PPUTUSBQͬΆ͍ݟͨ໨
    w 3BJMTͷ(FN͋Γ
    w $44ɺ-&44ରԠ
    w 4BTT͸ະରԠ

    View Slide

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

    View Slide

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

    View Slide

  56. https://github.com/adactio/Pattern-Primer
    ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ
    1BUUFSO1SJNFS
    w 1)1൛ɺ/PEFKT൛ɺ3VCZ൛
    ʢ4JOBUSBʣɺ+FLZMM൛͕͋Δ

    View Slide

  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Ͱಈ͘

    View Slide

  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͕Α͛͞
    ˞ொాʹͱͬͯ͸

    View Slide

  59. ,44ͱ͸ʁ

    View Slide

  60. ,44ͱ͸ʁ
    http://warpspire.com/kss/
    ,44ͷ࢖͍ํ͸
    ຊՈͷϖʔδʹ͋Γ·͢

    View Slide

  61. ,44ͱ͸ʁ
    https://github.com/styleguide/css
    ,44ͷྫͱ͍͑͹
    (JUIVC

    View Slide

  62. https://github.com/styleguide/css

    View Slide

  63. w ߲໨͝ͱʹ൪߸͕෇͍ͯΔ

    View Slide

  64. w ߲໨͝ͱʹ൪߸͕෇͍ͯΔ

    View Slide

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

    View Slide

  66. ύʔπͷ൪߸

    View Slide

  67. ύʔπͷઆ໌

    View Slide

  68. ύʔπͷݟͨ໨

    View Slide

  69. ύʔπͷόϦΤʔγϣϯ

    View Slide

  70. ύʔπͷϚʔΫΞοϓ

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  76. ύλʔϯϥΠϒϥϦΛ࡞Δπʔϧ
    /,44/BEBSFJ,44
    w /BEBSFJͱ͍͏ձ͕ࣾ࡞ͬͨ,44
    w WJFX͕)BNMରԠ
    w 3BJMTͷ(FNͷΈ
    w αϯϓϧ͕4BTT4ZOUBY
    w ݟͨ໨͕͓͠ΌΕ
    ொా͸͜ΕʹܾΊ·ͨ͠ʂ
    ௐࢠʹ৐ͬͯ
    ίϯτϦϏϡοͨ
    http://nadarei.co/nkss-rails/

    View Slide

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

    View Slide

  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ͱͯ͠ެ։͠Α͏͔
    ͳ

    View Slide

  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ͱͯ͠ެ։͠Α͏͔
    ͳ
    ۙ͘ʹΤϯδχΞ͕͍Δͬͯૉ੖Β͍͠

    View Slide

  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 => '[email protected]:machida/nkss-rails.git',
    :branch => "fjord-nkss-rails"
    मਖ਼ͨ͠ͷ͸ͪ͜Β

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  84. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    ͜͜ʹ
    ,44ಠࣗͷઆ໌ॻ͖Λૠೖ

    View Slide

  85. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    ৭ͷϧʔϧ

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

    OPOF

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

    View Slide

  86. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    ৭ͷϧʔϧ

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

    OPOF

    4UZMFHVJEF
    ,44ಠࣗͷઆ໌ॻ͖ͱ͸ίϨ
    ίϝϯτΞ΢τ

    View Slide

  87. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    ৭ͷϧʔϧ

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

    OPOF

    4UZMFHVJEF
    ,44ಠࣗͷઆ໌ॻ͖ͱ͸ίϨ
    ϚʔΫμ΢ϯͰઆ໌Λॻ͘

    View Slide

  88. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    ৭ͷϧʔϧ

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

    OPOF

    4UZMFHVJEF
    ,44ಠࣗͷઆ໌ॻ͖ͱ͸ίϨ
    ͋ͱͰઆ໌͠·͢

    View Slide

  89. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    ৭ͷϧʔϧ

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

    OPOF

    4UZMFHVJEF
    ,44ಠࣗͷઆ໌ॻ͖ͱ͸ίϨ
    4UZMFHVJEFʴ൪߸Λ෇͚Δ

    View Slide

  90. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    ॻ͖଍ͨ͠

    View Slide

  91. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    ͍ͭͮͯɺઌ΄ͲͷελΠϧ
    ΛݟͤΔͨΊͷαϯϓϧͷ
    WJFXΛ࡞੒

    View Slide

  92. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    IUNMIBNMͱ͍͏໊લ
    Λ෇͚Δ

    View Slide

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

    View Slide

  94. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    Ͳͷ4BTTͷαϯϓϧͳͷ͔Λ
    4BTTϑΝΠϧʹ෇͚ͨ൪߸Ͱ
    ࢦఆ͢Δɻ
    4BTTϑΝΠϧʮʯͷ
    αϯϓϧͰ͢Αɺͱ͍͏ҙຯͰɺ
    LTT@CMPDLEP
    Λ෇͚Δ
    Ͱɺ͜ͷWJFXʹΞΫηε͢Δͱʜ

    View Slide

  95. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢

    View Slide

  96. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    ͋Βɺૉఢʂ

    View Slide

  97. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    4BTTϑΝΠϧʹ෇͚ͨ൪߸

    View Slide

  98. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    ϚʔΫμ΢ϯͰॻ͍ͨઆ໌

    View Slide

  99. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    )".-Ͱॻ͍ͨWJFX

    View Slide

  100. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    )".-Ͱॻ͍ͨϚʔΫΞοϓ

    View Slide

  101. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    )".-Ͱॻ͍ͨϚʔΫΞοϓ
    ख࡞ۀͰ࡞Δͱ໘౗ͳͷΛࣗಈੜ੒

    View Slide

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

    View Slide

  103. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    HSFFO͸҆શɺ੒ޭΛϢʔβʔʹ఻͑Δͱ͖ʹ࢖͏ʢTVDDFTTʣ
    ZFMMPX͸஫ҙΛϢʔβʔʹ఻͑Δͱ͖ʹ࢖͏ʢVOLOPXOʣ
    SFE͸Ϣʔβʔʹܯࠂ͢Δͱ͖ʹ࢖͏ʢFSSPSʣ
    HSBZ͸ࡁΈɺෆՄೳΛ఻͑Δͱ͖ʹ࢖͏ʢEJTBCMFʣ
    Έ͍ͨͳײ͡Ͱɺ
    ࢖͍ํΛॻ͍ͨΓ͢ΔͱσβΠφʔͷҙਤΛ
    νʔϜ಺Ͱڞ༗Ͱ͖Δ͠ɺ
    ৭ͷϧʔϧΛνʔϜͰڞ༗͜ͱͷϝϦοτ

    View Slide

  104. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    HSFFO͸҆શɺ੒ޭΛϢʔβʔʹ఻͑Δͱ͖ʹ࢖͏ʢTVDDFTTʣ
    ZFMMPX͸஫ҙΛϢʔβʔʹ఻͑Δͱ͖ʹ࢖͏ʢVOLOPXOʣ
    SFE͸Ϣʔβʔʹܯࠂ͢Δͱ͖ʹ࢖͏ʢFSSPSʣ
    HSBZ͸ࡁΈɺෆՄೳΛ఻͑Δͱ͖ʹ࢖͏ʢEJTBCMFʣ
    ͦ͏͍͏΋ͷΛॻ͘৔ॴ͕͋Δ͜ͱͰɺ
    ͦΕΛॻ͘Α͏ʹσβΠφʔʹ஫จ͕Ͱ͖Δ
    ৭ͷϧʔϧΛνʔϜͰڞ༗͜ͱͷϝϦοτ

    View Slide

  105. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    HSFFO͸҆શɺ੒ޭΛϢʔβʔʹ఻͑Δͱ͖ʹ࢖͏ʢTVDDFTTʣ
    ZFMMPX͸஫ҙΛϢʔβʔʹ఻͑Δͱ͖ʹ࢖͏ʢVOLOPXOʣ
    SFE͸Ϣʔβʔʹܯࠂ͢Δͱ͖ʹ࢖͏ʢFSSPSʣ
    HSBZ͸ࡁΈɺෆՄೳΛ఻͑Δͱ͖ʹ࢖͏ʢEJTBCMFʣ
    ٯʹΤϯδχΞ͕ؒҧͬͨ࢖͍ํΛͨ͠Γɺ
    ࢖͍ํͷ࣭໰Λड͚ͨΓ͢Δ͚ͩ
    υΩϡϝϯτΛڧԽ͞Ε͍ͯ͘
    υΩϡϝϯτͲ͏ҭ͔ͭ͸νʔϜ࣍ୈ
    ৭ͷϧʔϧΛνʔϜͰڞ༗͜ͱͷϝϦοτ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  110. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    ,44ಠࣗͷઆ໌ॻ͖

    View Slide

  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.
    ίϝϯτΞ΢τ

    View Slide

  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.
    ϚʔΫμ΢ϯͰઆ໌

    View Slide

  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. ൪߸

    View Slide

  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. όϦΤʔγϣϯ

    View Slide

  115. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    ϘλϯͷWJFX
    ͨͬͨޒߦ͚ͩ
    IUNMIBNMͱ͍͏໊લΛ෇͚Δ

    View Slide

  116. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    ϘλϯͷWJFX
    ͨͬͨޒߦ͚ͩ
    4BTTϑΝΠϧʮʯͷαϯϓϧͳͷͰɺ
    LTT@CMPDLEPΛ෇͚Δ

    View Slide

  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ͱ͸ʁ

    View Slide

  118. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢

    aタグのボタン



    )5.-
    NPEJpFS@DMBTTͱ͸ʁ

    View Slide

  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. όϦΤʔγϣϯ

    View Slide

  120. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    .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

  121. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢

    aタグのボタン

    buttonタグのボタン


    aタグのボタン

    buttonタグのボタン


    aタグのボタン

    buttonタグのボタン

    ͜͏ॻ͖ͩ͞ΕΔ

    View Slide

  122. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    .primary
    .primary:hover
    .primary:active
    .primary:disabled
    .danger
    .danger:hover
    .danger:active
    .danger:disabled
    .blue
    .blue:hover
    .blue:active
    .blue:disabled
    WJFX͸͜Ε͚ͩͳͷʹ
    όϦΤʔγϣϯ෼͚ͩϧʔϓ

    View Slide

  123. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    όϦΤʔγϣϯ͸͜Μͳײ͡Ͱදࣔ͞ΕΔ

    View Slide

  124. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    ٖࣅΫϥεͷݟͨ໨΋ݟΕΔʂ

    View Slide

  125. ύλʔϯϥΠϒϥϦΛ࡞Δ
    ·ͣ͸৭ͷύλʔϯϥΠϒϥϦΛ࡞ͬͯΈ·͢
    ٖࣅΫϥεͷݟͨ໨΋ݟΕΔʂ
    σβΠφʔͱͯ͠΋ҰཡͰݟΕΔͷ͸݁ߏศར

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide