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