GRID RANGERS

2017-06-24開催のMOBILE CONFERENCE 2017 in Kagoshimaで行ったセッション「GRID RANGERS」のスライドです。

Transcript

1. GRID RANGERS display: grid Ͱ ࣗ༝ͳϨΠΞ΢τΛखʹೖΕΑ͏ʂ @Mobile Conference 2017 in Kagoshima ίʔσΟϯάσβΠϯɹ৿ ࢙ݑ 1 © Coding Design, 2017
2. ໨࣍ • ࣗݾ঺հ • GRID RANGERS • ศརϙΠϯτ • CSS Grid Layout • ஍ཕϙΠϯτ • ·ͱΊ 2 © Coding Design, 2017
3. ࣗݾ঺հ 3 © Coding Design, 2017
4. ࣗݾ঺հ(1/3) • ໊લ ৿ɹ࢙ݑ ʢ΋Γɹ;ΈͷΓʣ • ੜ೥݄೔ ত࿨51೥6݄9೔ • ग़਎ɾݱॅॴ ࣛࣇౡݝࣛࣇౡࢢ • ༰࢟ ؙϝΨω 4 © Coding Design, 2017
5. ࣗݾ঺հ(2/3) • WebαΠτ੍࡞ • Webؔ࿈ٕज़ߨࢣ • ੺௩ֶԂλϥσβΠϯઐ໳ֶߍ • Webؔ࿈ॻ੶ࣥච • HTML5&CSS3ϙέοτϦϑΝϨϯε ʢٕज़ධ࿦ࣾץʣ • ΠϕϯτӡӦ • ͯ͛Webʢຖ݄݄຤͋ͨΓʣ 5 © Coding Design, 2017
6. ࣗݾ঺հ(3/3) • ΧϨʔLOVE!! ⭐ΧϨʔ԰ ঊ #ঊ੝ • ϏʔϧLOVE!! ⭐৓ࢁ؍ޫϗςϧ #ελ΢τΤʔϧࠇ౶ • νϣίϨʔτLOVE!! ⭐ύςΟεϦʔϠφΪϜϥ #Ḉຎνϣίνοϓε 6 © Coding Design, 2017
7. WebͷϨΠΞ΢τ͸ ೰·͍͠ 7 © Coding Design, 2017
8. ࡢ೥FLEXBOX͕߈ུ͠ ͨ͸ͣͳͷʹ… 8 © Coding Design, 2017
9. ͍͋ͭ͸·ͩੜ͖͍ͯͨʂ 9 © Coding Design, 2017
10. 10 © Coding Design, 2017
11. WebͷϨΠΞ΢τ͸ͻͱےೄͰ͸͍͔ͳ͍ʂ ͦ͏ɺ͍͋ͭ͸େո्… Webzilla!! 11 © Coding Design, 2017
12. GRID RANGERS ʙdisplay: grid Ͱ ͞Βʹࣗ༝ͳϨΠΞ΢τΛ खʹೖΕΑ͏ʂʙ 12 © Coding Design, 2017
13. ॿ͚ͯʂ GRID RANGERSʂ 13 © Coding Design, 2017
14. 14 © Coding Design, 2017
15. ݺΜ͔͍ͩʂ 15 © Coding Design, 2017
16. Grid LayoutΛ࢖ͬͯ 16 © Coding Design, 2017
17. Ұॹʹ߈ུ͠Α͏ 17 © Coding Design, 2017
18. ͥͬ 18 © Coding Design, 2017
19. GRID RANGERS ศརϙΠϯτ 19 © Coding Design, 2017
20. GRID RANGERS > ศརϙΠϯτ Grid LayoutͷศརϙΠϯτ Λݟ͍ͯ͜͏ʂ 20 © Coding Design, 2017
21. GRID RANGERS > ศརϙΠϯτ • HTML͕γϯϓϧ • CSS͕γϯϓϧ • ϖʔδશମͷϨΠΞ΢τΛมߋ͠΍͍͢ • ϒϩοΫΛ͖ͭ͠ΊΔϨΠΞ΢τ͕Ͱ͖Δ 21 © Coding Design, 2017
22. GRID RANGERS > ศརϙΠϯτ Ͱ͸࢖͍ํΛݟͯΈΑ͏ʂ 22 © Coding Design, 2017
23. αϯϓϧΛݟ͍ͨਓ͸͍·͙͢ԼͷURLʹΞΫηεʂ https:/ /goo.gl/DKX8Z5 23 © Coding Design, 2017
24. GRID RANGERS CSS Grid Layout 24 © Coding Design, 2017
25. GRID RANGERS > CSS Grid Layout άϦου(֨ࢠ)ͷઃఆ 25 © Coding Design, 2017
26. GRID RANGERS > CSS Grid Layout άϦου(֨ࢠ)ͷઃఆ CSS Grid Layout͸਌ཁૉͱࢠཁૉ͕ඞཁͩʂ <div class="container"> <div class="header">header</div> <div class="main">main</div> <div class="footer">footer</div> </div> 26 © Coding Design, 2017
27. GRID RANGERS > CSS Grid Layout άϦου(֨ࢠ)ͷઃఆ display: grid; Ͱ਌ཁૉʹCSS Grid LayoutΛઃఆ͢Δʂ .container { display: grid; } ͦͯ͠ɺάϦουͷॎ෯ɾԣ෯ͷઃఆͩʂ 27 © Coding Design, 2017
28. GRID RANGERS > CSS Grid Layout άϦου(֨ࢠ)ͷઃఆ grid-template-columnsͰάϦουͷԣ෯ɺ grid-template-rowsͰάϦουͷॎ෯ΛઃఆͰ͖Δͧʂ .container { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 100px 1fr 200px; } 28 © Coding Design, 2017
29. GRID RANGERS > CSS Grid Layout άϦου(֨ࢠ)ͷઃఆ fr ͸৽͍͠୯Ґͩʂ༨ͬͨྖҬΛࢦఆ͢Δͷʹ࢖͑Δͧʂ 1fr 1frͱ͢Ε͹2෼ׂɺ1fr 2frͱ͢Ε͹1/3, 2/3ʹ෼ׂͰ͖Δͧʂ .container { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 100px 1fr 200px; } 29 © Coding Design, 2017
30. grid-template-columns - CSS | MDN 30 © Coding Design, 2017
31. FirefoxNightlyΛ࢖͏ͱάϦου͕ݟ͑ͯศརͩͧʂ 31 © Coding Design, 2017
32. Powerful New Additions to the CSS Grid Inspector in Firefox Nightly 32 © Coding Design, 2017
33. GRID RANGERS > CSS Grid Layout ࢠཁૉͷ഑ஔ 33 © Coding Design, 2017
34. GRID RANGERS > CSS Grid Layout ࢠཁૉͷ഑ஔ grid-column ͰԣҐஔɺgrid-row ͰॎҐஔΛ੍ޚͰ͖ΔΘʂ ஋͸Ұ൪୺ͷάϦουͷ۠੾Γઢ͔Β1,2,3…ͱࢦఆ͢Δ਺஋Αʂ .main { grid-column: 2 / 3; /* ࠨ͔Β2൪໨ͷઢ͔Β3൪໨ͷઢͷؒ */ grid-row: 2 / 3; /* ্͔Β2൪໨ͷઢ͔Β3൪໨ͷઢͷؒ */ } 34 © Coding Design, 2017
35. GRID RANGERS > CSS Grid Layout ࢠཁૉͷ഑ஔ ൣғ͕άϦου1ͭ෼ͷͱ͖͸2ͭΊͷ஋ΛলུͰ͖ΔΘΑʂ .main { grid-column: 2; /* grid-column: 2 / 3; ͱಉ͡ */ grid-row: 2; /* grid-row: 2 / 3; ͱಉ͡ */ } 35 © Coding Design, 2017
36. GRID RANGERS > CSS Grid Layout ࢠཁૉͷ഑ஔ spanΛ࢖͏ͱάϦουͷϚε͕Կݸ͔ΛࢦఆͰ͖ΔΘʂ .main { grid-column: 2 / span 2; /* grid-column: 2 / 4; ͱಉ͡ */ grid-row: 2 / span 2; /* grid-row: 2 / 4; ͱಉ͡ */ } 36 © Coding Design, 2017
37. GRID RANGERS > CSS Grid Layout ΤϦΞͷ໋໊ 37 © Coding Design, 2017
38. GRID RANGERS > CSS Grid Layout ΤϦΞͷ໋໊ grid-template-areas ͰάϦουʹ໊લΛ͚ͭΒΕͬͪΑʂ .container { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 100px 1fr 200px; grid-template-areas: "header header" "side main" "footer footer"; } 38 © Coding Design, 2017
39. GRID RANGERS > CSS Grid Layout ΤϦΞͷ໋໊ ࢠཁૉʹ grid-area ͰࢠཁૉͷҐஔΛ໊લͰࢦఆͰ͖ͬͲʂ .main { grid-area: main; } 39 © Coding Design, 2017
40. GRID RANGERS > CSS Grid Layout άϦουؒͷ༨ന 40 © Coding Design, 2017
41. GRID RANGERS > CSS Grid Layout ࢠཁૉؒͷ༨ന ਌ཁૉʹ grid-column-gap Ͱԣͷ༨നɺ ɹɹɹɹ grid-row-gap Ͱॎͷ༨നΛઃఆͰ͖Δ΂ʂ .container { /* লུ */ grid-column-gap: 20px; grid-row-gap: 30px; } 41 © Coding Design, 2017
42. GRID RANGERS > CSS Grid Layout ࣗಈ഑ஔ 42 © Coding Design, 2017
43. GRID RANGERS > CSS Grid Layout ࣗಈ഑ஔ grid-auto-flow ͰࢠཁૉΛࣗಈͰ഑ஔͰ͖Δʂ ஋͸ row, column, dense Λ࢖͍΍Μͤʂ .container { grid-auto-flow: row dense; } 43 © Coding Design, 2017
44. GRID RANGERS ஍ཕϙΠϯτ 44 © Coding Design, 2017
45. GRID RANGERS ஍ཕϙΠϯτ ࣮͸·ͩة͏͍ͱ͜Ζ͕͋ΔCSS Grid Layoutʂ গ͚ͩ͠ൈਮͯ͠Έͨʂ 45 © Coding Design, 2017
46. GRID RANGERS > ஍ཕϙΠϯτ ϒϥ΢βαϙʔτ • Can I use - CSS Grid Layout http:/ /caniuse.com/#feat=css-grid 46 © Coding Design, 2017
47. 47 © Coding Design, 2017
48. GRID RANGERS > ஍ཕϙΠϯτ ϒϥ΢βαϙʔτ • IE͸10Ҏ্αϙʔτɻͨͩ͠ɺݹ͍࢓༷ɻ 48 © Coding Design, 2017
49. ͨͩ͠ɺݹ͍࢓༷ɻ ※৽͍͠࢓༷ʹରԠதͷΑ͏Ͱ͢ɻ ࢀߟɿ Should I try to use the IE implementation of CSS Grid Layout? 49 © Coding Design, 2017
50. 50 © Coding Design, 2017
51. GRID RANGERS > ஍ཕϙΠϯτ ϒϥ΢βαϙʔτ [ݱঢ়] IE10, IE11, Edge͸ԼهͷΈରԠ • άϦουͷॎ෯ɾԣ෯ͷઃఆ • ਺஋ʹΑΔࢠཁૉͷ഑ஔ 51 © Coding Design, 2017
52. GRID RANGERS > ஍ཕϙΠϯτ IEରࡦ • [ରࡦ1] ϓϩύςΟʹ -ms- Λ͚ͭΔ(Autoprefixer!) • [ରࡦ2] ࣮૷͕ҟͳΔϓϩύςΟΛखಈͰௐ੔ 52 © Coding Design, 2017
53. GRID RANGERS > ஍ཕϙΠϯτ > IEରࡦ [ରࡦ1] ϓϩύςΟʹ -ms- Λ͚ͭΔ (Autoprefixer!) ௐ੔લ .container { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 100px 1fr 200px; } 53 © Coding Design, 2017
54. 54 © Coding Design, 2017
55. GRID RANGERS > ஍ཕϙΠϯτ > IEରࡦ [ରࡦ1] ϓϩύςΟʹ -ms- Λ͚ͭΔ(Autoprefixer!) ௐ੔ޙ .container { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 100px 1fr 200px; -ms-grid-columns: 200px 1fr; -ms-grid-rows: 100px 1fr 200px; } 55 © Coding Design, 2017
56. 56 © Coding Design, 2017
57. GRID RANGERS > ஍ཕϙΠϯτ > IEରࡦ [ରࡦ2] ࣮૷͕ҟͳΔϓϩύςΟΛख ಈͰௐ੔ ௐ੔લ .header { grid-column-start: 1; grid-column-end: 3; grid-row: 1; } 57 © Coding Design, 2017
58. GRID RANGERS > ஍ཕϙΠϯτ > IEରࡦ [ରࡦ2] ࣮૷͕ҟͳΔϓϩύςΟΛख ಈͰௐ੔ ௐ੔ޙ .header { -ms-grid-column-start: 1; -ms-grid-column-span: 2; /* IEରࡦ ͍ͭ͘ԣʹͭͳ͛Δ͔ */ -ms-grid-row: 1; } 58 © Coding Design, 2017
59. 59 © Coding Design, 2017
60. 60 © Coding Design, 2017
61. ·ͱΊ 61 © Coding Design, 2017
62. CSS Grid Layout͸ ϨΠΞ΢τ͢Δͷʹ ͢͝ʔ͘ศརʂ 62 © Coding Design, 2017
63. ͨͩ͠ɺ ର৅ϒϥ΢βʹ͸஫ҙʂ 63 © Coding Design, 2017
64. IE10, IE11, Edgeͷ ࣮૷ͷҧ͍΁ͷରࡦ͕ ࠷େͷϙΠϯτʂ 64 © Coding Design, 2017
65. ͋͞࠷ޙͷରܾͩʂ WebzillaΛಈ͔ͯ͠ GRID RANGERSͰғ΋͏ʂ 65 © Coding Design, 2017
66. 66 © Coding Design, 2017
67. ͓ͬͱɺΈΜͳ஥ྑ͠ʹ ͳͬͨΈ͍ͨͩʂ WebͷϨΠΞ΢τ͕ ͠΍͘͢ͳͬͨΜͩʂ 67 © Coding Design, 2017
68. ͋Γ͕ͱ͏!܅ͷ׆༂Ͱ ੈք͸ٹΘΕͨΑʂ 68 © Coding Design, 2017
69. ͜Ε͔Β΋CSS Grid LayoutΛ࢖ͬͯੈքΛ ٹͬͯͶʂ 69 © Coding Design, 2017
70. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠οοʂ 70 © Coding Design, 2017