今日から使える CSS Grid - MTDDC Meetup HOKKAIDO 2018 -

MTDDC Meetup HOKKAIDO 2018
http://mtddc2018.mt-ezo.net/

で発表したスライドです。

Transcript

1. ࠓ೔͔Β࢖͑Δ CSS Grid MTDDC Meetup HOKKAIDO 2018
2. ͸͡Ίʹ
3. ͸͡Ίʹ • ࡔר ᠳେ࿠ʢ͔͞·͖ ͠ΐ͏ͨΖ͏ʣ • @GeckoTang (Twitter, GitHub) • גࣜձࣾϐΫηϧάϦου • ϑϩϯτΤϯυɾΤϯδχΞ • CSS͕޷͖ͳਓ • CSS PANICʢ2012೥ʣ
4. CSS PANIC • 2012೥͝Ζ࡞ͬͨ • JSΛ࢖͍ͬͯͳ͍ • ౰࣌͸Chrome͔SafariͷΈ
5. ࠓ೔࿩͢͜ͱ
6. ࠓ೔࿩͢͜ͱ 1.ݱࡏ·Ͱͷ༷ʑͳϨΠΞ΢τํ๏ 2.CSS Gridͱ͸ 3.֤ϒϥ΢βͷ࣮૷ঢ়گ 4.CSS GridͰ͸ͲΜͳϨΠΞ΢τ͕Ͱ͖Δʁ 5.CSS GridΛཧղ͢ΔͨΊͷجૅ஌ࣝ 6.CSS Gridͷ࢖͍ॴ΍ɺFlexboxͱͷ࢖͍෼͚ 7.CSS GridΛ࢖ͬͨ؆୯ͳαϯϓϧΛ͍͔ͭ͘ 8.·ͱΊ
7. 1. ݱࡏ·Ͱͷ ɹ༷ʑͳϨΠΞ΢τํ๏ 1/8
8. ݱࡏ·Ͱͷ ༷ʑͳϨΠΞ΢τํ๏ • <table> • float • position • table-cell • inline-block • Flexbox • CSS Grid (New!)
9. <table>, float, position • ੲ͸Α͘࢖ͬͨ… • ςʔϒϧίʔσΟϯά • float, positionʹΑΔΧϥϜϨΠΞ΢τ
10. display: table-cell; display: inline-block; • IE8Ͱ΋࢖͑Δtable-cell΍inline-blockΛ
 ଟ༻͍ͯͨ࣌͠୅΋͋ͬͨ…
11. Flexbox • 2015ʙ2016೥͋ͨΓͰɺҰ༂༗໊ʹͳΓɺΑ͘ ࢖ΘΕΔΑ͏ʹͳͬͨҹ৅ɻ
12. CSS Grid • 2017೥ʹଟ͘ͷϒϥ΢βͰαϙʔτ͞Εͨʂ
13. 2. CSS Gridͱ͸ 2/8
14. ·ͣ͸ͬ͘͟Γͱɺ ͲΜͳ΋ͷ͔ɻ
15. HTMLΛॻ͍ͯ… • ਌ཁૉ.grid • ͍͔ͭ͘ͷࢠཁૉ • .a, .b, .c, .d, .e… <div class=“grid”> <div class=“a”></div> <div class=“b”></div> <div class=“c”></div> <div class=“d”></div> <div class=“e”></div> </div>
16. CSSΛॻ͍͍ͯ͘… .grid {
 ɹdisplay: grid; }
17. CSSΛॻ͍͍ͯ͘… .grid {
 ɹdisplay: grid; grid-template-columns:
 100px 150px 100px 50px; grid-template-rows:
 auto 100px auto; }
18. CSSΛॻ͍͍ͯ͘… .a { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; }
19. CSSΛॻ͍͍ͯ͘… .b { grid-column-start: 3; grid-column-end: 5; grid-row-start: 2; grid-row-end: 3; }
20. CSSΛॻ͍͍ͯ͘… .a { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; } .b { grid-column-start: 3; grid-column-end: 5; grid-row-start: 2; grid-row-end: 3; }
21. গ͠ৄ͘͠
22. ࢓༷ॻʹ͸… ”ཁ໿ ͜ͷ࢓༷͸ɺ UI ઃܭʹ࠷దԽ͞Εͨೋ࣍ݩ֨ࢠʹجͮ͘ϨΠΞ΢ τγεςϜʹ͍ͭͯड़΂Δɻ ֨ࢠϨΠΞ΢τϞσϧʹ͓͍ͯ͸ɺ֨ ࢠίϯςφͷҰ࿈ͷࢠΛɼ༧Ίఆٛ͞Εͨ flexible ʗݻఆతͳ α ΠζͷϨΠΞ΢τ֨ࢠͷதͷ೚ҙͷεϩοτʹҐஔͤ͞ΒΕΔɻ” • CSS Grid Layout Module Level 1 • CSS ֨ࢠϨΠΞ΢τ - CSS Grid Layout Module Level 1
23. ཁ͸ɺ࿮Λ࡞ͬͯ ޷͖ͳ৔ॴʹཁૉΛ഑ஔͰ͖Δ
24. ΢ΣϒαΠτɾΞϓϦ͸ෳࡶ ͳϨΠΞ΢τʹͳ͍ͬͯΔ • <table>͚ͩͩͱແཧɺͦ΋ͦ΋ද૊Έ༻ • float͚ͩͩͱແཧɺͦ΋ͦ΋จষϨΠΞ΢τ༻ • Flexbox΋͋Δ͚Ͳɺͪΐͬͱ଍Γͯͳ͍ • CSS Grid͸ɺͦͷͨΊʹ࡞ΒΕͨ
25. CSS Grid͸ άϦουϨΠΞ΢τΛ࡞Γ΍͍͢ • <table>Λ࢖ͬͨςʔϒϧϨΠΞ ΢τʹࣅ͍ͯΔʢͱࢥ͏…ʣ • <table>ͷΑ͏ʹHTMLଆͰ͸ϨΠ Ξ΢τߏ଄Λ࡞ΒͣɺCSSଆͰϨ ΠΞ΢τߏ଄Λ࡞Δ͜ͱ͕Ͱ͖Δ
26. ྫɿHTML & CSS • ϨΠΞ΢τ৘ใΛCSSଆʹ࣋ͭͷͰɺHTMLͷߏ଄͕γϯϓϧʹ • CSSͰ͸Ͳ͏͍͏෼ׂʹ͢Δ͔ɺͲ͜ʹ഑ஔ͢Δ͔Λࢦఆ͢Δɻ <div class="grid"> <div class="title">Title</div> <div class="status">Status</div> <div class="memberList">Member List</div> <div class="gameWindow">Game Window</div> <div class="chatWindow">Chat Window</div> </div> .grid { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; } .title { grid-area: 1 / 1; } .status { grid-area: 3 / 1; } .memberList { grid-area: 2 / 1;} .gameWindow { grid-area: 1 / 2 / span 2 / auto; } .chatWindow { grid-area: 3 / 2; }
27. ྫɿڱ͍ը໘༻ • ϝσΟΞΫΤϦΛ࢖͍ɺϨΠΞ΢τΛ૊Έସ͑Δ @media (max-width: 450px) { .grid { grid-template-columns: 150px 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: "title list" "status list" "game game" "chat chat"; } .title { grid-area: title; } .status { grid-area: status; } .memberList { grid-area: list; } .gameWindow { grid-area: game; } .chatWindow { grid-area: chat; } }
29. 3. ֤ϒϥ΢βͷ ɹ ࣮૷ঢ়گ 3/8
30. ֤ϒϥ΢βͷ࣮૷ঢ়گ
31. ֤ϒϥ΢βͷ࣮૷ঢ়گ
32. IE10ͱIE11ʹ͸஫ҙ • IE10Ͱ୭ΑΓ΋ૣ͘CSS GridΛ࣮૷ (2012೥ • IE10ͱIE11͸ݹ͍࢓༷Ͱ࣮૷͍ͯ͠Δ… • Edge΋·ͨݹ͍࢓༷Λࢀর͍͕ͯͨ͠ɺࠓͷ όʔδϣϯͰ͸৽͍͠࢓༷ʹରԠ͍ͯ͠Δ • IE…
33. IEʹͰ͖ͳ͍͜ͱ • IE10+Ͱ΋CSS Grid͸࢖͑Δ͚ͲɺҰ෦ͷػೳ͕ ࢖͑ͳ͍ͱ͍͏͜ͱΛ͓֮͑ͯ͘͜ͱ • άϦουΞΠςϜ͸ࣗಈͰ഑ஔ͞Εͳ͍ • άϦουΤϦΞʹ໊લΛ͚ͭΔࣄ͕Ͱ͖ͳ͍
34. ࢓༷ͷϓϩύςΟ *& ͷϓϩύςΟ "VUPQSFpYFSͰରԠ HSJEUFNQMBUFDPMVNOT NTHSJEDPMVNOT ✅ HSJEUFNQMBUFSPXT NTHSJESPXT ✅ HSJEUFNQMBUFBSFBT  HSJEUFNQMBUF  HSJEBVUPDPMVNOT  HSJEBVUPSPXT  HSJEBVUPqPX  HSJE  HSJESPXTUBSU NTHSJESPX ✅ HSJEDPMVNOTUBSU NTHSJEDPMVNO ✅ HSJESPXFOE  HSJEDPMVNOFOE  HSJESPX  HSJEDPMVNO  HSJEBSFB  HSJESPXHBQ
    SPXHBQ  HSJEDPMVNOHBQ
    DPMVNOHBQ  HSJEHBQ
    HBQ   NTHSJEDPMVNOTQBO  NTHSJESPXTQBO BMJHOTFMG NTHSJEDPMVNOBMJHO ✅ KVTUJGZTFMG NTHSJESPXBMJHO ✅ IEͰ࢖͑ΔCSS Gridؔ࿈ϓϩύςΟ
35. 4. CSS GridͰ͸ ɹͲΜͳϨΠΞ΢τ͕Ͱ͖Δʁ 4/8
36. ΢ΣϒαΠτ • ΢ΣϒαΠτͷେ࿮ͷϨΠΞ΢τΛ࡞Δ
37. ΢ΣϒαΠτͷ
 ϨεϙϯγϒରԠ • ը໘෯ʹΑͬͯϨΠΞ΢τΛมߋ͢Δ
38. ॎԣʹἧ͑Δඞཁͷ͋Δ Ϧετ • ߦͷߴ͞Ͱ͋ͬͨΓɺྻͷ෯Λἧ͑Δ
39. ϑΥʔϜ • <table>Λ࢖Θͳ͍ͰɺάϦουϨΠΞ΢τͷϑΥʔϜΛ࡞Δ
40. ࡶࢽͷࢽ໘ͷΑ͏ͳ ϨΠΞ΢τ • ෳࡶͳάϦουϨΠΞ΢τ΋࡞ΕΔ
41. FlexboxͰ΋Մೳ͔΋͠Εͳ͍͕... • Flexbox͸ॎɾԣͲͪΒ͔ͷ੔ྻ͕Ͱ͖Δ • CSS Grid͸ॎͱԣͷ੔ྻ͕Ͱ͖Δ • Flexboxʹ΋Gridʹ΋ɺͦΕͧΕಘҙͳϨΠΞ΢τ͕͋Δ • ॎԣʹ੔ྻ͍ͤͨ͞ͷͰ͋Ε͹CSS Grid͕޲͍͍ͯΔ • CSS Gridͷ৔߹ɺHTMLͷߏ଄΋γϯϓϧʹͳΔʢͱࢥ͏ʣ
42. 5. CSS GridΛ ɹཧղ͢ΔͨΊͷ ɹجૅ஌ࣝ 5/8
43. CSS GridΛཧղ͢ΔͨΊͷ جૅ஌ࣝ • άϦουίϯςφͱάϦουΞΠςϜ • άϦουϥΠϯ • άϦουτϥοΫ • άϦουηϧ • άϦουΤϦΞ ༻ޠ͕ଟ͍……ɻͰ΋͓֮͑ͯ͘ͱཧղΛॿ͚Δɻ
44. άϦουίϯςφͱάϦουΞΠςϜ • άϦουίϯςφɿ਌ɻେ࿮ΛܾΊΔɻ • άϦουΞΠςϜɿࢠɻͲͷ࿮ʹೖΔ͔ΛܾΊΔɻ
45. άϦουίϯςφ • display: grid;·ͨ͸display: inline-grid;͕ࢦఆ͞Εͨཁૉɻ
 άϦουͷ෼ׂ਺΍ɺ෼ׂ͞ΕͨάϦουͷྻɾߦͷ෯ɾߴ͞ͱ͍ͬͨɺ ϨΠΞ΢τ৘ใΛࢦఆ͢Δɻ <div class="grid"></div> /* άϦουίϯςφͷࢦఆ */ .grid { display: grid; grid-template-columns: 100px 100px; grid-template-rows: 100px 100px; }
46. άϦουΞΠςϜ •άϦουίϯςφͷ௚ԼͷࢠཁૉΛάϦουΞΠςϜͱݺͿɻάϦο υΞΠςϜʹ͸ɺ෼ׂ͞ΕͨάϦουͷͲ͜ʹҐஔ͢Δ͔ͳͲΛࢦఆ ͢Δɻ <div class="grid"><!-- άϦουίϯςφ --> <div class="grid__item-1">item</div> <!-- άϦουΞΠςϜ --> <div class="grid__item-2">item</div> <!-- άϦουΞΠςϜ --> <div class="grid__item-3">item</div> <!-- άϦουΞΠςϜ --> <div class="grid__item-4">item</div> <!-- άϦουΞΠςϜ --> </div> /* άϦουίϯςφͷࢦఆ */ .grid { display: grid; grid-template-columns: 100px 100px; grid-template-rows: 100px 100px; } /* άϦουΞΠςϜͷࢦఆ */ .grid__item-1 { grid-column: 1; grid-row: 1; } .grid__item-2 { grid-column: 2; grid-row: 1; } .grid__item-3 { grid-column: 1; grid-row: 2; } .grid__item-4 { grid-column: 2; grid-row: 2; }
47. άϦουϥΠϯ • άϦουϥΠϯ͸ɺάϦουΛԣํ޲ɾ ॎํ޲ʹ෼ׂ͢Δܩઢͷ͜ͱɻ • ͦͷάϦουϥΠϯ͸ଠ͕͞ͳ͘ɺݟ ͨ໨ʹ͸ݱΕͳ͍ɻ
48. άϦουτϥοΫ •άϦουτϥοΫ͸ɺ֤ྻ΍ߦΛҙຯ͢Δɻ •άϦουτϥοΫͷαΠζͳͲΛࢦఆ͢Δͨ Ίʹ͸ɺgrid-template-columns΍grid- template-rowsϓϩύςΟΛάϦουίϯς φʹࢦఆ͢Δɻ
49. άϦουηϧ • ߦͷάϦουτϥοΫͱྻͷάϦουτϥοΫ͕ ަࠩ͢ΔՕॴΛʮάϦουηϧʯͱݺͿɻ
50. άϦουΤϦΞ • ෳ਺ͷߦͱྻͷάϦουτϥοΫ͕ަࠩ͢Δൣ ғ͸ʮάϦουΤϦΞʯͱݺͿɻ • ͜ͷάϦουΤϦΞʹ͸໊લΛ͚ͭΔ͜ͱ͕Ͱ ͖Δɻ
51. ໊લͷ෇͚ํ
52. ྫ: άϦουΤϦΞͷࢦఆʢHTMLʣ • 3ߦ2ྻʹ෼ׂͯ͠ɺཁૉΛ഑ஔ͍ͨ͠ <div class="grid"> <div class="grid__item-a">a</div> <div class="grid__item-b">b</div> <div class="grid__item-c">c</div> <div class="grid__item-d">d</div> </div>
53. ྫ: άϦουΤϦΞͷࢦఆʢCSSʣ • ΞεΩʔΞʔτͷΑ͏ʹ഑ஔͰ͖Δ .grid { display: grid; grid-template-columns: 150px 1fr; grid-template-rows: 50px 1fr 50px; grid-template-areas: "c a" "b a" "d a"; } .grid__item-a { grid-area: a; } .grid__item-b { grid-area: b; } .grid__item-c { grid-area: c; } .grid__item-d { grid-area: d; } <div class="grid"> <div class="grid__item-a">a</div> <div class="grid__item-b">b</div> <div class="grid__item-c">c</div> <div class="grid__item-d">d</div> </div>
54. 6. CSS Gridͷ࢖͍ॴ΍ ɹFlexboxͱͷ࢖͍෼͚ 6/8
55. 6.CSS Gridͷ࢖͍ॴ΍
 ɹFlexboxͱͷ࢖͍෼͚ 1.CSS Grid͕޲͍͍ͯΔ΋ͷΛཧղ͢Δ 2.Flexbox͕޲͍͍ͯΔ΋ͷΛཧղ͢Δ 3.࣮ࡍͷ΢ΣϒαΠτͷίί͸˓˓
56. 1. CSS Grid͕޲͍͍ͯΔ΋ͷ • ͍ΘΏΔάϦουϨΠΞ΢τ • େ͖͍෦෼Ͱݴ͑͹ɺ΢ΣϒαΠτͷେ࿮ • খ͍͞෦෼Ͱݴ͑͹ɺॎԣʹἧ͑Δඞཁͷ͋ΔϦετ • ߦͱྻͰɺ෯΍ߴ͞Λἧ͑Δඞཁ͕͋ΔͳΒCSS Grid
57. 2. Flexbox͕޲͍͍ͯΔ΋ͷ • ԣ·ͨ͸ɺॎʹฒͿ௚ઢతͳUI • λϒɺαΠυϝχϡʔɺϖʔδૹΓɺύϯͣ͘Ϧετ • ߦ͝ͱɺྻ͝ͱʹΞΠςϜΛἧ͑ΔͷͰ͋Ε͹Flexbox
58. 3. ࣮ࡍͷ΢ΣϒαΠτͷίί͸˓˓ • Ծʹɺ͜ͷΑ͏ͳαΠ τΛ࡞Δͱͯ͠ɻ
59. αΠτͷେ࿮෦෼ͷϨΠΞ΢τ
60. αΠτͷେ࿮෦෼ͷϨΠΞ΢τ • CSS GridΛ࢖͏
61. Ϧετ෦෼ͷϨΠΞ΢τ
62. Ϧετ෦෼ͷϨΠΞ΢τ • ॎͱԣʹ෯΍ߴ͞Λ ἧ͍͑ͨ • CSS GridΛ࢖͏
 FlexboxͰ΋ؤுΕ͹ՄೳͰ͸͋Δ…
63. UIʢݕࡧϑΥʔϜɺύϯͣ͘ɺλϒʣ
64. UIʢݕࡧϑΥʔϜɺύϯͣ͘ɺλϒʣ • ԣ·ͨ͸ɺॎํ޲ʹ ཁૉ͕ฒͿ΋ͷ • FlexboxΛ࢖͏
65. ը૾ͱจষͷϨΠΞ΢τ
66. ը૾ͱจষͷϨΠΞ΢τ • ςΩετΛճΓࠐ· ͤΔͷͰ͋Ε͹ɺ floatΛ࢖͏ • ͦ͏Ͱͳ͍ͳΒ FlexboxͰɻ • ৔߹ʹΑͬͯ͸CSS GridͰ΋ɻ
67. ͬ͘͟Γཧղ͢ΔͳΒ… • େ࿮ͷϨΠΞ΢τ → CSS Grid • ϦετͷϨΠΞ΢τ → CSS Grid, Flexbox • UIࣗମͷϨΠΞ΢τ → Flexbox • ը૾ͱจষͷϨΠΞ΢τ → float, Flexbox, CSS Grid ͦΕͧΕͷϨΠΞ΢τํ๏ͷಛ௃Λ ཧղͯ͠ɺ͏·͘׆༻͢Δɻ
68. 7. CSS GridΛ࢖ͬͨ ɹ؆୯ͳαϯϓϧΛ ɹ͍͔ͭ͘ 7/8
69. <div class="grid"> <div class="grid__item">1</div> <div class="grid__item">2</div> </div> .grid { display: grid; grid-gap: 10px; grid-template-columns: 150px 1fr; } .grid__item:nth-child(1) { background-color: tomato; } .grid__item:nth-child(2) { background-color: gold; } 2ΧϥϜ
70. 3ΧϥϜ <div class="grid"> <div class="grid__item">1</div> <div class="grid__item">2</div> <div class="grid__item">3</div> </div> .grid { display: grid; grid-gap: 10px; grid-template-columns: 150px 1fr 100px; } .grid__item:nth-child(1) { background-color: tomato; } .grid__item:nth-child(2) { background-color: gold; } .grid__item:nth-child(3) { background-color: limegreen; }
71. ϔομʔ,̎ΧϥϜ,ϑολʔ <div class="grid"> <div class="grid__header">header</div> <div class="grid__sub">sub</div> <div class="grid__main">main</div> <div class="grid__footer">footer</div> </div> .grid { display: grid; grid-gap: 10px; grid-template-columns: 150px 1fr; grid-template-rows: 100px auto 100px; grid-template-areas: "header header" "sub main" "footer footer"; } .grid__header { grid-area: header; } .grid__sub { grid-area: sub; } .grid__main { grid-area: main; } .grid__footer { grid-area: footer; }
72. ͍͍ײ͡ͷϦετ <div class="grid"> <div class="grid__item">1</div> <!-- লུ --> <div class="grid__item">7</div> </div> .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
73. ࢀߟʹͳΔαΠτ
74. https://gridbyexample.com/examples/ Grid by Example
75. http://labs.jensimmons.com/ The Experimental Layout Lab of Jen Simmons
76. http://cssgridgarden.com/#ja GRID GARDEN
77. 8. ·ͱΊ 8/8
78. 7. ·ͱΊ • άϦοτϨΠΞ΢τͱ͍͑͹CSS Grid • ϨΠΞ΢τʹ߹Θͤͨద੾ͳ࢖͍෼͚Λ͢Δ • CSS Grid͸΋͏࢖͑Δʂ • ࣮Ҋ݅Ͱ΋࢖͑Δʂ • IE11ʹରԠ͢ΔͷͰ͋Ε͹ɺIE11͕࢖͑ͳ͍ ػೳ͸ආ͚ΔɻͦΕͰ΋े෼ศརɻ
79. [PR] CodeGrid
80. https://www.codegrid.net/ • ࣥචਞ͸ݱ໾ͷϑϩϯτΤϯυɾΤϯδχΞ • جૅ͔Β࠷৽τϨϯυٕज़·ͰಡΈ͍ͨͱ͖ʹ͙͢ಡΊΔʂ • WebɾiOSΞϓϦ × ϝʔϧϚΨδϯ • ֹ݄800ԁ(੫ൈ)ͰɺશهࣄΞΫηεʴ݄4ճ഑৴ • ແྉهࣄɺແྉߪಡظ͕ؒ͋ΔͷͰ͓ࢼ͍ͩ͘͠͞ • CodeGrid - ͜Ε͔ΒͷάϦουϨΠΞ΢τ શ6ճ
81. Question?