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

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; } }
28. None

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?