Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

0fdc62ee683c65e17f2a90728570f455?s=128

もりてつ

January 28, 2017
Tweet

Transcript

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

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

     ࣮ྫ  ߟ࡯  ·ͱΊ
  3. ࣗݾ঺հ w ৿Ӭ఩ฏ ΋Γͯͭ  w גࣜձࣾάϥουΩϡʔϒ
 ϓϩμΫτ։ൃνʔϜΤϯδχΞ
 ˞ओʹϑϩϯτΤϯυΛ୲౰ w

    Ҏલ͸๭ిػϝʔΧʔͰιϑτ΢ΣΞ։ൃ w ೥ྸɿࡀ w ͱ͖Ͳ͖ίϯτϥόε஄͍ͨΓήʔϜͨ͠Γ
  4. 'MFYCPYͱ͸

  5. 'MFYCPYͱ͸ w ਖ਼໊ࣜশɿ$44'MFYJCMF#PY-BZPVU.PEVMF
 8$%SBGUɿIUUQTXXXXPSH53DTTqFYCPY w ਌ཁૉ qFYDPOUBJOFS ͱࢠཁૉ qFYJUFN Ͱߏ੒

    qFYDPOUBJOFS qFYJUFN qFYJUFN qFYJUFN
  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,

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

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

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

  25. ࣮ྫ

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

  27. έʔεɿάϩʔόϧφϏ EJW VM MJBISFGlIPHFϝχϡʔBMJ ɹɹɹɹɿ MJBISFGGVHBϝχϡʔ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ʹEJTQMBZqFY
  34. έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷ͸ͻ;΁΄ ·ΈΉΊ΋΍ɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ εϚϗͰ͸ࢠཁૉͭΛॎฒͼʹ͍ͨ͠ ਌ཁૉ !NFEJBTDSFFOBOE NBYXJEUIQY

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

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

    ΕΓΔΕΖΘɾɾɾΛ 1$ εϚϗ ਌ཁૉ !NFEJBTDSFFOBOE NBYXJEUIQY \ EJWQBSFOU\ qFYEJSFDUJPODPMVNOSFWFSTF ^ ^
  37. ʊਓਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹͪΐͬͱ଴ͬͨ͋ͬʂʂɹʻ ʉ:?:?:?:?:?:?:?:?:?:ʉ

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

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

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

  41. None
  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. ऴ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ