2017年1月28日「CSS Talk vol.2」でのセッション「IE9を斬ってFlexboxを使い始めたらサクサク捗った件」のスライドです。
*&Λͬͯ'MFYCPYΛ͍࢝ΊͨΒαΫαΫḿ݄ͬͨ݅Ӭฏ$445BMLWPM
View Slide
༰ࣗݾհ 'MFYCPYͱ ࡢࠓͷϒϥβࣄ *&Δ͔ʁ Ͱɺ*&ΛͬͨΒͲ͏ͳ͔ͬͨ ࣮ྫ ߟ ·ͱΊ
ࣗݾհw Ӭฏ Γͯͭw גࣜձࣾάϥουΩϡʔϒ ϓϩμΫτ։ൃνʔϜΤϯδχΞ ˞ओʹϑϩϯτΤϯυΛ୲w ҎલిػϝʔΧʔͰιϑτΣΞ։ൃw ྸɿࡀw ͱ͖Ͳ͖ίϯτϥόε͍ͨΓήʔϜͨ͠Γ
'MFYCPYͱ
'MFYCPYͱw ਖ਼໊ࣜশɿ$44'MFYJCMF#PY-BZPVU.PEVMF 8$%SBGUɿIUUQTXXXXPSH53DTTqFYCPYw ཁૉ qFYDPOUBJOFSͱࢠཁૉ qFYJUFNͰߏqFYDPOUBJOFSqFYJUFN 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,
Ͱɺ*&ΛͬͨΒͲ͏ͳ͔ͬͨ
ΊͬͪΌḿͬͨʂ ƅ˲ƅ
*&ΛͬͨΒḿͬͨqPBUҐஔἧ͑෯ɺߴ͞NBSHJOQBEEJOH'MFYCPYͰ؆୯ʹͳΔέʔεଟ͜Ε·ͰΜͰ͖ͨॖʂ
࣮ྫ
έʔεάϩʔόϧφϏEJWVMMJBISFGlIPHFϝχϡʔBMJɹɹɹɹɿMJBISFGGVHBϝχϡʔBMJVMEJWϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔ
έʔεɿάϩʔόϧφϏEJWVMMJBISFGlIPHFϝχϡʔBMJɹɹɹɹɿMJBISFGGVHBϝχϡʔBMJVMEJWैདྷͩͱཁૉͷXJEUIΛઃఆࢠཁૉ MJʹEJTQMBZJOMJOFCMPDLࢠཁૉͷ෯ɺNBSHJOQBEEJOHʜ'MFYCPYͩͱཁૉʹEJTQMBZqFYཁૉʹKVTUJGZDPOUFOUࢦఆཁૉͷXJEUIΛઃఆࢠཁૉ໘ͳઃఆඞཁͳ͠ʂϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔ
έʔεதԝἧ͑ཁૉͷྖҬͷதԝʹࢠཁૉΛஔ͍ͨ͠
έʔεɿதԝἧ͑ࢠཁૉ͕ϒϩοΫཁૉͩͱʜʜཁૉQPTJUJPOSFMBUJWFࢠཁૉQPTJUJPOBCTPMVUFMFGUSJHIUUPQCPUUPNNBSHJOBVUP
έʔεɿதԝἧ͑'MFYCPYΛ͏ͱʜʜཁૉEJTQMBZqFYKVTUJGZDPOUFOUDFOUFSBMJHOJUFNTDFOUFSࢠཁૉ໘ͳࢦఆෆཁʂ
έʔεΧϥϜ͍͋͏͓͔͖͚͑ͤͦͨͪͭͯ͘͜͢͞͠ͱͳʹ͵Ͷͷͻ;΄·ΈΉΊɾΏɾΑΕΓΔΕΖΘɾɾɾΛ
έʔεɿΧϥϜ͍͋͏͓͔͖͚͑ͤͦͨͪͭͯ͘͜͢͞͠ͱͳʹ͵Ͷͷͻ;΄·ΈΉΊɾΏɾΑΕΓΔΕΖΘɾɾɾΛཁૉࢠཁૉ ࠨ ࢠཁૉ ӈ
έʔεɿΧϥϜ͍͋͏͓͔͖͚͑ͤͦͨͪͭͯ͘͜͢͞͠ͱͳʹ͵Ͷͷͻ;΄·ΈΉΊɾΏɾΑΕΓΔΕΖΘɾɾɾΛཁૉEJTQMBZqFYࢠཁૉ ࠨͷҐஔKVTUJGZDPOUFOUBMJHODPOUFOUΛ্͑Լࠨӈࣗ༝ࣗࡏࢠཁૉ ࠨΛғ͏EJWʹEJTQMBZqFY
έʔεɿΧϥϜ͍͋͏͓͔͖͚͑ͤͦͨͪͭͯ͘͜͢͞͠ͱͳʹ͵Ͷͷͻ;΄·ΈΉΊɾΏɾΑΕΓΔΕΖΘɾɾɾΛεϚϗͰࢠཁૉͭΛॎฒͼʹ͍ͨ͠ཁૉ!NFEJBTDSFFOBOE NBYXJEUIQY\EJWQBSFOU\qFYEJSFDUJPODPMVNO^^
έʔεɿΧϥϜ͍͋͏͓͔͖͚͑ͤͦͨͪͭͯ͘͜͢͞͠ͱͳʹ͵Ͷͷͻ;΄·ΈΉΊɾΏɾΑΕΓΔΕΖΘɾɾɾΛ͍͋͏͓͔͖͚͑ͤͦͨͪͭͯ͘͜͢͞͠ͱͳʹ͵Ͷͷͻ;΄·ΈΉΊɾΏɾΑΕΓΔΕΖΘɾɾɾΛͰɺॱ൪Λٯʹ͍ͨ͠߹ʁ1$εϚϗ
έʔεɿΧϥϜ͍͋͏͓͔͖͚͑ͤͦͨͪͭͯ͘͜͢͞͠ͱͳʹ͵Ͷͷͻ;΄·ΈΉΊɾΏɾΑΕΓΔΕΖΘɾɾɾΛ͍͋͏͓͔͖͚͑ͤͦͨͪͭͯ͘͜͢͞͠ͱͳʹ͵Ͷͷͻ;΄·ΈΉΊɾΏɾΑΕΓΔΕΖΘɾɾɾΛ1$εϚϗཁૉ!NFEJBTDSFFOBOE NBYXJEUIQY\EJWQBSFOU\qFYEJSFDUJPODPMVNOSFWFSTF^^
ʊਓਓਓਓਓਓਓਓਓਓਓਓਓʊʼɹͪΐͬͱͬͨ͋ͬʂʂɹʻʉ:?:?:?:?:?:?:?:?:?:ʉ
έʔεɿΧϥϜ͍͋͏͓͔͖͚͑ͤͦͨͪͭͯ͘͜͢͞͠ͱͳʹ͵Ͷͷͻ;΄·ΈΉΊɾΏɾΑΕΓΔΕΖΘɾɾɾΛࠓͷੈͷதϞόΠϧϑΝʔετϞόΠϧͷ࣌Λجຊʹ$44ΛΉ1$ͷ࣌ʹཁૉʹ!NFEJBTDSFFOBOE NJOXJEUIQY\EJWQBSFOU\EJTQMBZqFY^^ͱ͢Δํ͕͍͍ͷͰʁ
ݸਓతݟղ!NFEJBTDSFFOBOE NBYXJEUIQY!NFEJBTDSFFOBOE NJOXJEUIQYͲͪΒਖ਼ղɻҊ݅ʹΑ͍͚ͬͯ·͠ΐ͏˞ͨͩɺࠓޙNJOXJEUIΛ͏ํ͕ओྲྀʹͳΓͦ͏
ࠓճհ͢Δ࣮ྫҎ্Ͱ͢ɻ
ଞͷϓϩύςΟqFYHSPX qFYCBTJTͳͲʜʁ
ࠓճͷҊ݅Ͱ͜͜·Ͱڍ͛ͨέʔεͰ ΄΅ํ͕͍ͭͨͷͰ ଞͷϓϩύςΟ͍ͬͯ·ͤΜ
ࠓճͷҊ݅Ͱ͜͜·Ͱͷ࣮ྫ'MFYCPYͷػೳͷ͘͝Ұ෦͔͜͠͠Ε͚ͩͰ ίʔσΟϯά͔ͳΓָʹͳΓ·ͨ͠
ߟ
'MFYCPYΛͬͨ݁Ռίʔυྔ͔֬ʹݮͰ͖ͨ
͔͠͠ল·ͩ·͍ͩ͜ͳ͍ͤͯͳ͍ϑϨʔϜϫʔΫϥΠϒϥϦͱͷ૬ੑ
'MFYCPYͷࠓޙʁ˒ ʹ*&͕ ࣮࣭αϙʔτऴྃͳͷͰͦΕҎ߱Ұؾʹ·ΔՄೳੑେ˒ $44(SJE-BZPVU͕ීٴ͖ͯͨ͠ΒͲ͏ͳΔʁڞଘʁ फڭઓ૪ʁ
'MFYCPY༻্ͷҙϒϥβʹΑͬͯόά͋Γ ಛʹ*&·ͱΊϖʔδʮ'MFYCVHTʯIUUQTHJUIVCDPNQIJMJQXBMUPOqFYCVHT
ิ*&͕େਓͷࣄͰࣺͯΒΕͳ͍߹w qFYJCJMJUZKTΛ͏ Ұ෦ػೳ༻ෆՄw ͖͋ΒΊͯ'MFYCPYҎ֎ͷํ๏ͰؤுΔ
·ͱΊ
'MFYCPY͍͍ͧ
ͦͯ͠͏Ұݴ
'MFYCPYϚελʔʹԶͳΔʂʂ
ऴ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ