FLEXBOX-MEN: Apocalypse

2016-06-11開催のHTML Party かごんま 2016で行ったセッション「FLEXBOX-MEN: Apocalypse」のスライド。

Transcript

1. FLEXBOX-MEN: Apocalypse ʙdisplay: flex Ͱ ॊೈʹϨΠΞ΢τ͠Α͏ʂʙ @HTML Party ͔͝Μ· 2016 ίʔσΟϯάσβΠϯɹ৿ ࢙ݑ 1 © Coding Design, 2016
2. ໨࣍ • ࣗݾ঺հ • FLEXBOX-MEN: Apocalypse • ϨΠΞ΢τํ๏ͷൺֱ • ศརϙΠϯτ • Flexbox • ஍ཕϙΠϯτ • ϑϨʔϜϫʔΫ • ·ͱΊ 2 © Coding Design, 2016
3. ࣗݾ঺հ 3 © Coding Design, 2016
4. ࣗݾ঺հ(1/3) • ໊લ ৿ɹ࢙ݑ ʢ΋Γɹ;ΈͷΓʣ • ੜ೥݄೔ ত࿨51೥6݄9೔ • ग़਎ɾݱॅॴ ࣛࣇౡݝࣛࣇౡࢢ • ༰࢟ ؙϝΨω 4 © Coding Design, 2016
5. ࣗݾ঺հ(2/3) • WebαΠτ੍࡞ • Webؔ࿈ٕज़ߨࢣ • Webؔ࿈ॻ੶ࣥච • ΠϕϯτӡӦ 5 © Coding Design, 2016
6. ࣗݾ঺հ(3/3) • ΧϨʔLOVE!! ⭐ΧϨʔ԰ ঊ #ঊ੝ • ϏʔϧLOVE!! ⭐৓ࢁ؍ޫϗςϧ #ελ΢τΤʔϧࠇ౶ • νϣίϨʔτLOVE!! ⭐ύςΟεϦʔϠφΪϜϥ #Ḉຎνϣίνοϓε 6 © Coding Design, 2016
7. WebͷϨΠΞ΢τ͸ ೰·͍͠ 7 © Coding Design, 2016
8. ո्ͷΑ͏ʹ ๫Ε·͘Δ 8 © Coding Design, 2016
9. Ռͨͯ͠߈ུͰ͖Δ೔ ͸དྷΔͷ͔… 9 © Coding Design, 2016
10. 10 © Coding Design, 2016
11. FLEXBOX-MEN: Apocalypse 11 © Coding Design, 2016
12. FLEXBOX-MEN: Apocalypse WebͷϨΠΞ΢τ͸ͻͱےೄͰ͸͍͔ͳ͍ʂ ͦ͏ɺ͍͋ͭ͸େո्… Webzilla!! 12 © Coding Design, 2016
13. FLEXBOX-MEN: Apocalypse ϨΠΞ΢τํ๏ͷൺֱ 13 © Coding Design, 2016
14. FLEXBOX-MEN: Apocalypse > ϨΠΞ΢τํ๏ͷൺֱ Webzilla Λ߈ུ͢Δ ༷ʑͳϨΠΞ΢τํ๏ ͕࢖ΘΕͨʂ 14 © Coding Design, 2016
15. FLEXBOX-MEN: Apocalypse > ϨΠΞ΢τํ๏ͷൺֱ 1. table 2. float 3. inline-block 4. position 15 © Coding Design, 2016
16. FLEXBOX-MEN: Apocalypse > ϨΠΞ΢τํ๏ͷൺֱ ͲΕ΋ଳʹ୹͖ͨ͢͠ ʹ௕͠… 16 © Coding Design, 2016
17. ͏ʔΉɺWebzilla͸ खڧ͍ʂ 17 © Coding Design, 2016
18. ॿ͚ͯʂ FLEXBOX-MENʂ 18 © Coding Design, 2016
19. 19 © Coding Design, 2016
20. ݺΜ͔͍ͩʂ 20 © Coding Design, 2016
21. FlexboxΛ࢖ͬͯ 21 © Coding Design, 2016
22. Ұॹʹ߈ུ͠Α͏ 22 © Coding Design, 2016
23. ͥͬ 23 © Coding Design, 2016
24. FLEXBOX-MEN: Apocalypse ศརϙΠϯτ 24 © Coding Design, 2016
25. FLEXBOX-MEN: Apocalypse > ศརϙΠϯτ FlexboxͷศརϙΠϯτͱ ࣮ࡍͷ࢖͍ํΛݟ͍ͯ͜͏ʂ 25 © Coding Design, 2016
26. FLEXBOX-MEN: Apocalypse > ศརϙΠϯτ • HTML͕ߥΕͳ͍ • ্ԼਅΜதد͕ͤͰ͖Δ • ཁૉͷฒ΂ସ͕͑Ͱ͖Δ • ཁૉͷվߦ࣌ʹ伱͕ؒͰ͖ͳ͍ • εΫϩʔϧόʔ͕දࣔ͞ΕΔ 26 © Coding Design, 2016
27. FLEXBOX-MEN: Apocalypse > ศརϙΠϯτ ͜Ε·Ͱͷ໰୊͕Ұڍʹղܾʂ Ͱ͸࢖͍ํΛݟͯΈΑ͏ʂ 27 © Coding Design, 2016
28. FLEXBOX-MEN: Apocalypse Flexbox 28 © Coding Design, 2016
29. FLEXBOX-MEN: Apocalypse > Flexbox Flexboxͷجຊ 29 © Coding Design, 2016
30. FLEXBOX-MEN: Apocalypse > Flexbox Flexboxͷجຊ Flexbox͸਌ཁૉͱࢠཁૉ͕ඞཁͩʂ <div class="container"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> </div> 30 © Coding Design, 2016
31. FLEXBOX-MEN: Apocalypse > Flexbox Flexboxͷجຊ display: flex; Ͱ਌ཁૉʹFlexboxΛઃఆ͢Δʂ .container { display: flex; } 31 © Coding Design, 2016
32. FLEXBOX-MEN: Apocalypse > Flexbox Flexboxͷجຊ flex-direction ͰࢠཁૉͷϨΠΞ΢τΛ੍ޚͰ͖Δͧʂ ஋͸ row, row-reverse, column, column-reverse ͩʂ .container { display: flex; flex-direction: column-reverse; } 32 © Coding Design, 2016
33. FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉͷਫฏํ޲ͷἧ͑ 33 © Coding Design, 2016
34. FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉͷਫฏํ޲ͷἧ͑ justify-content Ͱࢠཁૉͷਫฏํ޲ͷἧ͑Λ੍ޚͰ͖ΔΘʂ ஋͸ flex-start, flex-end, center, space-between, space-around Αʂ .container { display: flex; justify-content: center; } 34 © Coding Design, 2016
35. FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉͷਨ௚ํ޲ͷἧ͑ 35 © Coding Design, 2016
36. FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉͷਨ௚ํ޲ͷἧ͑ align-items Ͱࢠཁૉͷਨ௚ํ޲ͷἧ͑Λ੍ޚͰ͖ΔͬͪΑʂ ஋͸ flex-start, flex-end, center, baseline, stretch ͡ΌͬͲʂ .container { display: flex; align-items: center; } 36 © Coding Design, 2016
37. FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉͷંฦ͠ 37 © Coding Design, 2016
38. FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉͷંฦ͠ flex-wrap ͰࢠཁૉͷંΓฦ͠Λ੍ޚͰ͖Δͥʂ ஋͸ nowrap, wrap, wrap-reverse ͩ΂ʂ .container { display: flex; flex-wrap: wrap-reverse; } 38 © Coding Design, 2016
39. FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉ͕ॎʹ ෳ਺ฒΜͩ࣌ͷἧ͑ 39 © Coding Design, 2016
40. FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉ͕ॎʹෳ਺ฒΜͩ࣌ͷἧ͑ align-content Ͱࢠཁૉ͕ॎʹෳ਺ฒΜͩ࣌ͷἧ͑Λ੍ޚͰ͖Δʂ ஋͸ flex-start, flex-end, center, space-between, space-around Λ࢖͍ ΍Μͤʂ .container { display: flex; align-content: flex-end; } 40 © Coding Design, 2016
41. FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉ͝ͱʹࢦఆ 41 © Coding Design, 2016
42. FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉ͝ͱʹࢦఆ flex-basis Ͱݸผͷࢠཁૉͷ࠷খ෯Λ੍ޚͰ͖ͬͨͬͲʂ ஋͸ widthϓϩύςΟʹࢦఆ͢ΔΑ͏ͳ஋ ΍ͬͰͳʂ .item:nth-child(2) { flex-basis: 200px; } 42 © Coding Design, 2016
43. FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉ͝ͱʹࢦఆ align-self Ͱݸผͷࢠཁૉͷਨ௚ํ޲ͷἧ͑Λ੍ޚͰ͖ͬͪʂ ஋͸ flex-start, flex-end, center, baseline, stretch ΛೖΕ΋Μͦʂ .item:nth-child(2) { align-self: flex-end; } 43 © Coding Design, 2016
44. FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉ͝ͱʹࢦఆ order Ͱݸผͷࢠཁૉͷॱ൪Λ੍ޚͰ͖Δͧʂͨ·͕͕ͬʂ ஋͸ ਺஋ ͡ΌͬͲʂ .item:nth-child(2) { order: -1; } 44 © Coding Design, 2016
45. FLEXBOX-MEN: Apocalypse ஍ཕϙΠϯτ 45 © Coding Design, 2016
46. FLEXBOX-MEN: Apocalypse ஍ཕϙΠϯτ ࣮͸·ͩة͏͍ͱ͜Ζ͕͋ΔFlexboxʂ গ͚ͩ͠ൈਮͯ͠Έͨʂ 46 © Coding Design, 2016
47. FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ ϒϥ΢βαϙʔτ • Can I use - Flexible Box Layout Module http:/ /caniuse.com/#feat=flexbox 47 © Coding Design, 2016
48. 48 © Coding Design, 2016
49. FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ ϒϥ΢βαϙʔτ • IE͸10Ҏ্αϙʔτ • ରࡦɿ IE9ҎԼ͸floatͰϨΠΞ΢τ͢Δ͔ɺ flexibility.js Λ࢖ ͏͔ɺαϙʔτ֎ʹ͢Δ͔ • ৿͸flexibility.jsະ࢖༻ɻ͓͢͢Ί͸͠·ͤΜ 49 © Coding Design, 2016
50. FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ ϒϥ΢βαϙʔτ • Android4.3Ҏલ͸ݹ͍࢓༷Ͱͷ࣮૷ • ྫʣAndroid4.4Ҏ߱ display: flex; ɹˠ Android4.3Ҏલ display: -webkit-box; • ରࡦɿ Sass flexbox mixin Λ࢖͏͔ɺαϙʔτ֎ʹ͢Δ͔ 50 © Coding Design, 2016
51. FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ όά • IE10, IE11 • ਌ཁૉʹmin-heightΛࢦఆ͢Δͱalign-items͕ޮ͔ͳ͍ • ରࡦɿ ਌ཁૉͷ͞Βʹ਌ཁૉʹdisplay: flex; flex-direction: column;Λઃఆ 51 © Coding Design, 2016
52. FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ όά • IE10, IE11 • ࢠཁૉʹflex-basisΛઃఆ͠ͳ͍ͱ௕͍จষΛંΓฦ͞ͳ͍ • ରࡦɿ ෯ʹ߹Θͤͯࢠཁૉʹflex-basisͱmax-widthΛઃఆ • max-widthΛࢦఆ͢Δͷ͸box-sizing: border-box;ʹରԠͤ͞Δ ͨΊ 52 © Coding Design, 2016
53. FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ όά • IE10, IE11 • ࢠཁૉʹimgཁૉΛೖΕΔͱը૾ͷॎԣൺ่͕ΕΔ • ରࡦɿ ࢠཁૉ͸divཁૉͳͲΛೖΕɺͦͷதʹimgཁૉΛೖΕ Δ 53 © Coding Design, 2016
54. FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ όά ৄ͘͠͸ Flexbugs ΛνΣοΫʂओʹIE10, 11͕ଟ͍ʂ όάɾղܾࡦͷσϞ͕͋ΔΑʂ • Flexbugs 54 © Coding Design, 2016
55. FLEXBOX-MEN: Apocalypse > ஍ཕϙΠϯτ JavaScriptͰͷૢ࡞ • flex-direction΍orderͰॱ൪Λม͑ͯ΋DOMͷॱ൪͸มΘ͍ͬͯ ͳ͍ • CSSͰॱ൪Λม͑ΔલͷHTML͕ϕʔεʹ೦಄ʹஔ͘ɻ 55 © Coding Design, 2016
56. flex-direction flex-wrap justify-content align-items flex-basis… 56 © Coding Design, 2016
57. ϒϥ΢βαϙʔτ όά JavaScriptͷରԠ… 57 © Coding Design, 2016
58. ͋͋ɺ΋͏಄͕͍ͬͺ ͍ͩ͊͊͊ʂʂʂʂ 58 © Coding Design, 2016
59. ͽΜΆʔΜ 59 © Coding Design, 2016
60. ͦΜͳ͋ͳͨʹ࿕ใɻ 60 © Coding Design, 2016
61. FLEXBOX-MEN: Apocalypse ϑϨʔϜϫʔΫ 61 © Coding Design, 2016
62. FLEXBOX-MEN: Apocalypse ϑϨʔϜϫʔΫ ͜Μʹͪ͸ɻ௕׭Ͱ͢ɻ όάରࡦ΋͞ΕͯͨΓ͢ΔͷͰɺϑϨʔϜϫʔΫΛ࢖͓͏Ͷʂ 62 © Coding Design, 2016
63. FLEXBOX-MEN: Apocalypse > ϑϨʔϜϫʔΫ • Flexboxͷࣗ༝ʹ࢖͍͍ͨਓ޲͚ • Sass flexbox mixin • Autoprefixer • طଘͷFlexboxάϦουΛ࢖͍͍ͨਓ޲͚(CSS) • Flexbox Grid • FlexboxάϦουΛΧελϚΠζͯ͠࢖͍͍ͨਓ޲͚(Sass) • Flexbox Grid Sass 63 © Coding Design, 2016
64. ·ͱΊ 64 © Coding Design, 2016
65. Flexbox͸ ϨΠΞ΢τ͢Δͷʹ ͢͝ʔ͘ศརʂ 65 © Coding Design, 2016
66. ͨͩ͠ɺ ର৅ϒϥ΢βʹ͸஫ҙʂ 66 © Coding Design, 2016
67. ϒϥ΢β͝ͱʢओʹIE10,11ʣͷ όάʹ΋஫ҙʂ 67 © Coding Design, 2016
68. ͋͞࠷ޙͷରܾͩʂ WebzillaΛಈ͔ͯ͠ ಎ۸ʹೖΕΑ͏ʂ 68 © Coding Design, 2016
69. ͋Γ͕ͱ͏!܅ͷ׆༂Ͱ ੈք͸ٹΘΕͨΑʂ 69 © Coding Design, 2016
70. ͜Ε͔Β΋FlexboxΛ࢖ ͬͯੈքΛٹͬͯͶʂ 70 © Coding Design, 2016
71. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠οοʂ 71 © Coding Design, 2016