Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
IE9を斬ってFlexboxを使い始めたらサクサク捗った件
Search
もりてつ
January 28, 2017
Programming
1
980
IE9を斬ってFlexboxを使い始めたらサクサク捗った件
2017年1月28日「CSS Talk vol.2」でのセッション「IE9を斬ってFlexboxを使い始めたらサクサク捗った件」のスライドです。
もりてつ
January 28, 2017
Tweet
Share
More Decks by もりてつ
See All by もりてつ
ブラウザ対応の傾向と対策 2020 / Browser compatibility trends and countermeasures 2020
m_n_t_p
0
1.1k
PC同様の情報量と使い勝手をモバイルで確保するために / To keep the same amount of information and usability on mobile as PC
m_n_t_p
0
570
ブラウザのシェアと傾向と対策 2018改
m_n_t_p
0
390
ブラウザのシェアと傾向と対策2018
m_n_t_p
0
160
40代からのフロントエンドエンジニアリング Ver.3
m_n_t_p
0
190
Vue.jsトリビア(Vue.jsのコードネーム)
m_n_t_p
0
1.1k
単位をあやつる
m_n_t_p
2
970
グリッドレイアウト これまでとこれから
m_n_t_p
1
990
CSS Talk vol.2 Flexbox予告編
m_n_t_p
0
150
Other Decks in Programming
See All in Programming
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
100
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
7.7k
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
AI Agent 時代的開發者生存指南
eddie
4
2.1k
CSC509 Lecture 08
javiergs
PRO
0
260
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
130
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
500
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
contribution to astral-sh/uv
shunsock
0
540
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
Pythonに漸進的に型をつける
nealle
1
130
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.6k
Why Our Code Smells
bkeepers
PRO
340
57k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
Practical Orchestrator
shlominoach
190
11k
Navigating Team Friction
lara
190
15k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
Designing for Performance
lara
610
69k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Balancing Empowerment & Direction
lara
5
700
Transcript
*&Λͬͯ'MFYCPYΛ͍࢝ΊͨΒ αΫαΫḿͬͨ݅ ݄ Ӭฏ $445BMLWPM
༰ ࣗݾհ 'MFYCPYͱ ࡢࠓͷϒϥβࣄ *&Δ͔ʁ Ͱɺ*&ΛͬͨΒͲ͏ͳ͔ͬͨ
࣮ྫ ߟ ·ͱΊ
ࣗݾհ w Ӭฏ Γͯͭ w גࣜձࣾάϥουΩϡʔϒ ϓϩμΫτ։ൃνʔϜΤϯδχΞ ˞ओʹϑϩϯτΤϯυΛ୲ w
ҎલిػϝʔΧʔͰιϑτΣΞ։ൃ w ྸɿࡀ w ͱ͖Ͳ͖ίϯτϥόε͍ͨΓήʔϜͨ͠Γ
'MFYCPYͱ
'MFYCPYͱ w ਖ਼໊ࣜশɿ$44'MFYJCMF#PY-BZPVU.PEVMF 8$%SBGUɿIUUQTXXXXPSH53DTTqFYCPY w ཁૉ qFYDPOUBJOFS ͱࢠཁૉ qFYJUFN Ͱߏ
qFYDPOUBJOFS qFYJUFN qFYJUFN qFYJUFN
'MFYCPYͱ Ͱ͖Δ͜ͱ wཁૉͷαΠζ͕มԽͨ࣌͠ͷࢠཁૉͷஔ wࢠཁૉͷߴ͕͞ҧ͏࣌ͷ্ἧ͑தԝἧ͑Լἧ͑ wࢠཁૉͷॱ൪ೖΕସ͑ɺαΠζௐ wFUDʜ ϨΠΞτ͕ॊೈʹ qFYJCMF ߦ͑Δ̇
'MFYCPYͱ ରԠϒϥβ ʊਓਓਓਓਓਓʊ ʼɹ*&ඇରԠɹʻ ʉ:?:?:?:?:ʉ
*&ʜྀ͖͔͢൱͔ʁ
ࡢࠓͷϒϥβࣄ
ࡢࠓͷϒϥβࣄ ͜ͷͱ͜Ζ1$༻ϒϥβͷ γΣΞ$ISPNFڧ ݄ͷੈքγΣΞ $ISPNFɿ 'JSFGPYɿ *&ɿ 4BGBSJɿ &EHFɿ ˞σʔλࢀরɿIUUQHTTUBUDPVOUFSDPN
ࡢࠓͷϒϥβࣄ ͜ͷͱ͜Ζ1$༻ϒϥβͷ γΣΞ$ISPNFڧ ݄ͷੈքγΣΞ $ISPNFɿ 'JSFGPYɿ *&ɿ 4BGBSJɿ &EHFɿ *&Ҏ֎Ͱׂ͑
*&΄ͱΜͲ͕ *& ࣮࣭ ʹαϙʔτऴྃ ͏'MFYCPYΛ ී௨ʹ͍͍ͬͯΑͶʁ
ࡢࠓͷϒϥβࣄ ͏'MFYCPYΛ ී௨ʹ͍͍ͬͯΑͶʁ ͔͠͠ʜʜ ΞΫηεղੳ͢Δͱ *&Ұఆͷׂ߹͋Γ ۀͰͷαΠτ࡞ ͜Ε·Ͱ*&αϙʔτରͩͬͨ
͋͞Ͳ͏͢Δʁ
*&Δ͔ʁ
͏Ұ͜ͷεϥΠυΛ ͜ͷͱ͜Ζ1$༻ϒϥβͷ γΣΞ$ISPNFڧ ݄ͷੈքγΣΞ $ISPNFɿ 'JSFGPYɿ *&ɿ 4BGBSJɿ &EHFɿ *&Ҏ֎Ͱׂ͑
*&΄ͱΜͲ͕ *& ࣮࣭ ʹαϙʔτऴྃ ͏'MFYCPYΛ ී௨ʹ͍͍ͬͯΑͶʁ
͏'MFYCPYΛ ී௨ʹ͍͍ͬͯΑͶʁ
ͱ͍͏͔
'MFYCPYΛ͍͍ͨὑ
ͱ͍͏͜ͱͰ *&Λαϙʔτ֎ʹ͍͍͔ͯ͠ ଧͯ͠Έ·ͨ͠
͢ΜͳΓ0,
None
Ͱɺ*&ΛͬͨΒͲ͏ͳ͔ͬͨ
ΊͬͪΌḿͬͨʂ ƅ˲ƅ
*&ΛͬͨΒḿͬͨ qPBU Ґஔἧ͑ ෯ɺߴ͞ NBSHJO QBEEJOH 'MFYCPYͰ ؆୯ʹͳΔέʔεଟ ͜Ε·ͰΜͰ͖ͨ ॖʂ
࣮ྫ
έʔε άϩʔόϧφϏ EJW VM MJBISFGlIPHFϝχϡʔBMJ ɹɹɹɹɿ MJBISFGGVHBϝχϡʔBMJ VM EJW ϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔ
έʔεɿάϩʔόϧφϏ EJW VM MJBISFGlIPHFϝχϡʔBMJ ɹɹɹɹɿ MJBISFGGVHBϝχϡʔBMJ VM EJW ैདྷͩͱ ཁૉͷXJEUIΛઃఆ
ࢠཁૉ MJ ʹEJTQMBZJOMJOFCMPDL ࢠཁૉͷ෯ɺNBSHJOQBEEJOHʜ 'MFYCPYͩͱ ཁૉʹEJTQMBZqFY ཁૉʹKVTUJGZDPOUFOUࢦఆ ཁૉͷXJEUIΛઃఆ ࢠཁૉ໘ͳઃఆඞཁͳ͠ʂ ϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔ
έʔε தԝἧ͑ ཁૉͷྖҬͷ தԝʹࢠཁૉΛ ஔ͍ͨ͠
έʔεɿதԝἧ͑ ࢠཁૉ͕ϒϩοΫཁૉͩͱʜʜ ཁૉ QPTJUJPOSFMBUJWF ࢠཁૉ QPTJUJPOBCTPMVUF MFGU SJHIU UPQ CPUUPN
NBSHJOBVUP
έʔεɿதԝἧ͑ 'MFYCPYΛ͏ͱʜʜ ཁૉ EJTQMBZqFY KVTUJGZDPOUFOUDFOUFS BMJHOJUFNTDFOUFS ࢠཁૉ໘ͳࢦఆෆཁʂ
έʔε ΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷͻ;΄ ·ΈΉΊɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ
έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷͻ;΄ ·ΈΉΊɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ ཁૉ ࢠཁૉ ࠨ ࢠཁૉ
ӈ
έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷͻ;΄ ·ΈΉΊɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ ཁૉ EJTQMBZqFY ࢠཁૉ ࠨ
ͷҐஔ KVTUJGZDPOUFOU BMJHODPOUFOU Λ্͑Լࠨӈࣗ༝ࣗࡏ ࢠཁૉ ࠨ Λғ͏EJWʹEJTQMBZqFY
έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷͻ;΄ ·ΈΉΊɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ εϚϗͰࢠཁૉͭΛॎฒͼʹ͍ͨ͠ ཁૉ !NFEJBTDSFFOBOE NBYXJEUIQY
\ EJWQBSFOU\ qFYEJSFDUJPODPMVNO ^ ^
έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷͻ;΄ ·ΈΉΊɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷͻ;΄ ·ΈΉΊɾΏɾΑ
ΕΓΔΕΖΘɾɾɾΛ Ͱɺॱ൪Λٯʹ͍ͨ͠߹ʁ 1$ εϚϗ
έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷͻ;΄ ·ΈΉΊɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷͻ;΄ ·ΈΉΊɾΏɾΑ
ΕΓΔΕΖΘɾɾɾΛ 1$ εϚϗ ཁૉ !NFEJBTDSFFOBOE NBYXJEUIQY \ EJWQBSFOU\ qFYEJSFDUJPODPMVNOSFWFSTF ^ ^
ʊਓਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹͪΐͬͱͬͨ͋ͬʂʂɹʻ ʉ:?:?:?:?:?:?:?:?:?:ʉ
έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷͻ;΄ ·ΈΉΊɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ ࠓͷੈͷதϞόΠϧϑΝʔετ ϞόΠϧͷ࣌Λجຊʹ$44ΛΉ 1$ͷ࣌ʹཁૉʹ !NFEJBTDSFFOBOE
NJOXJEUIQY \ EJWQBSFOU\ EJTQMBZqFY ^ ^ ͱ͢Δํ͕͍͍ͷͰʁ
ݸਓతݟղ !NFEJBTDSFFOBOE NBYXJEUIQY !NFEJBTDSFFOBOE NJOXJEUIQY ͲͪΒਖ਼ղɻ Ҋ݅ʹΑ͍͚ͬͯ·͠ΐ͏ ˞ͨͩɺࠓޙNJOXJEUIΛ͏ํ͕ओྲྀʹͳΓͦ͏
ࠓճհ͢Δ࣮ྫҎ্Ͱ͢ɻ
None
ଞͷϓϩύςΟ qFYHSPX qFYCBTJTͳͲ ʜʁ
ࠓճͷҊ݅Ͱ ͜͜·Ͱڍ͛ͨέʔεͰ ΄΅ํ͕͍ͭͨͷͰ ଞͷϓϩύςΟ͍ͬͯ·ͤΜ
ࠓճͷҊ݅Ͱ ͜͜·Ͱͷ࣮ྫ 'MFYCPYͷػೳͷ͘͝Ұ෦ ͔͜͠͠Ε͚ͩͰ ίʔσΟϯά͔ͳΓָʹͳΓ·ͨ͠
ߟ
'MFYCPYΛͬͨ݁Ռ ίʔυྔ ͔֬ʹݮͰ͖ͨ
͔͠͠ল ·ͩ·ͩ ͍͜ͳ͍ͤͯͳ͍ ϑϨʔϜϫʔΫ ϥΠϒϥϦͱͷ૬ੑ
'MFYCPYͷࠓޙʁ ˒ ʹ*&͕ ࣮࣭ αϙʔτऴྃͳ ͷͰͦΕҎ߱Ұؾʹ·ΔՄೳੑେ ˒ $44(SJE-BZPVU͕ීٴ͖ͯͨ͠Β Ͳ͏ͳΔʁ ڞଘʁ
फڭઓ૪ʁ
'MFYCPY༻্ͷҙ ϒϥβʹΑͬͯόά͋Γ ಛʹ*& ·ͱΊϖʔδʮ'MFYCVHTʯ IUUQTHJUIVCDPNQIJMJQXBMUPOqFYCVHT
ิ *&͕େਓͷࣄͰࣺͯΒΕͳ͍߹ w qFYJCJMJUZKTΛ͏ Ұ෦ػೳ༻ෆՄ w ͖͋ΒΊͯ'MFYCPYҎ֎ͷํ๏ͰؤுΔ
·ͱΊ
'MFYCPY ͍͍ͧ
ͦͯ͠͏Ұݴ
'MFYCPY Ϛελʔʹ ԶͳΔʂʂ
ऴ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ