$30 off During Our Annual Pro Sale. View Details »

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

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

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

もりてつ

January 28, 2017
Tweet

More Decks by もりてつ

Other Decks in Programming

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