Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
レスポンシブデザインに見受けられる4つの段階 ~実現のためのZurb Foundation~
Search
kohki-shikata
October 29, 2016
Design
0
440
レスポンシブデザインに見受けられる4つの段階 ~実現のためのZurb Foundation~
CSS Talk vol.1での発表内容です
kohki-shikata
October 29, 2016
Tweet
Share
Other Decks in Design
See All in Design
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
0
170
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
580
UIをもたらすコンテクストの考察
securecat
9
2.5k
採用広報大会議登壇スライド
teamlab
PRO
2
260
デザインを誘発する「イネーブルメント」アプローチ #spectrumfest2023 / 20231203
minamitary
0
570
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
全社を巻き込んだコーポレートバリューの再定義に関するデザイナーの関わり方
sugiyama_sukedachi
0
170
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
710
Design Leadership in Challenging Times
morganepeng
3
300
意志と、デザインと、ときどきお金
transit_kix
2
2.2k
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
240
MiKS inc. Company PR en_202404
zakkerooni
0
110
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
14
2.1k
Designing Experiences People Love
moore
136
23k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Ruby is Unlike a Banana
tanoku
96
10k
Web development in the modern age
philhawksworth
202
10k
Building Flexible Design Systems
yeseniaperezcruz
318
37k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
Building Adaptive Systems
keathley
30
1.8k
Producing Creativity
orderedlist
PRO
336
39k
Facilitating Awesome Meetings
lara
41
5.6k
The Power of CSS Pseudo Elements
geoffreycrofte
59
5k
Transcript
Ϩεϙϯγϒɺࢦ͖̐ͭ͢ͷஈ֊ ʙ࣮ݱͷͨΊͷZurb Foundationʙ 2016/10/29ɹCSS Talk vol.1 @ TAM Coworking
ࣗݾհ ͔ͨ͜͠͏͖ גࣜձࣾND&I ϓϥϯφʔ ※࠷ۙɺ΄ͱΜͲιʔείʔυΛॻ͍ͯ·ͤΜ
ࣗݾհ ͔ͨ͜͠͏͖ גࣜձࣾND&I ϓϥϯφʔ concrete5Ҋ͔݅Γͬͯ·͢ 10% 90% concrete5 ͦͷଞ
ࣗݾհ ͔ͨ͜͠͏͖ גࣜձࣾND&I ϓϥϯφʔ ϑϦʔϥϯεͷάϥϑΟοΫσβΠφʔ →ςϨϏہͷCGσβΠφʔ →ϑϦʔϥϯεͰWeb&ө૾ͷσβΠφʔ →๏ਓԽʴconcrete5ΠϯςάϨʔτύʔτφʔ →ݱ৬ͷձࣾʹJOIN ܦྺ
concrete5Ҋ͔݅Γͬͯ·͢ झຯɿమಓɾϐΞϊ
ࣗݾհ ͔ͨ͜͠͏͖ גࣜձࣾND&I ϓϥϯφʔ ϑϦʔϥϯεͷάϥϑΟοΫσβΠφʔ →ςϨϏہͷCGσβΠφʔ →ϑϦʔϥϯεͰWeb&ө૾ͷσβΠφʔ →๏ਓԽʴconcrete5ΠϯςάϨʔτύʔτφʔ →ݱ৬ͷձࣾʹJOIN ܦྺ
concrete5Ҋ͔݅Γͬͯ·͢ ࠷ۙɺ݁ࠗ͠·ͨ͠ ࠺͔ΒʮϫΠ͘ΜʯͱݺΕͯ·͢ झຯɿమಓɾϐΞϊ
ΞδΣϯμ ϨεϙϯγϒσβΠϯʹ ݟड͚ΒΕΔ̐ͭͷஈ֊ Zurb Foundationʹ͍ͭͯ
ࠓ͓͢Δ͜ͱͷલఏ WebαΠτʢ΄͒Ή͐͡ʣ Λલఏʹ͠·͢ɻ SPAͱ͔ɺ WebγεςϜͷͰ͋Γ·ͤΜɻ ͦ͏͍͏ͷΛظ͞Ε͍ͯͨํɺ ΰϝϯφαΠ
ࠓ͓͢Δ͜ͱͷલఏ WebαΠτʢ΄͒Ή͐͡ʣ Λલఏʹ͠·͢ɻ ͋ͱɺͪΐͬͱJSͷೖΓ·͢ɻ Pure CSS͡Όͳͯ͘ɺΰϝϯͶʂ
ϨεϙϯγϒσβΠϯͬͯʁ • ʮαΠτΛεϚϗରԠ͢ΔͨΊͷٕज़ʯ • ʮϫϯιʔεɾϚϧνϢʔεͰݮͰ͖Δʯ • ʮϝσΟΞΫΤϦΛͨ͘͞Μ࡞Εɺ ɹεϚϗ͚ͩ͡Όͳ͘ɺλϒϨοτʹରԠͰ͖Δʯ • ʮGoogle͕ਪͯ͠ΔΜͩΑͶʯ
• ʮͦͷҰํͰɺσβΠϯʹ੍͕…ʯ • ʮιʔεͷංେԽ͕…ʯ
ϨεϙϯγϒσβΠϯɺ͜͜Ͱͷఆٛ 8FCαΠτΛ εϚϗରԠͤ͞ΔͨΊͷΞϓϩʔνٕज़ 2. CSSϝσΟΞΫΤϦΛ֩ͱ͢Δ 3. ϫϯιʔεɾϚϧνϢʔε
εϚϗରԠͷΞϓϩʔνٕज़ • UAذ • αʔόʔαΠυ • ϛυϧΣΞͰߦ͏ ʢPHPRubyʣ • WebαʔόʔͰߦ͏
ʢ.htaccessʣ • ΫϥΠΞϯταΠυʢJSʣ • Ϩεϙϯγϒʢը໘෯ʣ Ί ͬ ͪ Ό ͍ ͬ ͺ ͍ ͋ Δ Ͷ ʂ ࠓͪΖΜͬͪ͜ͷʂ
ϨεϙϯγϒσβΠϯʹ ݟड͚ΒΕΔ̐ͭͷஈ֊ ϑΣʔζ1 ϑΣʔζ2 ϑΣʔζ3 ϑΣʔζ4
ϨεϙϯγϒσβΠϯʹ ݟड͚ΒΕΔ̐ͭͷஈ֊ ϑΣʔζ1 ϑΣʔζ2 ϑΣʔζ3 ϑΣʔζ4 μϝϙϯγϒ
μϝϙϯγϒͷಛ • ίϯςϯπ͕ը໘͔ΒΈग़͢ɻϨΠΞτ͔ΒΈग़͢ɻ • ίϯςϯπಉ͕࢜ॏͳΔɻݟ͑ͳ͍෦͕ੜ͡Δ • ίϯςϯπը૾ͷαΠζ͕ෆࣗવʹେ͖͘ͳͬͨΓখ͘͞ͳͬͨΓ͢Δ • ίϯςϯπը૾ͷΞεϖΫτൺ͕ਖ਼͘͠࠶ݱ͞Εͳ͍
࢜ࢁʹొΔͨ Ίʹඞཁͳͷ ಓ۩"NB[POฤ ެ։ɿ ,PILJ ෆମࡋ
࢜ࢁʹొΔͨ Ίʹඞཁͳͷ ಓ۩"NB[POฤ ެ։ɿ ,PILJ ळɺͦΕొࢁͷقઅɻ࢜ࢁʹઓ͠Α͏ͱ ͢Δʹɺͪΐ͏Ͳ͍͍قઅͰ͢ΑͶɻࠓ ɺ࢜ࢁʹΞλοΫ͢ΔͨΊʹඞཁͳಓ۩Λ Amazon͚ͩͰἧ͑Δ͜ͱʹνϟϨϯδͯ͠Έ· ͠ΐ͏ʂɹωοτͰҙ֎ͱἧ͑Δ͜ͱ͕ग़དྷ
ΔΜͰ͢Αʂ ෆମࡋ
࢜ࢁʹొΔͨ Ίʹඞཁͳͷ ಓ۩"NB[POฤ ެ։ɿ ,PILJ ෆମࡋ
࢜ࢁʹొΔͨ Ίʹඞཁͳͷ ಓ۩"NB[POฤ ެ։ɿ ,PILJ ෆମࡋ
μϝϙϯγϒͷಛ wJNQPSUBOUͷཛྷ wܧঝ͕ͱͬͪΒ͔ͬͯ͠·͍ɺ ϝϯςφϏϦςΟ͕ۃʹѱ͍ɻ
ϨεϙϯγϒσβΠϯʹ ݟड͚ΒΕΔ̐ͭͷஈ֊ ϑΣʔζ1 ϑΣʔζ3 ϑΣʔζ4 μϝϙϯγϒϙϯγϒ ϑΣʔζ2
ϙϯγϒͷಛ •ॎʹ߲͕͍άϩφϏ •̐֊ɺ.֊ͱԣʹ͘ͳΔύϯͣ͘Ϧετ •߲ͦͦͷଟ͍ɺ αΠτϚοϓతͳϑολʔάϩφϏɻ
αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ Ωϟϯϖʔϯ Ωϟϯϖʔϯ ͓͍߹Θͤ ݸਓใอޢํ ΞΫηε ࠾༻ใ 06-1234-5678
ฏ9:00~18:00
αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ Ωϟϯϖʔϯ $43׆ಈ ͓͍߹Θͤ ݸਓใอޢํ ΞΫηε ࠾༻ใ 06-1234-5678
ฏ9:00~18:00 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻ใ ͓͍߹Θͤ ݸਓใอޢํ 06-1234-5678 ฏ9:00~18:00
ϨεϙϯγϒσβΠϯʹ ݟड͚ΒΕΔ̐ͭͷஈ֊ ϑΣʔζ1 ϑΣʔζ4 μϝϙϯγϒ ϑΣʔζ2 ϙϯγϒ ϑΣʔζ3 ΄΅ϙϯγϒ
ϙϯγϒͷಛ • άϩφϏϋϯόʔΨʔϝχϡʔΦϑΩϟϯόεʹ • ը૾߹ʹԠͯ͡ɺΞʔτσΟϨΫγϣϯͷৼΓ͚͕ͳ͞ΕΔ • PC࣌ϓϨʔϯͳςΩετ͕ͩɺSP࣌ɺݟग़͠ͰΞίʔσΟΦϯͳͲ ʢex. Wikipediaʣ
αϯϓϧגࣜձࣾ औѻ $43׆ಈ ͓͍߹Θͤ 06-1234-5678 ฏ9:00~18:00 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ Ωϟϯϖʔϯ
$43׆ಈ ΞΫηε ࠾༻ใ ͓͍߹Θͤ ݸਓใอޢํ ≡
αϯϓϧגࣜձࣾ औѻ $43׆ಈ ͓͍߹Θͤ 06-1234-5678 ฏ9:00~18:00 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ Ωϟϯϖʔϯ
$43׆ಈ ΞΫηε ࠾༻ใ ͓͍߹Θͤ ݸਓใอޢํ ≡ ձࣾ֓ཁ औѻ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻ใ ͓͍߹Θͤ ݸਓใอޢํ
ϨεϙϯγϒσβΠϯʹ ݟड͚ΒΕΔ̐ͭͷஈ֊ ϑΣʔζ1 ϑΣʔζ4 μϝϙϯγϒ ϑΣʔζ2 ϙϯγϒ ϑΣʔζ3 ΄΅ϙϯγϒ Ϩεϙϯγϒ
શͳΔ
Ϩεϙϯγϒͷಛ • ϒϨΠΫϙΠϯτؒͰத్ͳݟͨʹͳΔελΠϧͷղܾ ◦ ࡉ͔͘ϒϨΠΫϙΠϯτΛΔ ◦ ྟ࣌ͷϝσΟΞΫΤϦΛΔ • Ϛεϗόʔ࣌ͷσβΠϯΛλονσόΠεͰผͷදݱͰΞϓϩʔνͤ͞ Δ
◦ ը໘෯͚ͩͰఆͰ͖ͣɺೖྗσόΠεΛஅ͢ΔΈ ʢJSʣ͕ඞཁ શͳΔ
Ϩεϙϯγϒͷಛ • ϒϨΠΫϙΠϯτؒͰத్ͳݟͨʹͳΔελΠϧͷղܾ ◦ ࡉ͔͘ϒϨΠΫϙΠϯτΛΔ ◦ ྟ࣌ͷϝσΟΞΫΤϦΛΔ • Ϛεϗόʔ࣌ͷσβΠϯΛλονσόΠεͰผͷදݱͰΞϓϩʔνͤ͞ Δ
◦ ը໘෯͚ͩͰఆͰ͖ͣɺೖྗσόΠεΛஅ͢ΔΈ ʢJSʣ͕ඞཁ શͳΔ
͜͜·Ͱͷ·ͱΊ μϝϙϯγϒ ϙϯγϒ ΄΅ϙϯγϒ Ϩεϙϯγϒ ೲϨϕϧ × ̋ ̋ ˕
ಛ ෆମࡋ UI͕ ચ࿅͞Εͯͳ͍ ͍ΘΏΔ Ϩεϙϯγϒ Ϩεϙϯγϒ͚ͩͲ ؾ͕͖͍ͯΔ ඞཁͳࣝ CSSͷجຊతͳཧղ ࠨهʹಉ͡ ϝσΟΞΫΤϦɺJSɺ ϑϨʔϜϫʔΫͷཧղ ࠨهͷ͞ΒͳΔ ਂ͍ཧղ ސ٬ຬ ೲෆՄ த ߴ ͜ͷΜΛࢦͦ͏
ͱ͜ΖͰ…
ૣ͘ؼΕͯ·͔͢ʁ
ૣ͘ؼΕͯ·͔͢ʁ పఈతʹޮԽ͢Δ
ࢲͷ੍࡞ελϯε 1. ̋̋ͷ࠶ൃ໌͠ͳ͍ 2. ̋̋ͷݞʹͷΔ 3. ̋̋Λ݉ͶΔ
ंྠͷ࠶ൃ໌͠ͳ͍ Don’t reinvent the wheel طʹ͋Δͷɺ͔̍ΒΘͳ͍ ૉࡐɺΞϦϞϊͷྲྀ༻ Φʔϓϯιʔεͷར༻ɺ ޮՌతͳंྠ࠶ൃ໌ͷճආ
ࢲͷ੍࡞ελϯε 1. ंྠͷ࠶ൃ໌͠ͳ͍ 2. ̋̋ͷݞʹͷΔ 3. ̋̋Λ݉ͶΔ
ڊਓͷݞʹͷΔ ༸ͷ͜ͱΘ͟ ઌਓͷੵΈॏͶͨൃݟʹج͍ͮͯ Կ͔Λൃݟ͢Δ͜ͱΛࢦ͢ Φʔϓϯιʔεɺ Ғେͳʮڊਓʯ ۦஞ͍͚ͯ͠·ͤΜ
ࢲͷ੍࡞ελϯε 1. ंྠͷ࠶ൃ໌͠ͳ͍ 2. ڊਓͷݞʹͷΔ 3. େখΛ݉ͶΔ
͞Βʹ… ϓϦϓϩηοαͷ׆༻ HTMLɹ→ɹjade(pug) CSSɹɹ→ɹSass(SCSS) ࢄίʔσΟϯά GitʢձࣾͰBitbucketΛར༻ʣ 伱ؒʹۭ͍ͨ Ϧιʔεͷೖ͕Մೳ
None
WebαΠτ͖ͷػೳ͕࠷ॳ͔Β༻ҙ͞Ε͍ͯΔ EqualizerɺInterchangeɺBlockGrid Sass(SCSS)ͰͷΧελϚΠζ͕લఏ ϒϨΠΫϙΠϯτΛมߋՄೳ ϓϩδΣΫτਐߦதͷมߋՄೳ ϒϨΠΫϙΠϯτJSʹ͢͜ͱͰ͖Δ window.resizeͰൃՐ͠ɺཁૉͷૢ࡞ͳͲ͕Մೳ
WebαΠτ͖ͷػೳ͕࠷ॳ͔Β༻ҙ͞Ε͍ͯΔ EqualizerɺInterchangeɺBlockGrid Sass(SCSS)ͰͷΧελϚΠζ͕લఏ ϒϨΠΫϙΠϯτΛมߋՄೳ ϓϩδΣΫτਐߦதͷมߋՄೳ ϒϨΠΫϙΠϯτJSʹ͢͜ͱͰ͖Δ window.resizeͰൃՐ͠ɺཁૉͷૢ࡞ͳͲ͕Մೳ ͨ͘͞Μ͋Γ͗ͯ͢ ޠΓਚͤ͘ͳ͍ʂ
WebαΠτ͖ͷػೳ͕࠷ॳ͔Β༻ҙ͞Ε͍ͯΔ EqualizerɺInterchangeɺBlockGrid Sass(SCSS)ͰͷΧελϚΠζ͕લఏ ϒϨΠΫϙΠϯτΛมߋՄೳ ϓϩδΣΫτਐߦதͷมߋՄೳ ϒϨΠΫϙΠϯτJSʹ͢͜ͱͰ͖Δ window.resizeͰൃՐ͠ɺཁૉͷૢ࡞ͳͲ͕Մೳ ৄ͘͠ ɹɹ࠙ձͰʂ
ͪΐͬ͜ͱφϏ 06-1234-5678 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻ใ ͓͍߹Θͤ
ݸਓใอޢํ
ͪΐͬ͜ͱφϏ 06-1234-5678 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻ใ ͓͍߹Θͤ
ݸਓใอޢํ αϯϓϧגࣜձࣾ औѻ $43׆ಈ ͓͍߹Θͤ ≡ ձࣾ֓ཁ औѻ Ωϟϯϖʔϯ $43׆ಈ ͓͍߹Θͤ ΞΫηε ࠾༻ใ ݸਓใอޢํ
ͪΐͬ͜ͱφϏ 06-1234-5678 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻ใ ͓͍߹Θͤ
ݸਓใอޢํ αϯϓϧגࣜձࣾ औѻ $43׆ಈ ͓͍߹Θͤ ≡ ձࣾ֓ཁ औѻ Ωϟϯϖʔϯ $43׆ಈ ͓͍߹Θͤ ΞΫηε ࠾༻ใ ݸਓใอޢํ μα͘ͳ͍ʁ
ͪΐͬ͜ͱφϏ 06-1234-5678 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻ใ ͓͍߹Θͤ
ݸਓใอޢํ αϯϓϧגࣜձࣾ औѻ $43׆ಈ ͓͍߹Θͤ ≡ ձࣾ֓ཁ औѻ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻ใ ͓͍߹Θͤ ݸਓใอޢํ
/ 2. Breakpoints // -------------- $breakpoints: ( small: 0, medium:
640px, large: 1024px, xlarge: 1200px, xxlarge: 1440px, ); $breakpoint-classes: (small medium large); _setting.scss
// 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ʢ͜͏ॻ͘ͱɺͪΐͬ͜ͱφϏ͕εϚϗͷ࣌ʹάϩφϏʹೖΔʣ
EQUALIZER ɾJSͷߴ͞ἧ͑ ɾݱͷαΠτ੍࡞ʹඞਢ ɾZF6͔Βɺྻ͝ͱͷߴ͞ἧ͑ʹରԠ ɾjquery.matchHeight͍Βͣʂ ɾશ෦ೖΓʢେখΛ͔ͶΔʣ͔Βɺ ɹߴ͞ἧ͑Λ४උ͢Δ͕࣌ؒݮΔ
INTERCHANGE CodepenͰݟͯΈΑ͏
BLOCK GRID 12Ҏ֎ͰۉʹׂΕΔάϦουΧϥϜ 5ɺ7ͰׂΕΔʂʢૉׂʣ ׂΔͷ࠷େ8 ͚ͩͲɺSass൛Ͱແ੍ݶͰׂΕΔ
ৄ͍͠ใQiitaͰʂ
ZF·ͱΊ FoundationʹɺαΠτ੍࡞دΓͷ ศརͳίϯϙʔωϯτ͕ἧ͍ͬͯΔ શ෦ೖΓͳͷͰɺίϯϙʔωϯτಉ࢜ͷ ׯব͕ى͖ʹ͍͘ ޙ͔Βͷ༷มߋʹڧ͍ʂ
ࠓճͷ·ͱΊ ΄΅ϙϯγϒҎ্ɺ શͳΔϨεϙϯγϒΛࢦͦ͏ʂ ͦΕΛ࣮ݱ͢ΔͨΊʹɺ Zurb FoundationΛͬͯΈΑ͏ʂ