GRID RANGERS

GRID RANGERS

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

582e704d86157b464e1933c6d104cce0?s=128

Fuminori Mori

June 25, 2017
Tweet

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