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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for もりてつ もりてつ
January 28, 2017
Programming
1k
1

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

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

Avatar for もりてつ

もりてつ

January 28, 2017

More Decks by もりてつ

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

Other Decks in Programming

See All in Programming
Lemonade + Foundry Toolkit でお手軽アプリ開発
Avatar for 瀬尾佳隆 seosoft
1
360
フロントエンドとバックエンドで「1文字」を揃えよう
Avatar for てきめん tekimen youkidearitai
PRO
0
710
Creating Composable Callables in Contemporary C++
Avatar for Björn Fahller rollbear
0
150
Mujeres en SEO Summit 2026 - Greatest Disaster Hits en Web Performance
Avatar for Estela Franco guaca
0
190
決定論的オーケストレーションの設計と実装 / Design and Implementation of Deterministic Orchestration
Avatar for nrs nrslib
4
1.4k
脅威をエンジニアリングの糧にして――現場編 / Turning Threats into Engineering Fuel — Field Edition
Avatar for nrs nrslib
0
290
Composerを使ったサプライチェーン攻撃の様子を眺めてみる #phpstudy
Avatar for hideki kinjyo o0h
PRO
2
250
「なぜそう決めたのか」を残し続ける仕組み ― Notion AI カスタムエージェント × Slack連携による設計判断の自動記録 - NIKKEI Tech Talk #47
Avatar for ニフティ株式会社 niftycorp
PRO
0
210
Dataformのリポジトリを立ち上げるときにまずやること / dataform-day0-2026
Avatar for snhryt snhryt
0
170
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
400
Spring Security 実践 ─ GraphQL APIで実務に役立つ 認証・認可 を学ぶ
Avatar for Wagyu wagyu
0
250
Java × distroless で 軽量なコンテナイメージを / Java on Distroless
Avatar for Daisuke Garaike contour_gara
0
550

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.2k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
230
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
970
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.3k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.9k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
8
720

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