Save 37% off PRO during our Black Friday Sale! »

レスポンシブデザインに見受けられる4つの段階 ~実現のためのZurb Foundation~

95af22754ffc6e8d98e72be488ec1cca?s=47 kohki-shikata
October 29, 2016

レスポンシブデザインに見受けられる4つの段階 ~実現のためのZurb Foundation~

CSS Talk vol.1での発表内容です

95af22754ffc6e8d98e72be488ec1cca?s=128

kohki-shikata

October 29, 2016
Tweet

Transcript

  1. Ϩεϙϯγϒɺ໨ࢦ͢΂͖̐ͭͷஈ֊ ʙ࣮ݱͷͨΊͷZurb Foundationʙ 2016/10/29ɹCSS Talk vol.1 @ TAM Coworking

  2. ࣗݾ঺հ ͔ͨ͜͠͏͖ גࣜձࣾND&I ϓϥϯφʔ ※࠷ۙɺ΄ͱΜͲιʔείʔυΛॻ͍ͯ·ͤΜ

  3. ࣗݾ঺հ ͔ͨ͜͠͏͖ גࣜձࣾND&I ϓϥϯφʔ concrete5Ҋ݅͹͔Γ΍ͬͯ·͢ 10% 90% concrete5 ͦͷଞ

  4. ࣗݾ঺հ ͔ͨ͜͠͏͖ גࣜձࣾND&I ϓϥϯφʔ ϑϦʔϥϯεͷάϥϑΟοΫσβΠφʔ →ςϨϏہͷCGσβΠφʔ →ϑϦʔϥϯεͰWeb&ө૾ͷσβΠφʔ →๏ਓԽʴconcrete5ΠϯςάϨʔτύʔτφʔ →ݱ৬ͷձࣾʹJOIN ܦྺ

    concrete5Ҋ݅͹͔Γ΍ͬͯ·͢ झຯɿమಓɾϐΞϊ
  5. ࣗݾ঺հ ͔ͨ͜͠͏͖ גࣜձࣾND&I ϓϥϯφʔ ϑϦʔϥϯεͷάϥϑΟοΫσβΠφʔ →ςϨϏہͷCGσβΠφʔ →ϑϦʔϥϯεͰWeb&ө૾ͷσβΠφʔ →๏ਓԽʴconcrete5ΠϯςάϨʔτύʔτφʔ →ݱ৬ͷձࣾʹJOIN ܦྺ

    concrete5Ҋ݅͹͔Γ΍ͬͯ·͢ ࠷ۙɺ݁ࠗ͠·ͨ͠ ࠺͔Β͸ʮϫΠ͘Μʯͱݺ͹Εͯ·͢ झຯɿమಓɾϐΞϊ
  6. ΞδΣϯμ ϨεϙϯγϒσβΠϯʹ ݟड͚ΒΕΔ̐ͭͷஈ֊ Zurb Foundationʹ͍ͭͯ

  7. ࠓ೔͓࿩͢Δ͜ͱͷલఏ WebαΠτʢ΄͒Ή΃͐͡ʣ Λલఏʹ࿩͠·͢ɻ SPAͱ͔ɺ WebγεςϜͷ࿩Ͱ͸͋Γ·ͤΜɻ ͦ͏͍͏ͷΛظ଴͞Ε͍ͯͨํɺ ΰϝϯφαΠ

  8. ࠓ೔͓࿩͢Δ͜ͱͷલఏ WebαΠτʢ΄͒Ή΃͐͡ʣ Λલఏʹ࿩͠·͢ɻ ͋ͱɺͪΐͬͱJSͷ࿩΋ೖΓ·͢ɻ Pure CSS͡Όͳͯ͘ɺΰϝϯͶʂ

  9. ϨεϙϯγϒσβΠϯͬͯʁ • ʮαΠτΛεϚϗରԠ͢ΔͨΊͷٕज़ʯ • ʮϫϯιʔεɾϚϧνϢʔεͰ޻਺࡟ݮͰ͖Δʯ • ʮϝσΟΞΫΤϦΛͨ͘͞Μ࡞Ε͹ɺ ɹεϚϗ͚ͩ͡Όͳ͘ɺλϒϨοτʹ΋ରԠͰ͖Δʯ • ʮGoogle͕ਪ঑ͯ͠ΔΜͩΑͶʯ

    • ʮͦͷҰํͰɺσβΠϯʹ੍໿͕…ʯ • ʮιʔεͷංେԽ͕…ʯ
  10. ϨεϙϯγϒσβΠϯɺ͜͜Ͱͷఆٛ 8FCαΠτΛ εϚϗରԠͤ͞ΔͨΊͷΞϓϩʔνٕज़ 2. CSSϝσΟΞΫΤϦΛ֩ͱ͢Δ 3. ϫϯιʔεɾϚϧνϢʔε

  11. εϚϗରԠ΁ͷΞϓϩʔνٕज़ • UA෼ذ • αʔόʔαΠυ • ϛυϧ΢ΣΞͰߦ͏ ʢPHP΍Rubyʣ • WebαʔόʔͰߦ͏

    ʢ.htaccess౳ʣ • ΫϥΠΞϯταΠυʢJSʣ • Ϩεϙϯγϒʢը໘෯ʣ Ί ͬ ͪ Ό ͍ ͬ ͺ ͍ ͋ Δ Ͷ ʂ ࠓ೔͸΋ͪΖΜͬͪ͜ͷ࿩ʂ
  12. ϨεϙϯγϒσβΠϯʹ ݟड͚ΒΕΔ̐ͭͷஈ֊ ϑΣʔζ1 ϑΣʔζ2 ϑΣʔζ3 ϑΣʔζ4

  13. ϨεϙϯγϒσβΠϯʹ ݟड͚ΒΕΔ̐ͭͷஈ֊ ϑΣʔζ1 ϑΣʔζ2 ϑΣʔζ3 ϑΣʔζ4 μϝϙϯγϒ

  14. μϝϙϯγϒͷಛ௃ • ίϯςϯπ͕ը໘͔Β͸Έग़͢ɻϨΠΞ΢τ͔Β͸Έग़͢ɻ • ίϯςϯπಉ͕࢜ॏͳΔɻݟ͑ͳ͍෦෼͕ੜ͡Δ • ίϯςϯπ΍ը૾ͷαΠζ͕ෆࣗવʹେ͖͘ͳͬͨΓখ͘͞ͳͬͨΓ͢Δ • ίϯςϯπ΍ը૾ͷΞεϖΫτൺ͕ਖ਼͘͠࠶ݱ͞Εͳ͍

  15. ෋࢜ࢁʹొΔͨ Ίʹඞཁͳͷ ಓ۩"NB[POฤ ެ։೔ɿ ,PILJ ෆମࡋ

  16. ෋࢜ࢁʹొΔͨ Ίʹඞཁͳͷ ಓ۩"NB[POฤ ެ։೔ɿ ,PILJ ळɺͦΕ͸ొࢁͷقઅɻ෋࢜ࢁʹ௅ઓ͠Α͏ͱ ͢Δʹ͸ɺͪΐ͏Ͳ͍͍قઅͰ͢ΑͶɻࠓ೔ ͸ɺ෋࢜ࢁʹΞλοΫ͢ΔͨΊʹඞཁͳಓ۩Λ Amazon͚ͩͰἧ͑Δ͜ͱʹνϟϨϯδͯ͠Έ· ͠ΐ͏ʂɹωοτͰ΋ҙ֎ͱἧ͑Δ͜ͱ͕ग़དྷ

    ΔΜͰ͢Αʂ ෆମࡋ
  17. ෋࢜ࢁʹొΔͨ Ίʹඞཁͳͷ ಓ۩"NB[POฤ ެ։೔ɿ ,PILJ ෆମࡋ

  18. ෋࢜ࢁʹొΔͨ Ίʹඞཁͳͷ ಓ۩"NB[POฤ ެ։೔ɿ ,PILJ ෆମࡋ

  19. μϝϙϯγϒͷಛ௃ wJNQPSUBOUͷཛྷ wܧঝ͕ͱͬͪΒ͔ͬͯ͠·͍ɺ ϝϯςφϏϦςΟ͕ۃ୺ʹѱ͍ɻ

  20. ϨεϙϯγϒσβΠϯʹ ݟड͚ΒΕΔ̐ͭͷஈ֊ ϑΣʔζ1 ϑΣʔζ3 ϑΣʔζ4 μϝϙϯγϒ΍΍ϙϯγϒ ϑΣʔζ2

  21. ΍΍ϙϯγϒͷಛ௃ •ॎʹ߲໨͕௕͍άϩφϏ •̐֊૚ɺ.֊૚ͱԣʹ௕͘ͳΔύϯͣ͘Ϧετ •ͦ΋ͦ΋߲໨਺ͷଟ͍ɺ αΠτϚοϓతͳϑολʔάϩφϏɻ

  22. αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ Ωϟϯϖʔϯ ͓໰͍߹Θͤ ݸਓ৘ใอޢํ਑ ΞΫηε ࠾༻৘ใ 06-1234-5678

    ฏ೔9:00~18:00
  23. αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ͓໰͍߹Θͤ ݸਓ৘ใอޢํ਑ ΞΫηε ࠾༻৘ใ 06-1234-5678

    ฏ೔9:00~18:00 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻৘ใ ͓໰͍߹Θͤ ݸਓ৘ใอޢํ਑ 06-1234-5678 ฏ೔9:00~18:00
  24. ϨεϙϯγϒσβΠϯʹ ݟड͚ΒΕΔ̐ͭͷஈ֊ ϑΣʔζ1 ϑΣʔζ4 μϝϙϯγϒ ϑΣʔζ2 ΍΍ϙϯγϒ ϑΣʔζ3 ΄΅ϙϯγϒ

  25. ΍΍ϙϯγϒͷಛ௃ • άϩφϏ͸ϋϯόʔΨʔϝχϡʔ΍ΦϑΩϟϯόεʹ • ը૾͸৔߹ʹԠͯ͡ɺΞʔτσΟϨΫγϣϯͷৼΓ෼͚͕ͳ͞ΕΔ • PC࣌͸ϓϨʔϯͳςΩετ͕ͩɺSP࣌͸ɺݟग़͠ͰΞίʔσΟΦϯͳͲ ʢex. Wikipediaʣ

  26. αϯϓϧגࣜձࣾ औѻ੡඼ $43׆ಈ ͓໰͍߹Θͤ 06-1234-5678 ฏ೔9:00~18:00 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ

    $43׆ಈ ΞΫηε ࠾༻৘ใ ͓໰͍߹Θͤ ݸਓ৘ใอޢํ਑ ≡
  27. αϯϓϧגࣜձࣾ औѻ੡඼ $43׆ಈ ͓໰͍߹Θͤ 06-1234-5678 ฏ೔9:00~18:00 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ

    $43׆ಈ ΞΫηε ࠾༻৘ใ ͓໰͍߹Θͤ ݸਓ৘ใอޢํ਑ ≡ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻৘ใ ͓໰͍߹Θͤ ݸਓ৘ใอޢํ਑
  28. ϨεϙϯγϒσβΠϯʹ ݟड͚ΒΕΔ̐ͭͷஈ֊ ϑΣʔζ1 ϑΣʔζ4 μϝϙϯγϒ ϑΣʔζ2 ΍΍ϙϯγϒ ϑΣʔζ3 ΄΅ϙϯγϒ Ϩεϙϯγϒ

    ׬શͳΔ
  29. Ϩεϙϯγϒͷಛ௃ • ϒϨΠΫϙΠϯτؒͰத్൒୺ͳݟͨ໨ʹͳΔελΠϧͷղܾ ◦ ࡉ͔͘ϒϨΠΫϙΠϯτΛ੾Δ ◦ ྟ࣌ͷϝσΟΞΫΤϦΛ੾Δ • Ϛ΢εϗόʔ࣌ͷσβΠϯΛλονσόΠεͰ͸ผͷදݱͰΞϓϩʔνͤ͞ Δ

    ◦ ΋͸΍ը໘෯͚ͩͰ͸൑ఆͰ͖ͣɺೖྗσόΠεΛ൑அ͢Δ࢓૊Έ ʢJSʣ͕ඞཁ ׬શͳΔ
  30. Ϩεϙϯγϒͷಛ௃ • ϒϨΠΫϙΠϯτؒͰத్൒୺ͳݟͨ໨ʹͳΔελΠϧͷղܾ ◦ ࡉ͔͘ϒϨΠΫϙΠϯτΛ੾Δ ◦ ྟ࣌ͷϝσΟΞΫΤϦΛ੾Δ • Ϛ΢εϗόʔ࣌ͷσβΠϯΛλονσόΠεͰ͸ผͷදݱͰΞϓϩʔνͤ͞ Δ

    ◦ ΋͸΍ը໘෯͚ͩͰ͸൑ఆͰ͖ͣɺೖྗσόΠεΛ൑அ͢Δ࢓૊Έ ʢJSʣ͕ඞཁ ׬શͳΔ
  31. ͜͜·Ͱͷ·ͱΊ μϝϙϯγϒ ΍΍ϙϯγϒ ΄΅ϙϯγϒ Ϩεϙϯγϒ ೲ඼Ϩϕϧ × ̋ ̋ ˕

    ಛ௃ ෆମࡋ UI͕ ચ࿅͞Εͯͳ͍ ͍ΘΏΔ Ϩεϙϯγϒ Ϩεϙϯγϒ͚ͩͲ ؾ͕͖͍ͯΔ ඞཁͳ஌ࣝ CSSͷجຊతͳཧղ ࠨهʹಉ͡ ϝσΟΞΫΤϦɺJSɺ ϑϨʔϜϫʔΫͷཧղ ࠨهͷ͞ΒͳΔ ਂ͍ཧղ ސ٬ຬ଍౓ ೲ඼ෆՄ ௿ த ߴ ͜ͷ΁ΜΛ໨ࢦͦ͏
  32. ͱ͜ΖͰ…

  33. ૣ͘ؼΕͯ·͔͢ʁ

  34. ૣ͘ؼΕͯ·͔͢ʁ పఈతʹޮ཰Խ͢Δ

  35. ࢲͷ੍࡞ελϯε 1. ̋̋ͷ࠶ൃ໌͸͠ͳ͍ 2. ̋̋ͷݞʹͷΔ 3. ̋͸̋Λ݉ͶΔ

  36. ंྠͷ࠶ൃ໌͸͠ͳ͍ Don’t reinvent the wheel طʹ͋Δ΋ͷ͸ɺ͔̍Β࢖Θͳ͍ ૉࡐɺΞϦϞϊͷྲྀ༻ Φʔϓϯιʔεͷར༻͸ɺ ޮՌతͳंྠ࠶ൃ໌ͷճආ

  37. ࢲͷ੍࡞ελϯε 1. ंྠͷ࠶ൃ໌͸͠ͳ͍ 2. ̋̋ͷݞʹͷΔ 3. ̋͸̋Λ݉ͶΔ

  38. ڊਓͷݞʹͷΔ ੢༸ͷ͜ͱΘ͟ ઌਓͷੵΈॏͶͨൃݟʹج͍ͮͯ Կ͔Λൃݟ͢Δ͜ͱΛࢦ͢ Φʔϓϯιʔε͸ɺ Ғେͳʮڊਓʯ ۦஞͯ͠͸͍͚·ͤΜ

  39. ࢲͷ੍࡞ελϯε 1. ंྠͷ࠶ൃ໌͸͠ͳ͍ 2. ڊਓͷݞʹͷΔ 3. େ͸খΛ݉ͶΔ

  40. ͞Βʹ… ϓϦϓϩηοαͷ׆༻ HTMLɹ→ɹjade(pug) CSSɹɹ→ɹSass(SCSS) ෼ࢄίʔσΟϯά GitʢձࣾͰ͸BitbucketΛར༻ʣ 伱ؒʹۭ͍ͨ Ϧιʔεͷ౤ೖ͕Մೳ

  41. None
  42. WebαΠτ޲͖ͷػೳ͕࠷ॳ͔Β༻ҙ͞Ε͍ͯΔ EqualizerɺInterchangeɺBlockGrid Sass(SCSS)ͰͷΧελϚΠζ͕લఏ ϒϨΠΫϙΠϯτΛมߋՄೳ ϓϩδΣΫτਐߦதͷมߋ΋Մೳ ϒϨΠΫϙΠϯτ͸JSʹ౉͢͜ͱ΋Ͱ͖Δ window.resizeͰൃՐ͠ɺཁૉͷૢ࡞ͳͲ͕Մೳ

  43. WebαΠτ޲͖ͷػೳ͕࠷ॳ͔Β༻ҙ͞Ε͍ͯΔ EqualizerɺInterchangeɺBlockGrid Sass(SCSS)ͰͷΧελϚΠζ͕લఏ ϒϨΠΫϙΠϯτΛมߋՄೳ ϓϩδΣΫτਐߦதͷมߋ΋Մೳ ϒϨΠΫϙΠϯτ͸JSʹ౉͢͜ͱ΋Ͱ͖Δ window.resizeͰൃՐ͠ɺཁૉͷૢ࡞ͳͲ͕Մೳ ͨ͘͞Μ͋Γ͗ͯ͢ ޠΓਚͤ͘ͳ͍ʂ

  44. WebαΠτ޲͖ͷػೳ͕࠷ॳ͔Β༻ҙ͞Ε͍ͯΔ EqualizerɺInterchangeɺBlockGrid Sass(SCSS)ͰͷΧελϚΠζ͕લఏ ϒϨΠΫϙΠϯτΛมߋՄೳ ϓϩδΣΫτਐߦதͷมߋ΋Մೳ ϒϨΠΫϙΠϯτ͸JSʹ౉͢͜ͱ΋Ͱ͖Δ window.resizeͰൃՐ͠ɺཁૉͷૢ࡞ͳͲ͕Մೳ ৄ͘͠͸ ɹɹ࠙਌ձͰʂ

  45. ͪΐͬ͜ͱφϏ໰୊ 06-1234-5678 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻৘ใ ͓໰͍߹Θͤ

    ݸਓ৘ใอޢํ਑
  46. ͪΐͬ͜ͱφϏ໰୊ 06-1234-5678 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻৘ใ ͓໰͍߹Θͤ

    ݸਓ৘ใอޢํ਑ αϯϓϧגࣜձࣾ औѻ੡඼ $43׆ಈ ͓໰͍߹Θͤ ≡ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ͓໰͍߹Θͤ ΞΫηε ࠾༻৘ใ ݸਓ৘ใอޢํ਑
  47. ͪΐͬ͜ͱφϏ໰୊ 06-1234-5678 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻৘ใ ͓໰͍߹Θͤ

    ݸਓ৘ใอޢํ਑ αϯϓϧגࣜձࣾ औѻ੡඼ $43׆ಈ ͓໰͍߹Θͤ ≡ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ͓໰͍߹Θͤ ΞΫηε ࠾༻৘ใ ݸਓ৘ใอޢํ਑ μα͘ͳ͍ʁ
  48. ͪΐͬ͜ͱφϏ໰୊ 06-1234-5678 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻৘ใ ͓໰͍߹Θͤ

    ݸਓ৘ใอޢํ਑ αϯϓϧגࣜձࣾ औѻ੡඼ $43׆ಈ ͓໰͍߹Θͤ ≡ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻৘ใ ͓໰͍߹Θͤ ݸਓ৘ใอޢํ਑
  49. / 2. Breakpoints // -------------- $breakpoints: ( small: 0, medium:

    640px, large: 1024px, xlarge: 1200px, xxlarge: 1440px, ); $breakpoint-classes: (small medium large); _setting.scss
  50. // header navigation improvement when screen is small function get_replace()

    { var subnav = $('#subnav li'); $('#gnav-parent').append(subnav); $('#subnav').css("display","none"); // console.log("newSize: " + newSize); // console.log("cw: " + cw); } function get_replace_reverse() { var subnav = $('#gnav-parent .subnav- item'); $('#subnav ul').append(subnav); $('#subnav').css("display","block"); console.log("oldSize: " + oldSize); console.log("cw: " + cw); } w.on('changed.zf.mediaquery', function(event, newSize, oldSize) { var cw = Foundation.MediaQuery.current; if(newSize === "small") { get_replace(); } else if(oldSize === "small") { get_replace_reverse(); } }); w.load(function(){ var cw = Foundation.MediaQuery.current; if(cw === "small") { get_replace(); } }) app.jsʢ͜͏ॻ͘ͱɺͪΐͬ͜ͱφϏ͕εϚϗͷ࣌ʹάϩφϏʹೖΔʣ
  51. EQUALIZER ɾJSͷߴ͞ἧ͑ ɾݱ୅ͷαΠτ੍࡞ʹ͸ඞਢ ɾZF6͔Βɺྻ͝ͱͷߴ͞ἧ͑ʹ΋ରԠ ɾjquery.matchHeight͍Βͣʂ ɾશ෦ೖΓʢେ͸খΛ͔ͶΔʣ͔Βɺ ɹߴ͞ἧ͑Λ४උ͢Δ͕࣌ؒݮΔ

  52. INTERCHANGE CodepenͰݟͯΈΑ͏

  53. BLOCK GRID 12Ҏ֎Ͱۉ౳ʹׂΕΔάϦουΧϥϜ 5ɺ7Ͱ΋ׂΕΔʂʢૉ਺ׂʣ ׂΔ਺ͷ࠷େ͸8 ͚ͩͲɺSass൛Ͱ͸ແ੍ݶͰׂΕΔ

  54. ৄ͍͠৘ใ͸QiitaͰʂ

  55. ZF·ͱΊ Foundationʹ͸ɺαΠτ੍࡞دΓͷ ศརͳίϯϙʔωϯτ͕ἧ͍ͬͯΔ શ෦ೖΓͳͷͰɺίϯϙʔωϯτಉ࢜ͷ ׯব͕ى͖ʹ͍͘ ޙ͔Βͷ࢓༷มߋʹڧ͍ʂ

  56. ࠓճͷ·ͱΊ ΄΅ϙϯγϒҎ্ɺ ׬શͳΔϨεϙϯγϒΛ໨ࢦͦ͏ʂ ͦΕΛ࣮ݱ͢ΔͨΊʹɺ Zurb FoundationΛ࢖ͬͯΈΑ͏ʂ