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

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

Transcript

1. *&Λ࢐ͬͯ'MFYCPYΛ࢖͍࢝ΊͨΒ
   αΫαΫḿͬͨ݅
   ೥݄೔
   ৿Ӭ఩ฏ
   $445BMLWPM
   

   View Slide

2. ಺༰
   ࣗݾ঺հ
   'MFYCPYͱ͸
   ࡢࠓͷϒϥ΢βࣄ৘
   *&͸࢐Δ͔ʁ
   Ͱɺ*&Λ࢐ͬͨΒͲ͏ͳ͔ͬͨ
   ࣮ྫ
   ߟ࡯
   ·ͱΊ
   

   View Slide

3. ࣗݾ঺հ
   w ৿Ӭ఩ฏ ΋Γͯͭ
   
   w גࣜձࣾάϥουΩϡʔϒ

   ϓϩμΫτ։ൃνʔϜΤϯδχΞ

   ˞ओʹϑϩϯτΤϯυΛ୲౰
   w Ҏલ͸๭ిػϝʔΧʔͰιϑτ΢ΣΞ։ൃ
   w ೥ྸɿࡀ
   w ͱ͖Ͳ͖ίϯτϥόε஄͍ͨΓήʔϜͨ͠Γ
   

   View Slide

4. 'MFYCPYͱ͸
   

   View Slide

5. 'MFYCPYͱ͸
   w ਖ਼໊ࣜশɿ$44'MFYJCMF#PY-BZPVU.PEVMF

   8$%SBGUɿIUUQTXXXXPSH53DTTqFYCPY
   w ਌ཁૉ qFYDPOUBJOFS
   ͱࢠཁૉ qFYJUFN
   Ͱߏ੒
   qFYDPOUBJOFS
   qFYJUFN qFYJUFN qFYJUFN
   

   View Slide

6. 'MFYCPYͱ͸
   Ͱ͖Δ͜ͱ
   w਌ཁૉͷαΠζ͕มԽͨ࣌͠ͷࢠཁૉͷ഑ஔ
   wࢠཁૉͷߴ͕͞ҧ͏࣌ͷ্ἧ͑தԝἧ͑Լἧ͑
   wࢠཁૉͷॱ൪ೖΕସ͑ɺαΠζௐ੔
   wFUDʜ
   ϨΠΞ΢τ͕ॊೈʹ qFYJCMF
   ߦ͑Δ̇
   

   View Slide

7. 'MFYCPYͱ͸
   ରԠϒϥ΢β
   ʊਓਓਓਓਓਓʊ
   ʼɹ*&ඇରԠɹʻ
   ʉ:?:?:?:?:ʉ
   

   View Slide

8. *&ʜ഑ྀ͢΂͖͔൱͔ʁ
   

   View Slide

9. ࡢࠓͷϒϥ΢βࣄ৘
   

   View Slide

10. ࡢࠓͷϒϥ΢βࣄ৘
    ͜ͷͱ͜Ζ1$༻ϒϥ΢βͷ
    γΣΞ͸$ISPNFڧ
    ೥݄ͷੈքγΣΞ
    $ISPNFɿ
    'JSFGPYɿ
    *&ɿ
    4BGBSJɿ
    &EHFɿ
    ˞σʔλࢀরɿIUUQHTTUBUDPVOUFSDPN
    

    View Slide

11. ࡢࠓͷϒϥ΢βࣄ৘
    ͜ͷͱ͜Ζ1$༻ϒϥ΢βͷ
    γΣΞ͸$ISPNFڧ
    ೥݄ͷੈքγΣΞ
    $ISPNFɿ
    'JSFGPYɿ
    *&ɿ
    4BGBSJɿ
    &EHFɿ
    *&Ҏ֎Ͱׂ௒͑
    *&΋΄ͱΜͲ͕
    *&͸ ࣮࣭
    ʹαϙʔτऴྃ
    ΋͏'MFYCPYΛ
    ී௨ʹ࢖͍͍ͬͯΑͶʁ
    

    View Slide

12. ࡢࠓͷϒϥ΢βࣄ৘
    ΋͏'MFYCPYΛ
    ී௨ʹ࢖͍͍ͬͯΑͶʁ
    ͔͠͠ʜʜ ΞΫηεղੳ͢Δͱ
    *&΋Ұఆͷׂ߹͋Γ
    ۀ຿ͰͷαΠτ࡞੒͸
    ͜Ε·Ͱ*&΋αϙʔτର৅ͩͬͨ
    

    View Slide

13. ͋͞Ͳ͏͢Δʁ
    

    View Slide

14. *&͸࢐Δ͔ʁ
    

    View Slide

15. ΋͏Ұ౓͜ͷεϥΠυΛ
    ͜ͷͱ͜Ζ1$༻ϒϥ΢βͷ
    γΣΞ͸$ISPNFڧ
    ೥݄ͷੈքγΣΞ
    $ISPNFɿ
    'JSFGPYɿ
    *&ɿ
    4BGBSJɿ
    &EHFɿ
    *&Ҏ֎Ͱׂ௒͑
    *&΋΄ͱΜͲ͕
    *&͸ ࣮࣭
    ʹαϙʔτऴྃ
    ΋͏'MFYCPYΛ
    ී௨ʹ࢖͍͍ͬͯΑͶʁ
    

    View Slide

16. ΋͏'MFYCPYΛ
    ී௨ʹ࢖͍͍ͬͯΑͶʁ
    

    View Slide

17. ͱ͍͏͔
    

    View Slide

18. 'MFYCPYΛ࢖͍͍ͨὑ
    

    View Slide

19. ͱ͍͏͜ͱͰ
    *&Λαϙʔτ֎ʹ͍͍͔ͯ͠
    ଧ਍ͯ͠Έ·ͨ͠
    

    View Slide

20. ͢ΜͳΓ0,
    

    View Slide

21. View Slide

22. Ͱɺ*&Λ࢐ͬͨΒͲ͏ͳ͔ͬͨ
    

    View Slide

23. ΊͬͪΌḿͬͨʂ ƅ˲ƅ
    
    

    View Slide

24. *&Λ࢐ͬͨΒḿͬͨ
    qPBU
    Ґஔἧ͑
    ෯ɺߴ͞
    NBSHJO
    QBEEJOH
    'MFYCPYͰ
    ؆୯ʹͳΔέʔεଟ਺
    ͜Ε·Ͱ೰ΜͰ͖ͨ໰୊
    ޻਺୹ॖʂ
    

    View Slide

25. ࣮ྫ
    

    View Slide

26. έʔε
    άϩʔόϧφϏ
    EJW
    VM
    MJBISFGlIPHFϝχϡʔBMJ
    ɹɹɹɹɿ
    MJBISFGGVHBϝχϡʔBMJ
    VM
    EJW
    ϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔ
    

    View Slide

27. έʔεɿάϩʔόϧφϏ
    EJW
    VM
    MJBISFGlIPHFϝχϡʔBMJ
    ɹɹɹɹɿ
    MJBISFGGVHBϝχϡʔBMJ
    VM
    EJW
    ैདྷͩͱ
    ਌ཁૉͷXJEUIΛઃఆ
    ࢠཁૉ MJ
    ʹEJTQMBZJOMJOFCMPDL
    ࢠཁૉͷ෯ɺNBSHJOQBEEJOHʜ
    'MFYCPYͩͱ
    ਌ཁૉʹEJTQMBZqFY
    ਌ཁૉʹKVTUJGZDPOUFOUࢦఆ
    ਌ཁૉͷXJEUIΛઃఆ
    ࢠཁૉ͸໘౗ͳઃఆඞཁͳ͠ʂ
    ϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔ
    

    View Slide

28. έʔε
    தԝἧ͑
    ਌ཁૉͷྖҬͷ
    தԝʹࢠཁૉΛ
    ഑ஔ͍ͨ͠
    

    View Slide

29. έʔεɿதԝἧ͑
    ࢠཁૉ͕ϒϩοΫཁૉͩͱʜʜ
    ਌ཁૉ
    QPTJUJPOSFMBUJWF
    ࢠཁૉ
    QPTJUJPOBCTPMVUF
    MFGU
    SJHIU
    UPQ
    CPUUPN
    NBSHJOBVUP
    

    View Slide

30. έʔεɿதԝἧ͑
    'MFYCPYΛ࢖͏ͱʜʜ
    ਌ཁૉ
    EJTQMBZqFY
    KVTUJGZDPOUFOUDFOUFS
    BMJHOJUFNTDFOUFS
    ࢠཁૉ͸໘౗ͳࢦఆෆཁʂ
    

    View Slide

31. έʔε
    ΧϥϜ
    ͍͋͏͓͔͖͚͑͘͜
    ͤͦͨͪͭͯ͢͞͠ͱ
    ͳʹ͵Ͷͷ͸ͻ;΁΄
    ·ΈΉΊ΋΍ɾΏɾΑ
    ΕΓΔΕΖΘɾɾɾΛ
    

    View Slide

32. έʔεɿΧϥϜ
    ͍͋͏͓͔͖͚͑͘͜
    ͤͦͨͪͭͯ͢͞͠ͱ
    ͳʹ͵Ͷͷ͸ͻ;΁΄
    ·ΈΉΊ΋΍ɾΏɾΑ
    ΕΓΔΕΖΘɾɾɾΛ
    ਌ཁૉ
    ࢠཁૉ ࠨ
    ࢠཁૉ ӈ
    
    

    View Slide

33. έʔεɿΧϥϜ
    ͍͋͏͓͔͖͚͑͘͜
    ͤͦͨͪͭͯ͢͞͠ͱ
    ͳʹ͵Ͷͷ͸ͻ;΁΄
    ·ΈΉΊ΋΍ɾΏɾΑ
    ΕΓΔΕΖΘɾɾɾΛ
    ਌ཁૉ
    EJTQMBZqFY
    ࢠཁૉ ࠨ
    ͷҐஔ
    KVTUJGZDPOUFOU
    BMJHODPOUFOU
    Λ࢖͑͹্Լࠨӈࣗ༝ࣗࡏ
    ࢠཁૉ ࠨ
    Λғ͏EJWʹEJTQMBZqFY
    

    View Slide

34. έʔεɿΧϥϜ
    ͍͋͏͓͔͖͚͑͘͜
    ͤͦͨͪͭͯ͢͞͠ͱ
    ͳʹ͵Ͷͷ͸ͻ;΁΄
    ·ΈΉΊ΋΍ɾΏɾΑ
    ΕΓΔΕΖΘɾɾɾΛ
    εϚϗͰ͸ࢠཁૉͭΛॎฒͼʹ͍ͨ͠
    ਌ཁૉ
    !NFEJBTDSFFOBOE NBYXJEUIQY
    \
    EJWQBSFOU\
    qFYEJSFDUJPODPMVNO
    ^
    ^
    

    View Slide

35. έʔεɿΧϥϜ
    ͍͋͏͓͔͖͚͑͘͜
    ͤͦͨͪͭͯ͢͞͠ͱ
    ͳʹ͵Ͷͷ͸ͻ;΁΄
    ·ΈΉΊ΋΍ɾΏɾΑ
    ΕΓΔΕΖΘɾɾɾΛ
    ͍͋͏͓͔͖͚͑͘͜
    ͤͦͨͪͭͯ͢͞͠ͱ
    ͳʹ͵Ͷͷ͸ͻ;΁΄
    ·ΈΉΊ΋΍ɾΏɾΑ
    ΕΓΔΕΖΘɾɾɾΛ
    Ͱ͸ɺॱ൪Λٯʹ͍ͨ͠৔߹͸ʁ
    1$
    εϚϗ
    

    View Slide

36. έʔεɿΧϥϜ
    ͍͋͏͓͔͖͚͑͘͜
    ͤͦͨͪͭͯ͢͞͠ͱ
    ͳʹ͵Ͷͷ͸ͻ;΁΄
    ·ΈΉΊ΋΍ɾΏɾΑ
    ΕΓΔΕΖΘɾɾɾΛ
    ͍͋͏͓͔͖͚͑͘͜
    ͤͦͨͪͭͯ͢͞͠ͱ
    ͳʹ͵Ͷͷ͸ͻ;΁΄
    ·ΈΉΊ΋΍ɾΏɾΑ
    ΕΓΔΕΖΘɾɾɾΛ
    1$
    εϚϗ
    ਌ཁૉ
    !NFEJBTDSFFOBOE NBYXJEUIQY
    \
    EJWQBSFOU\
    qFYEJSFDUJPODPMVNOSFWFSTF
    ^
    ^
    

    View Slide

37. ʊਓਓਓਓਓਓਓਓਓਓਓਓਓʊ
    ʼɹͪΐͬͱ଴ͬͨ͋ͬʂʂɹʻ
    ʉ:?:?:?:?:?:?:?:?:?:ʉ
    

    View Slide

38. έʔεɿΧϥϜ
    ͍͋͏͓͔͖͚͑͘͜
    ͤͦͨͪͭͯ͢͞͠ͱ
    ͳʹ͵Ͷͷ͸ͻ;΁΄
    ·ΈΉΊ΋΍ɾΏɾΑ
    ΕΓΔΕΖΘɾɾɾΛ
    ࠓͷੈͷத͸ϞόΠϧϑΝʔετ
    ϞόΠϧͷ࣌Λجຊʹ$44Λ૊Ή
    1$ͷ࣌ʹ਌ཁૉʹ
    !NFEJBTDSFFOBOE NJOXJEUIQY
    \
    EJWQBSFOU\
    EJTQMBZqFY
    ^
    ^
    ͱ͢Δํ͕͍͍ͷͰ͸ʁ
    

    View Slide

39. ݸਓతݟղ
    !NFEJBTDSFFOBOE NBYXJEUIQY
    
    !NFEJBTDSFFOBOE NJOXJEUIQY
    
    ͲͪΒ΋ਖ਼ղɻ
    Ҋ݅ʹΑͬͯ࢖͍෼͚·͠ΐ͏
    ˞ͨͩɺࠓޙ͸NJOXJEUIΛ࢖͏ํ͕ओྲྀʹͳΓͦ͏
    

    View Slide

40. ࠓճ঺հ͢Δ࣮ྫ͸Ҏ্Ͱ͢ɻ
    

    View Slide

41. View Slide

42. ଞͷϓϩύςΟ
    qFYHSPX qFYCBTJTͳͲ
    ͸ʜʁ
    

    View Slide

43. ࠓճͷҊ݅Ͱ͸
    ͜͜·Ͱڍ͛ͨέʔεͰ

    ΄΅ํ͕͍ͭͨͷͰ

    ଞͷϓϩύςΟ͸࢖͍ͬͯ·ͤΜ
    

    View Slide

44. ࠓճͷҊ݅Ͱ͸
    ͜͜·Ͱͷ࣮ྫ͸
    'MFYCPYͷػೳͷ͘͝Ұ෦
    ͔͜͠͠Ε͚ͩͰ΋

    ίʔσΟϯά͸͔ͳΓָʹͳΓ·ͨ͠
    

    View Slide

45. ߟ࡯
    

    View Slide

46. 'MFYCPYΛ࢖ͬͨ݁Ռ
    ίʔυྔ
    ޻਺
    ͔֬ʹ࡟ݮͰ͖ͨ
    

    View Slide

47. ͔͠͠൓ল఺΋
    ·ͩ·ͩ
    ࢖͍͜ͳ͍ͤͯͳ͍
    ϑϨʔϜϫʔΫ΍
    ϥΠϒϥϦͱͷ૬ੑ
    

    View Slide

48. 'MFYCPYͷࠓޙ͸ʁ
    ˒ ʹ*&͕ ࣮࣭
    αϙʔτऴྃͳ
    ͷͰͦΕҎ߱Ұؾʹ޿·ΔՄೳੑେ
    ˒ $44(SJE-BZPVU͕ීٴ͖ͯͨ͠Β
    Ͳ͏ͳΔʁ
    ڞଘʁ फڭઓ૪ʁ
    

    View Slide

49. 'MFYCPY࢖༻্ͷ஫ҙ
    ϒϥ΢βʹΑͬͯ͸όά͋Γ ಛʹ*&
    
    ·ͱΊϖʔδʮ'MFYCVHTʯ
    IUUQTHJUIVCDPNQIJMJQXBMUPOqFYCVHT
    

    View Slide

50. ิ଍
    *&͕େਓͷࣄ৘ͰࣺͯΒΕͳ͍৔߹
    w qFYJCJMJUZKTΛ࢖͏ Ұ෦ػೳ࢖༻ෆՄ
    
    w ͖͋ΒΊͯ'MFYCPYҎ֎ͷํ๏ͰؤுΔ
    

    View Slide

51. ·ͱΊ
    

    View Slide

52. 'MFYCPY͸
    ͍͍ͧ
    

    View Slide

53. ͦͯ͠΋͏Ұݴ
    

    View Slide

54. 'MFYCPY
    Ϛελʔʹ
    Զ͸ͳΔʂʂ
    

    View Slide

55. ऴ
    ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
    

    View Slide