CSS Grid Layout Module

広島フロントエンド勉強会 Vol.17『CSS Grid Layout Module IE対応』

Transcript

1. CSS Grid Layout Module Ҫ্ ୓
2. CSS Grid Layout Moduleͱ͸
3. CSS Grid Layout Moduleͱ͸ • 2࣍ݩϨΠΞ΢τΛ࣮ݱ͢ΔCSSϓϩύςΟ • άϦουʹԊͬͯɺ޷͖ͳॱ൪ʹ഑ஔͨ͠Γ ݁߹ͨ͠ΓͰ͖Δ
4. CSS Grid Layout Module Ҫ্ ୓
5. ϒϥ΢β࣮૷ঢ়گ
6. ϒϥ΢β࣮૷ঢ়گ • Ϟμϯϒϥ΢β͸جຊతʹ࣮૷ࡁΈ
7. ॻ͖ํ
8. IFBEFS OBW NBJO TJEFCBS GPPUFS දࣔ݁Ռ
9. <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
10. .container{ display: grid; } CSS
12. .container{ display: grid; grid-template-columns: 100px 1fr 100px; grid-template-rows: auto auto auto; } CSS
13. IFBEFS OBW NBJO TJEFCBS GPPUFS 100px 1fr 100px auto auto auto grid-template-columns grid-template-rows
14. fr • ૬ର୯Ґ • 1fr͸ར༻Մೳͳۭؒͷׂ߹ • grid-template-columns: 1fr 2fr 1fr;
 
 ͜ͷྫͩͱ1ྻ໨͕1/4ɺ2ྻ໨͕1/2ɺ3ྻ໨ ͕1/4ʹͳΔ
16. .item_header, .item_footer{ grid-column: 1/4; } CSS
17. ʊਓਓਓਓਓਓਓʊ ʼɹ 1/4?? ɹ ʻ ʉY^Y^Y^Y^Y^Yʉ
18. 1 2 3 1 2 3 )FBEFS 'PPUFS /BW $POUFOUT 4JEFCBS 4 4 grid-template-columns grid-template-rows
19. 1 2 3 1 2 3 )FBEFS 'PPUFS /BW $POUFOUT 4JEFCBS 4 4 grid-template-columns grid-template-rows
22. IE11ʹରԠͤ͞Δ
23. IE11ରԠ .container{ display: -ms-grid; -ms-grid-columns: 100px 1fr 100px; -ms-grid-rows: 1fr 1fr 1fr; }
26. IE11ରԠ .item_header{ -ms-grid-column: 1; -ms-grid-row: 1; -ms-grid-column-span: 3; }
27. IE11ରԠ .item_footer{ -ms-grid-column: 1; -ms-grid-row: 3; -ms-grid-column-span: 3; }
28. 1 2 3 1 2 3 )FBEFS 'PPUFS /BW $POUFOUT 4JEFCBS 4 4 grid-template-columns grid-template-rows
29. 1 2 3 1 2 3 )FBEFS 'PPUFS /BW $POUFOUT 4JEFCBS -ms-grid-column -ms-grid-row
31. IE11ରԠ .item_nav{ -ms-grid-column: 1; -ms-grid-row: 2; } .item_main{ -ms-grid-column: 2; -ms-grid-row: 2; } .item_sidebar{ -ms-grid-column: 3; -ms-grid-row: 2; }
33. display: grid; display: -ms-grid; grid-template-columns: -ms-grid-columns: grid-template-rows: -ms-grid-rows: ηϧͷ݁߹ -ms-grid-column-span: grid-row -ms-grid-row: grid-column -ms-grid-column:
34. ಛघͳॻ͖ํ
35. repeat • ܁Γฦ͠ಉ͡஋Λهड़Ͱ͖Δ • repeat(ճ਺, ஋)
36. .container{ grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } CSS
37. .container{ grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); } CSS
38. grid-template-areas • ΞΠςϜʹ໊લΛ͚ͭͯɺࢹ֮తʹΘ͔Γ΍͢ ͘هड़Ͱ͖Δɻ
39. <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
40. .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
41. .container{ display: grid; grid-template-columns: 100px 1fr 100px; grid-template-rows: auto auto auto; CSS
42. grid-template-areas: "header header header" "nav main sidebar" "footer footer footer”; } CSS
43. ʊਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ·ΔͰΞεΩʔΞʔτɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^ʉ
44. ʊਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹɹ ɹIE11ඇରԠɹ ɹɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^ʉ
45. ͱࢥ͍ͬͯͨΒ
47. ࢼͯ͠Έͨ
48. gulp.task('sass', () =>{ gulp.src(cmnpath + 'sass/*.scss') .pipe(plumber()) .pipe(sass()) .pipe(autoprefixer({ browsers: [ 'last 2 versions' ], grid: true, cascade: false })) .pipe(gulp.dest(cmnpath + 'css')) .pipe(browserSync.stream()); }); HVMQpMFKT
49. .container{ max-width: 600px; margin: 0 auto; display: grid; grid-template-columns: 100px 1fr 100px; grid-template-rows: 1fr 1fr 1fr; } .item_header,.item_footer{ grid-column: 1/4; } 4$44
50. .container { max-width: 600px; margin: 0 auto; display: -ms-grid; display: grid; -ms-grid-columns: 100px 1fr 100px; grid-template-columns: 100px 1fr 100px; -ms-grid-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; } .item_header, .item_footer { -ms-grid-column: 1; -ms-grid-column-span: 3; grid-column: 1/4; } $44
53. .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; } .container{ max-width: 600px; margin: 0 auto; display: grid; grid-template-columns: 100px 1fr 100px; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "header header header" "nav main sidebar" "footer footer footer"; } 4$44
54. .item_sidebar { -ms-grid-row: 2; -ms-grid-column: 3; grid-area: sidebar; } .item_footer { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: footer; } .container { max-width: 600px; margin: 0 auto; display: -ms-grid; display: grid; -ms-grid-columns: 100px 1fr 100px; grid-template-columns: 100px 1fr 100px; -ms-grid-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "header header header” "nav main sidebar” "footer footer footer"; } .item_header { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: header; } .item_nav { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: nav; } .item_main { -ms-grid-row: 2; -ms-grid-column: 2; grid-area: main; } $44
57. ·ͱΊ
58. ·ͱΊ • ϨΠΞ΢τ͕͍ͩͿָʹͭ͘ΕΔ • BootstrapΈ͍ͨʹHTML͕ԚΕͳ͍
59. ·ͱΊ • autoprefixer͕͍ͭͷؒʹ͔ਐԽ͍ͯͨ͠ɻ • autoprefixer࢖͏ͳΒgrid-template-areasΛ࢖ ͏ํ͕͍͍