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

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

もりてつ
January 28, 2017
Programming
1
920

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

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

もりてつ

January 28, 2017
Tweet

More Decks by もりてつ

See All by もりてつ
ブラウザ対応の傾向と対策 2020 / Browser compatibility trends and countermeasures 2020
m_n_t_p
0
990
PC同様の情報量と使い勝手をモバイルで確保するために / To keep the same amount of information and usability on mobile as PC
m_n_t_p
0
510
ブラウザのシェアと傾向と対策 2018改
m_n_t_p
0
350
ブラウザのシェアと傾向と対策2018
m_n_t_p
0
140
40代からのフロントエンドエンジニアリング Ver.3
m_n_t_p
0
160
Vue.jsトリビア(Vue.jsのコードネーム)
m_n_t_p
0
1.1k
単位をあやつる
m_n_t_p
2
910
グリッドレイアウト これまでとこれから
m_n_t_p
1
890
CSS Talk vol.2 Flexbox予告編
m_n_t_p
0
140

Other Decks in Programming

See All in Programming
Rails アプリ地図考 Flush Cut
makicamel
1
130
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
140
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
Formの複雑さに立ち向かう
bmthd
1
910
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
900
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
190
楽しく向き合う例外対応
okutsu
0
580
GAEログのコスト削減
mot_techtalk
0
130
CloudNativePGを布教したい
nnaka2992
0
110
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
930
Jakarta EE meets AI
ivargrimstad
0
200
コードを読んで理解するko build
bells17
1
110

Featured

See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
The Invisible Side of Design
smashingmag
299
50k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Gamification - CAS2011
davidbonilla
80
5.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
YesSQL, Process and Tooling at Scale
rocio
172
14k
BBQ
matthewcrist
87
9.5k
Visualization
eitanlees
146
15k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k

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