IE9を斬ってFlexboxを使い始めたらサクサク捗った件

2017年1月28日「CSS Talk vol.2」でのセッション「IE9を斬ってFlexboxを使い始めたらサクサク捗った件」のスライドです。

Transcript

1. *&Λ࢐ͬͯ'MFYCPYΛ࢖͍࢝ΊͨΒ
   αΫαΫḿͬͨ݅ ೥݄೔
   ৿Ӭ
   ఩ฏ $44
   5BML
   WPM
2. ಺༰ 
   ࣗݾ঺հ
    'MFYCPYͱ͸
    ࡢࠓͷϒϥ΢βࣄ৘
    *&͸࢐Δ͔ʁ
    Ͱɺ*&Λ࢐ͬͨΒͲ͏ͳ͔ͬͨ
    ࣮ྫ
    ߟ࡯
    ·ͱΊ
3. ࣗݾ঺հ w ৿Ӭ఩ฏ ΋Γͯͭ
   w גࣜձࣾάϥουΩϡʔϒ
 ϓϩμΫτ։ൃνʔϜ
   ΤϯδχΞ
 ˞ओʹϑϩϯτΤϯυΛ୲౰
   w Ҏલ͸๭ిػϝʔΧʔͰιϑτ΢ΣΞ։ൃ
   w ೥ྸɿࡀ
   w ͱ͖Ͳ͖ίϯτϥόε஄͍ͨΓήʔϜͨ͠Γ
4. 
   'MFYCPYͱ͸
5. 'MFYCPYͱ͸ w ਖ਼໊ࣜশɿ$44
   'MFYJCMF
   #PY
   -BZPVU
   .PEVMF
 8$
   %SBGUɿIUUQTXXXXPSH53DTTqFYCPY
   w ਌ཁૉ qFY
   DPOUBJOFS ͱࢠཁૉ qFY
   JUFN Ͱߏ੒ qFY
   DPOUBJOFS qFY
   JUFN qFY
   JUFN qFY
   JUFN
6. 'MFYCPYͱ͸ Ͱ͖Δ͜ͱ w਌ཁૉͷαΠζ͕มԽͨ࣌͠ͷࢠཁૉͷ഑ஔ
   wࢠཁૉͷߴ͕͞ҧ͏࣌ͷ্ἧ͑தԝἧ͑Լἧ͑
   wࢠཁૉͷॱ൪ೖΕସ͑ɺαΠζௐ੔
   wFUDʜ ϨΠΞ΢τ͕ॊೈʹ qFYJCMF ߦ͑Δ̇
7. 'MFYCPYͱ͸ ରԠϒϥ΢β ʊਓਓਓਓਓਓʊ
   ʼɹ*&ඇରԠɹʻ
   ʉ:?:?:?:?:ʉ
8. *&ʜ഑ྀ͢΂͖͔൱͔ʁ
9. 
   ࡢࠓͷϒϥ΢βࣄ৘
10. ࡢࠓͷϒϥ΢βࣄ৘ ͜ͷͱ͜Ζ1$༻ϒϥ΢βͷ
    γΣΞ͸$ISPNFڧ ೥݄ͷੈքγΣΞ $ISPNFɿ
    'JSFGPYɿ
    *&ɿ
    4BGBSJɿ
    &EHFɿ ˞σʔλࢀরɿIUUQHTTUBUDPVOUFSDPN
11. ࡢࠓͷϒϥ΢βࣄ৘ ͜ͷͱ͜Ζ1$༻ϒϥ΢βͷ
    γΣΞ͸$ISPNFڧ ೥݄ͷੈքγΣΞ $ISPNFɿ
    'JSFGPYɿ
    *&ɿ
    4BGBSJɿ
    &EHFɿ *&Ҏ֎Ͱׂ௒͑ *&΋΄ͱΜͲ͕ *&͸ ࣮࣭ ʹαϙʔτऴྃ ΋͏'MFYCPYΛ
    ී௨ʹ࢖͍͍ͬͯΑͶʁ
12. ࡢࠓͷϒϥ΢βࣄ৘ ΋͏'MFYCPYΛ
    ී௨ʹ࢖͍͍ͬͯΑͶʁ ͔͠͠ʜʜ ΞΫηεղੳ͢Δͱ
    *&΋Ұఆͷׂ߹͋Γ ۀ຿ͰͷαΠτ࡞੒͸
    ͜Ε·Ͱ*&΋αϙʔτର৅ͩͬͨ
13. ͋͞Ͳ͏͢Δʁ
14. 
    *&͸࢐Δ͔ʁ
15. ΋͏Ұ౓͜ͷεϥΠυΛ ͜ͷͱ͜Ζ1$༻ϒϥ΢βͷ
    γΣΞ͸$ISPNFڧ ೥݄ͷੈքγΣΞ $ISPNFɿ
    'JSFGPYɿ
    *&ɿ
    4BGBSJɿ
    &EHFɿ *&Ҏ֎Ͱׂ௒͑ *&΋΄ͱΜͲ͕ *&͸ ࣮࣭ ʹαϙʔτऴྃ ΋͏'MFYCPYΛ
    ී௨ʹ࢖͍͍ͬͯΑͶʁ
16. ΋͏'MFYCPYΛ
    ී௨ʹ࢖͍͍ͬͯΑͶʁ
17. ͱ͍͏͔
18. 'MFYCPYΛ࢖͍͍ͨὑ
19. ͱ͍͏͜ͱͰ
    *&Λαϙʔτ֎ʹ͍͍͔ͯ͠
    ଧ਍ͯ͠Έ·ͨ͠
20. ͢ΜͳΓ0,
22. 
    Ͱɺ*&Λ࢐ͬͨΒͲ͏ͳ͔ͬͨ
23. ΊͬͪΌḿͬͨʂ ƅ˲ƅ
24. *&Λ࢐ͬͨΒḿͬͨ qPBU Ґஔἧ͑ ෯ɺߴ͞ NBSHJO QBEEJOH 'MFYCPYͰ
    ؆୯ʹͳΔέʔεଟ਺ ͜Ε·Ͱ೰ΜͰ͖ͨ໰୊ ޻਺୹ॖʂ
25. 
    ࣮ྫ
26. έʔε άϩʔόϧφϏ EJW
    
    
    VM
    
    
    
    
    MJB
    ISFGlIPHFϝχϡʔBMJ
    ɹɹɹɹɿ
    
    
    
    
    MJB
    ISFGGVHBϝχϡʔBMJ
    
    
    VM
    EJW ϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔ
27. έʔεɿάϩʔόϧφϏ EJW
    
    
    VM
    
    
    
    
    MJB
    ISFGlIPHFϝχϡʔBMJ
    ɹɹɹɹɿ
    
    
    
    
    MJB
    ISFGGVHBϝχϡʔBMJ
    
    
    VM
    EJW ैདྷͩͱ
    ਌ཁૉͷXJEUIΛઃఆ
    ࢠཁૉ MJ ʹEJTQMBZJOMJOFCMPDL
    ࢠཁૉͷ෯ɺNBSHJOQBEEJOHʜ 'MFYCPYͩͱ
    ਌ཁૉʹEJTQMBZqFY
    ਌ཁૉʹKVTUJGZDPOUFOUࢦఆ
    ਌ཁૉͷXJEUIΛઃఆ
    ࢠཁૉ͸໘౗ͳઃఆඞཁͳ͠ʂ ϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔ
28. έʔε தԝἧ͑ ਌ཁૉͷྖҬͷ
    தԝʹࢠཁૉΛ
    ഑ஔ͍ͨ͠
29. έʔεɿதԝἧ͑ ࢠཁૉ͕ϒϩοΫཁૉͩͱʜʜ ਌ཁૉ
    QPTJUJPOSFMBUJWF ࢠཁૉ
    QPTJUJPOBCTPMVUF
    MFGU
    SJHIU
    UPQ
    CPUUPN
    NBSHJOBVUP
30. έʔεɿதԝἧ͑ 'MFYCPYΛ࢖͏ͱʜʜ ਌ཁૉ
    EJTQMBZqFY
    KVTUJGZDPOUFOUDFOUFS
    BMJHOJUFNTDFOUFS ࢠཁૉ͸໘౗ͳࢦఆෆཁʂ
31. έʔε ΧϥϜ ͍͋͏͓͔͖͚͑͘͜
    ͤͦͨͪͭͯ͢͞͠ͱ
    ͳʹ͵Ͷͷ͸ͻ;΁΄
    ·ΈΉΊ΋΍ɾΏɾΑ
    ΕΓΔΕΖΘɾɾɾΛ
32. έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜
    ͤͦͨͪͭͯ͢͞͠ͱ
    ͳʹ͵Ͷͷ͸ͻ;΁΄
    ·ΈΉΊ΋΍ɾΏɾΑ
    ΕΓΔΕΖΘɾɾɾΛ ਌ཁૉ ࢠཁૉ ࠨ ࢠཁૉ ӈ
33. έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜
    ͤͦͨͪͭͯ͢͞͠ͱ
    ͳʹ͵Ͷͷ͸ͻ;΁΄
    ·ΈΉΊ΋΍ɾΏɾΑ
    ΕΓΔΕΖΘɾɾɾΛ ਌ཁૉ
    EJTQMBZqFY ࢠཁૉ ࠨ ͷҐஔ KVTUJGZDPOUFOU
    BMJHODPOUFOU Λ࢖͑͹্Լࠨӈࣗ༝ࣗࡏ ࢠཁૉ ࠨ Λғ͏EJWʹEJTQMBZ
    qFY
34. έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜
    ͤͦͨͪͭͯ͢͞͠ͱ
    ͳʹ͵Ͷͷ͸ͻ;΁΄
    ·ΈΉΊ΋΍ɾΏɾΑ
    ΕΓΔΕΖΘɾɾɾΛ εϚϗͰ͸ࢠཁૉͭΛॎฒͼʹ͍ͨ͠ ਌ཁૉ
    !NFEJB
    TDSFFO
    BOE
    NBYXJEUIQY \
    EJWQBSFOU\
    qFYEJSFDUJPODPMVNO
    ^
    ^
35. έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜
    ͤͦͨͪͭͯ͢͞͠ͱ
    ͳʹ͵Ͷͷ͸ͻ;΁΄
    ·ΈΉΊ΋΍ɾΏɾΑ
    ΕΓΔΕΖΘɾɾɾΛ ͍͋͏͓͔͖͚͑͘͜
    ͤͦͨͪͭͯ͢͞͠ͱ
    ͳʹ͵Ͷͷ͸ͻ;΁΄
    ·ΈΉΊ΋΍ɾΏɾΑ
    ΕΓΔΕΖΘɾɾɾΛ Ͱ͸ɺॱ൪Λٯʹ͍ͨ͠৔߹͸ʁ 1$ εϚϗ
36. έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜
    ͤͦͨͪͭͯ͢͞͠ͱ
    ͳʹ͵Ͷͷ͸ͻ;΁΄
    ·ΈΉΊ΋΍ɾΏɾΑ
    ΕΓΔΕΖΘɾɾɾΛ ͍͋͏͓͔͖͚͑͘͜
    ͤͦͨͪͭͯ͢͞͠ͱ
    ͳʹ͵Ͷͷ͸ͻ;΁΄
    ·ΈΉΊ΋΍ɾΏɾΑ
    ΕΓΔΕΖΘɾɾɾΛ 1$ εϚϗ ਌ཁૉ
    !NFEJB
    TDSFFO
    BOE
    NBYXJEUIQY \
    EJWQBSFOU\
    qFYEJSFDUJPODPMVNOSFWFSTF
    ^
    ^
37. ʊਓਓਓਓਓਓਓਓਓਓਓਓਓʊ
    ʼɹͪΐͬͱ଴ͬͨ͋ͬʂʂɹʻ
    ʉ:?:?:?:?:?:?:?:?:?:ʉ
38. έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜
    ͤͦͨͪͭͯ͢͞͠ͱ
    ͳʹ͵Ͷͷ͸ͻ;΁΄
    ·ΈΉΊ΋΍ɾΏɾΑ
    ΕΓΔΕΖΘɾɾɾΛ ࠓͷੈͷத͸ϞόΠϧϑΝʔετ ϞόΠϧͷ࣌Λجຊʹ$44Λ૊Ή 1$ͷ࣌ʹ਌ཁૉʹ
    !NFEJB
    TDSFFO
    BOE
    NJOXJEUI
    QY \
    EJWQBSFOU\
    
    
    EJTQMBZ
    qFY
    ^
    
    ^
    ͱ͢Δํ͕͍͍ͷͰ͸ʁ
39. ݸਓతݟղ !NFEJB
    TDSFFO
    BOE
    NBYXJEUI
    QY !NFEJB
    TDSFFO
    BOE
    NJOXJEUI
    QY ͲͪΒ΋ਖ਼ղɻ
    Ҋ݅ʹΑͬͯ࢖͍෼͚·͠ΐ͏ ˞ͨͩɺࠓޙ͸NJOXJEUIΛ࢖͏ํ͕ओྲྀʹͳΓͦ͏
40. ࠓճ঺հ͢Δ࣮ྫ͸Ҏ্Ͱ͢ɻ
42. ଞͷϓϩύςΟ
    qFYHSPX qFYCBTJTͳͲ ͸ʜʁ
43. ࠓճͷҊ݅Ͱ͸ ͜͜·Ͱڍ͛ͨέʔεͰ
 ΄΅ํ͕͍ͭͨͷͰ
 ଞͷϓϩύςΟ͸࢖͍ͬͯ·ͤΜ
44. ࠓճͷҊ݅Ͱ͸ ͜͜·Ͱͷ࣮ྫ͸
    'MFYCPYͷػೳͷ͘͝Ұ෦ ͔͜͠͠Ε͚ͩͰ΋
 ίʔσΟϯά͸͔ͳΓָʹͳΓ·ͨ͠
45. 
    ߟ࡯
46. 'MFYCPYΛ࢖ͬͨ݁Ռ ίʔυྔ ޻਺ ͔֬ʹ࡟ݮͰ͖ͨ
47. ͔͠͠൓ল఺΋ ·ͩ·ͩ
    ࢖͍͜ͳ͍ͤͯͳ͍ ϑϨʔϜϫʔΫ΍
    ϥΠϒϥϦͱͷ૬ੑ
48. 'MFYCPYͷࠓޙ͸ʁ ˒ ʹ*&͕ ࣮࣭ αϙʔτऴྃͳ ͷͰͦΕҎ߱Ұؾʹ޿·ΔՄೳੑେ
    ˒ $44
    (SJE
    -BZPVU
    ͕ීٴ͖ͯͨ͠Β Ͳ͏ͳΔʁ ڞଘʁ फڭઓ૪ʁ
49. 'MFYCPY࢖༻্ͷ஫ҙ ϒϥ΢βʹΑͬͯ͸όά͋Γ ಛʹ*& ·ͱΊϖʔδʮ'MFYCVHTʯ
    IUUQTHJUIVCDPNQIJMJQXBMUPOqFYCVHT
50. ิ଍ *&͕େਓͷࣄ৘ͰࣺͯΒΕͳ͍৔߹ w qFYJCJMJUZKTΛ࢖͏ Ұ෦ػೳ࢖༻ෆՄ
    w ͖͋ΒΊͯ'MFYCPYҎ֎ͷํ๏ͰؤுΔ
51. 
    ·ͱΊ
52. 'MFYCPY͸
    ͍͍ͧ
53. ͦͯ͠΋͏Ұݴ
54. 'MFYCPY
    Ϛελʔʹ Զ͸ͳΔʂʂ
55. ऴ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ