CSS Grid Layout Module

フロントエンド夏祭り in 広島でのLT

Transcript

2. CSS Grid Layout Module Ҫ্ ୓
3. CSS Grid Layout Moduleͱ͸
4. CSS Grid Layout Moduleͱ͸ • CSS3Ͱࡦఆ͕ਐΊΒΕ͍ͯΔɺFlexible Box Layout Moduleʹ͙࣍৽ͨͳϨΠΞ΢τϞ δϡʔϧɻ • ίϯςφΛॎԣͷ֨ࢠঢ়ʹ෼ׂͯ͠ཁૉΛࣗ ༝ʹ഑ஔग़དྷΔ
5. CSS Grid Layout Module Ҫ্ ୓
6. ϒϥ΢β࣮૷ঢ়گ
7. ϒϥ΢β࣮૷ঢ়گ • Ϟμϯϒϥ΢β͸جຊతʹ࣮૷ࡁΈ
8. ʊਓਓਓਓਓਓਓʊ ʼɹ ҆ఆͷIEɹ ʻ ʉY^Y^Y^Y^Y^Yʉ
9. ॻ͖ํ
10. IFBEFS OBW NBJO TJEFCBS GPPUFS දࣔ݁Ռ
11. <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
12. .container{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 30px 30px 30px; grid-gap: 10px; } CSS
13. IFBEFS OBW NBJO TJEFCBS GPPUFS 100px 100px 100px 30px 30px 30px grid-template-columns grid-template-rows
14. .item_header, .item_footer{ grid-column: 1/4; } CSS
15. ʊਓਓਓਓਓਓਓʊ ʼɹ 1/4?? ɹ ʻ ʉY^Y^Y^Y^Y^Yʉ
16. 1 2 3 4 1 2 3 4
17. 1 2 3 4 1 2 3 4
18. ɹ͜ͷฆΒΘ͍͠ॻ͖ํ Ͳ͏ʹ͔ͳΒͳ͍ͷʁ
19. <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
20. .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
21. .container{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 30px 30px 30px; grid-gap: 10px; CSS
22. grid-template-areas: "header header header" "nav main sidebar" "footer footer footer”; } CSS
23. ʊਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ ಥવͷΞεΩʔΞʔτɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^Yʉ
24. ௚ײతͰݟ΍͍͢
25. Flexible Box Layout Module ͱ CSS Grid Layout Module
26. Ͳ͕͍͍ͬͪͷ • ௚ઢతͳ഑ஔ͸Flexible Box Layout Module • ෳࡶͳ഑ஔ͸CSS Grid Layout Module
27. ·ͱΊ
28. ·ͱΊ • Ϟμϯϒϥ΢β͸࣮૷ࡁΈͳͷͰɺ΋͏࢖ͬ ͯେৎ෉ • ΞεΩʔΞʔτͷΑ͏ͳهड़Ͱɺཁૉͷ഑ஔ͕ ؆୯͔ͭݟ΍͍͢
29. ஫ҙ • IEʹ͸ϕϯμʔϓϨϑΟοΫε͕ඞཁ • autoprefixer͕·ͩ෦෼తʹ͔͠ରԠͯ͠ͳ͍
30. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠