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

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

Transcript

1. CSS Grid Layout Module Ҫ্ ୓
2. ޿ౡϑϩϯτΤϯυษڧձ ޿ౡϑϩϯτΤϯυษڧձ͸޿ౡͰ׆ಈ͢Δϑϩ ϯτΤϯυΤϯδχΞͷ೰ΈΛղܾ͢Δू·ΓͰ ͢ɻ ຖ݄ςʔϚʹԊͬͯɺϚʔΫΞοϓɺελΠϦϯ ά౳ͷٙ໰΍೰ΈΛղܾ͠·͠ΐ͏ɻ ڞʹٙ໰΍೰Έͷղܾɺ৽ͨͳٕज़ͷशಘΛ௨͠ ͯ޿ౡͷweb੍࡞ͷϨϕϧΞοϓΛ໨ࢦ͠·͢ɻ
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͕·ͩ෦෼తʹ͔͠ରԠͯ͠ͳ͍