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

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

もりてつ
January 28, 2017
Programming
1
720

 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
700
PC同様の情報量と使い勝手をモバイルで確保するために / To keep the same amount of information and usability on mobile as PC
m_n_t_p
0
230
ブラウザのシェアと傾向と対策 2018改
m_n_t_p
0
180
ブラウザのシェアと傾向と対策2018
m_n_t_p
0
120
40代からのフロントエンドエンジニアリング Ver.3
m_n_t_p
0
150
Vue.jsトリビア(Vue.jsのコードネーム)
m_n_t_p
0
750
単位をあやつる
m_n_t_p
2
660
グリッドレイアウト これまでとこれから
m_n_t_p
1
550
CSS Talk vol.2 Flexbox予告編
m_n_t_p
0
130

Other Decks in Programming

See All in Programming
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
Spring BootとKubernetesで実現する今どきのDevOps入門
xblood
0
340
tidy_rpart
bk_18
0
580
xarray-Datatree: Hierarchical Data Structures for Multi-Model Science
tomnicholas
0
210
ITエンジニア特化型Q&Aサイトteratailを 言語、DB、クラウドなど フルリプレイスした話
leveragestech
0
390
フロントエンドで 良いコードを書くために
t_keshi
3
1.6k
Listかもしれない
irof
0
160
SHOWROOMの分析目的を意識した伝え方・コミュニケーション
hatapu
0
230
ポケモンで学ぶiOS 16弾丸ツアー 🚅
giginet
PRO
1
610
Ruby Pattern Matching
bkuhlmann
0
610
Rによる大規模データの処理
s_uryu
2
620
Swift Observation
shiz
3
270

Featured

See All Featured
Embracing the Ebb and Flow
colly
75
3.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1.1M
Art, The Web, and Tiny UX
lynnandtonic
284
18k
The Cult of Friendly URLs
andyhume
68
5.1k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.6k
Gamification - CAS2011
davidbonilla
75
4.1k
Infographics Made Easy
chrislema
235
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
Building Adaptive Systems
keathley
27
1.3k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
Side Projects
sachag
451
37k

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