Upgrade to Pro — share decks privately, control downloads, hide ads and more …

広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』

2d1275668d7b6a47d4e29415994313b8?s=47 井上拓
September 27, 2017

広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』

広島フロントエンド勉強会 Vol.12のスライド

2d1275668d7b6a47d4e29415994313b8?s=128

井上拓

September 27, 2017
Tweet

More Decks by 井上拓

Other Decks in Technology

Transcript

  1. CSS Grid Layout Module Ҫ্ ୓

  2. ޿ౡϑϩϯτΤϯυษڧձ ޿ౡϑϩϯτΤϯυษڧձ͸޿ౡͰ׆ಈ͢Δϑϩ ϯτΤϯυΤϯδχΞͷ೰ΈΛղܾ͢Δू·ΓͰ ͢ɻ ຖ݄ςʔϚʹԊͬͯɺϚʔΫΞοϓɺελΠϦϯ ά౳ͷٙ໰΍೰ΈΛղܾ͠·͠ΐ͏ɻ ڞʹٙ໰΍೰Έͷղܾɺ৽ͨͳٕज़ͷशಘΛ௨͠ ͯ޿ౡͷweb੍࡞ͷϨϕϧΞοϓΛ໨ࢦ͠·͢ɻ

  3. None
  4. None
  5. 1st Anniversary

  6. • 2016/09/09 Vol.1ʰFlexboxΛ࢖͍͜ͳ͢ʱ • 2016/10/07 Vol.2ʰ։ൃΛศརʹ͢Δπʔϧͨͪʱ • 2016/11/04 Vol.3ʰθϩ͔Β࢝ΊΔReact.jsʱ •

    2016/12/17 Vol.4ʰࠓ೔͔Β࢖͑Δgulp.js ϋϯζΦϯʱ • 2017/01/13 Vol.5ʰώϩϑϩ͓೰Έ૬ஊձ ~ίʔσΟϯάฤ~ʱ • 2017/02/03 Vol.6ʰώϩϑϩ͓೰Έ૬ஊձ ~CSSฤ~ʱ
  7. • 2017/03/03 Vol.7ʰϑϩϯτΤϯυLT with LTۦಈ։ൃ&IoTLT޿ౡʱ • 2016/04/01 Vol.8ʰ࣍ੈ୅CSSΛઌऔΔʮPostCSSʯϋϯζΦϯʱ • 2016/05/13

    Vol.9ʰJavaScriptͷجૅͷ͖ʱ • 2016/06/09 Vol.10ʰPugΛ࢖ͬͨޮ཰తͳίʔσΟϯάʱ • 2016/08/05 ಛผ൛ʰ͜Ε͔Β࢝ΊΔWebVRʱ • 2016/09/08 Vol.12ʰCSS Grid Layout Moduleʱ
  8. ԆࢀՃਓ਺ 168ਓ

  9. ࠓޙͱ΋ΑΖ͓͘͠ئ͍͠·͢

  10. CSS Grid Layout Module Ҫ্ ୓

  11. ໨࣍ • CSS Grid Layout Moduleͱ͸ • ϒϥ΢β࣮૷ঢ়گ • ༻ޠ

    • ϓϩύςΟ • σϞ
  12. CSS Grid Layout Moduleͱ͸

  13. CSS Grid Layout Moduleͱ͸ • 2࣍ݩϨΠΞ΢τΛ࣮ݱ͢ΔCSSϓϩύςΟ • άϦουʹԊͬͯɺ޷͖ͳॱ൪ʹ഑ஔͨ͠Γ ݁߹ͨ͠ΓͰ͖Δ

  14. CSS Grid Layout Module Ҫ্ ୓

  15. ϒϥ΢β࣮૷ঢ়گ

  16. ϒϥ΢β࣮૷ঢ়گ • Ϟμϯϒϥ΢β͸جຊతʹ࣮૷ࡁΈ

  17. ༻ޠ

  18. ༻ޠ • ίϯςφ • άϦου • άϦουΞΠςϜ • τϥοΫ •

    Ϊϟοϓ
  19. άϦουΞΠςϜ 1 2 3 4 1 2 3 4 5

    ίϯςφ τϥοΫ Ϊϟοϓ άϦου
  20. ϓϩύςΟ

  21. IFBEFS OBW NBJO TJEFCBS GPPUFS දࣔ݁Ռ

  22. <div class="container"> <div class="item item_header">header</div> <div class="item item_nav">nav</div> <div class="item

    item_main">main</div> <div class="item item_sidebar">sidebar</div> <div class="item item_footer">footer</div> </div> HTML
  23. .container{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 30px 30px

    30px; grid-gap: 10px; } CSS
  24. IFBEFS OBW NBJO TJEFCBS GPPUFS 100px 100px 100px 30px 30px

    30px grid-template-columns grid-template-rows
  25. .item_header, .item_footer{ grid-column: 1/4; } CSS

  26. ʊਓਓਓਓਓਓਓʊ ʼɹ 1/4?? ɹ ʻ ʉY^Y^Y^Y^Y^Yʉ

  27. 1 2 3 4 1 2 3 4

  28. 1 2 3 4 1 2 3 4

  29. ɹ͜ͷฆΒΘ͍͠ॻ͖ํ Ͳ͏ʹ͔ͳΒͳ͍ͷʁ

  30. <div class="container"> <div class="item item_header">header</div> <div class="item item_nav">nav</div> <div class="item

    item_main">main</div> <div class="item item_sidebar">sidebar</div> <div class="item item_footer">footer</div> </div> HTML
  31. .item_header{grid-area: header;} .item_nav{grid-area: nav;} .item_main{grid-area: main;} .item_sidebar{grid-area: sidebar;} .item_footer{grid-area: footer;}

    CSS
  32. .container{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 30px 30px

    30px; grid-gap: 10px; CSS
  33. grid-template-areas: "header header header" "nav main sidebar" "footer footer footer”;

    } CSS
  34. IFBEFS OBW NBJO TJEFCBS GPPUFS දࣔ݁Ռ

  35. ʊਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ·ΔͰΞεΩʔΞʔτɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^ʉ

  36. repeat • ܁Γฦ͠ಉ͡஋Λهड़Ͱ͖Δ • repeat(ճ਺, ஋)

  37. .container{ grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; }

    CSS
  38. .container{ grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); } CSS

  39. fr • ૬ର୯Ґ • 1fr͸ར༻Մೳͳۭؒͷׂ߹ • grid-template-columns: 1fr 2fr 1fr;


    
 ͜ͷྫͩͱ1ྻ໨͕1/4ɺ2ྻ໨͕1/2ɺ3ྻ໨ ͕1/4ʹͳΔ
  40. .container{ grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 2fr 1fr; }

    CSS
  41. σϞ

  42. goo.gl/LhSwNc σϞϦϙδτϦ GitHub

  43. ·ͱΊ

  44. ·ͱΊ • Ϟμϯϒϥ΢β͸࣮૷ࡁΈͳͷͰɺ΋͏࢖ͬ ͯେৎ෉ • ΞεΩʔΞʔτͷΑ͏ͳهड़Ͱɺཁૉͷ഑ஔ͕ ؆୯͔ͭݟ΍͍͢

  45. ஫ҙ • IEʹ͸ϕϯμʔϓϨϑΟοΫε͕ඞཁ • autoprefixer͕·ͩ෦෼తʹ͔͠ରԠͯ͠ͳ͍