MTDDC Meetup HOKKAIDO 2018 http://mtddc2018.mt-ezo.net/
で発表したスライドです。
ࠓ͔Β͑ΔCSS GridMTDDC Meetup HOKKAIDO 2018
View Slide
͡Ίʹ
͡Ίʹ• ࡔר ᠳେʢ͔͞·͖ ͠ΐ͏ͨΖ͏ʣ• @GeckoTang (Twitter, GitHub)• גࣜձࣾϐΫηϧάϦου• ϑϩϯτΤϯυɾΤϯδχΞ• CSS͕͖ͳਓ• CSS PANICʢ2012ʣ
CSS PANIC• 2012͝Ζ࡞ͬͨ• JSΛ͍ͬͯͳ͍• ࣌Chrome͔SafariͷΈ
ࠓ͢͜ͱ
ࠓ͢͜ͱ1.ݱࡏ·Ͱͷ༷ʑͳϨΠΞτํ๏2.CSS Gridͱ3.֤ϒϥβͷ࣮ঢ়گ4.CSS GridͰͲΜͳϨΠΞτ͕Ͱ͖Δʁ5.CSS GridΛཧղ͢ΔͨΊͷجૅࣝ6.CSS Gridͷ͍ॴɺFlexboxͱͷ͍͚7.CSS GridΛͬͨ؆୯ͳαϯϓϧΛ͍͔ͭ͘8.·ͱΊ
1. ݱࡏ·Ͱͷɹ༷ʑͳϨΠΞτํ๏1/8
ݱࡏ·Ͱͷ༷ʑͳϨΠΞτํ๏• • float• position• table-cell• inline-block• Flexbox• CSS Grid (New!)
, float, position• ੲΑͬͨ͘…• ςʔϒϧίʔσΟϯά• float, positionʹΑΔΧϥϜϨΠΞτ
display: table-cell;display: inline-block;• IE8Ͱ͑Δtable-cellinline-blockΛ ଟ༻͍ͯͨ࣌͋ͬͨ͠…
Flexbox• 2015ʙ2016͋ͨΓͰɺҰ༂༗໊ʹͳΓɺΑ͘ΘΕΔΑ͏ʹͳͬͨҹɻ
CSS Grid• 2017ʹଟ͘ͷϒϥβͰαϙʔτ͞Εͨʂ
2. CSS Gridͱ2/8
·ͣͬ͘͟ΓͱɺͲΜͳͷ͔ɻ
HTMLΛॻ͍ͯ…• ཁૉ.grid• ͍͔ͭ͘ͷࢠཁૉ• .a, .b, .c, .d, .e…
CSSΛॻ͍͍ͯ͘….grid { ɹdisplay: grid;}
CSSΛॻ͍͍ͯ͘….grid { ɹdisplay: grid;grid-template-columns: 100px 150px 100px 50px;grid-template-rows: auto 100px auto;}
CSSΛॻ͍͍ͯ͘….a {grid-column-start: 1;grid-column-end: 2;grid-row-start: 1;grid-row-end: 2;}
CSSΛॻ͍͍ͯ͘….b {grid-column-start: 3;grid-column-end: 5;grid-row-start: 2;grid-row-end: 3;}
CSSΛॻ͍͍ͯ͘….a {grid-column-start: 1;grid-column-end: 2;grid-row-start: 1;grid-row-end: 2;}.b {grid-column-start: 3;grid-column-end: 5;grid-row-start: 2;grid-row-end: 3;}
গ͠ৄ͘͠
༷ॻʹ…”ཁ͜ͷ༷ɺ UI ઃܭʹ࠷దԽ͞Εͨೋ࣍ݩ֨ࢠʹجͮ͘ϨΠΞτγεςϜʹ͍ͭͯड़Δɻ ֨ࢠϨΠΞτϞσϧʹ͓͍ͯɺ֨ࢠίϯςφͷҰ࿈ͷࢠΛɼ༧Ίఆٛ͞Εͨ flexible ʗݻఆతͳ αΠζͷϨΠΞτ֨ࢠͷதͷҙͷεϩοτʹҐஔͤ͞ΒΕΔɻ”• CSS Grid Layout Module Level 1• CSS ֨ࢠϨΠΞτ - CSS Grid LayoutModule Level 1
ཁɺΛ࡞͖ͬͯͳॴʹཁૉΛஔͰ͖Δ
ΣϒαΠτɾΞϓϦෳࡶͳϨΠΞτʹͳ͍ͬͯΔ• ͚ͩͩͱແཧɺͦͦදΈ༻• float͚ͩͩͱແཧɺͦͦจষϨΠΞτ༻• Flexbox͋Δ͚ͲɺͪΐͬͱΓͯͳ͍• CSS GridɺͦͷͨΊʹ࡞ΒΕͨ
CSS GridάϦουϨΠΞτΛ࡞Γ͍͢• ΛͬͨςʔϒϧϨΠΞτʹࣅ͍ͯΔʢͱࢥ͏…ʣ• ͷΑ͏ʹHTMLଆͰϨΠΞτߏΛ࡞ΒͣɺCSSଆͰϨΠΞτߏΛ࡞Δ͜ͱ͕Ͱ͖Δ
ྫɿHTML & CSS• ϨΠΞτใΛCSSଆʹ࣋ͭͷͰɺHTMLͷߏ͕γϯϓϧʹ• CSSͰͲ͏͍͏ׂʹ͢Δ͔ɺͲ͜ʹஔ͢Δ͔Λࢦఆ͢ΔɻTitleStatusMember ListGame WindowChat Window.grid {display: grid;grid-template-columns: auto 1fr;grid-template-rows: auto 1fr auto;}.title { grid-area: 1 / 1; }.status { grid-area: 3 / 1; }.memberList { grid-area: 2 / 1;}.gameWindow { grid-area: 1 / 2 / span 2 / auto;}.chatWindow { grid-area: 3 / 2; }
ྫɿڱ͍ը໘༻• ϝσΟΞΫΤϦΛ͍ɺϨΠΞτΛΈସ͑Δ@media (max-width: 450px) {.grid {grid-template-columns: 150px 1fr;grid-template-rows: auto auto auto auto;grid-template-areas: "title list""status list""game game""chat chat";}.title { grid-area: title; }.status { grid-area: status; }.memberList { grid-area: list; }.gameWindow { grid-area: game; }.chatWindow { grid-area: chat; }}
3. ֤ϒϥβͷɹ ࣮ঢ়گ3/8
֤ϒϥβͷ࣮ঢ়گ
IE10ͱIE11ʹҙ• IE10Ͱ୭ΑΓૣ͘CSS GridΛ࣮ (2012• IE10ͱIE11ݹ͍༷Ͱ࣮͍ͯ͠Δ…• Edge·ͨݹ͍༷Λࢀর͍͕ͯͨ͠ɺࠓͷόʔδϣϯͰ৽͍༷͠ʹରԠ͍ͯ͠Δ• IE…
IEʹͰ͖ͳ͍͜ͱ• IE10+ͰCSS Grid͑Δ͚ͲɺҰ෦ͷػೳ͕͑ͳ͍ͱ͍͏͜ͱΛ͓֮͑ͯ͘͜ͱ• άϦουΞΠςϜࣗಈͰஔ͞Εͳ͍• άϦουΤϦΞʹ໊લΛ͚ͭΔࣄ͕Ͱ͖ͳ͍
༷ͷϓϩύςΟ *&ͷϓϩύςΟ "VUPQSFpYFSͰରԠHSJEUFNQMBUFDPMVNOT NTHSJEDPMVNOT ✅HSJEUFNQMBUFSPXT NTHSJESPXT ✅HSJEUFNQMBUFBSFBT HSJEUFNQMBUF HSJEBVUPDPMVNOT HSJEBVUPSPXT HSJEBVUPqPX HSJE HSJESPXTUBSU NTHSJESPX ✅HSJEDPMVNOTUBSU NTHSJEDPMVNO ✅HSJESPXFOE HSJEDPMVNOFOE HSJESPX HSJEDPMVNO HSJEBSFB HSJESPXHBQ SPXHBQ HSJEDPMVNOHBQ DPMVNOHBQ HSJEHBQ HBQ NTHSJEDPMVNOTQBO NTHSJESPXTQBOBMJHOTFMG NTHSJEDPMVNOBMJHO ✅KVTUJGZTFMG NTHSJESPXBMJHO ✅IEͰ͑ΔCSS Gridؔ࿈ϓϩύςΟ
4. CSS GridͰɹͲΜͳϨΠΞτ͕Ͱ͖Δʁ4/8
ΣϒαΠτ• ΣϒαΠτͷେͷϨΠΞτΛ࡞Δ
ΣϒαΠτͷ ϨεϙϯγϒରԠ• ը໘෯ʹΑͬͯϨΠΞτΛมߋ͢Δ
ॎԣʹἧ͑Δඞཁͷ͋ΔϦετ• ߦͷߴ͞Ͱ͋ͬͨΓɺྻͷ෯Λἧ͑Δ
ϑΥʔϜ• ΛΘͳ͍ͰɺάϦουϨΠΞτͷϑΥʔϜΛ࡞Δ
ࡶࢽͷࢽ໘ͷΑ͏ͳϨΠΞτ• ෳࡶͳάϦουϨΠΞτ࡞ΕΔ
FlexboxͰՄೳ͔͠Εͳ͍͕...• FlexboxॎɾԣͲͪΒ͔ͷྻ͕Ͱ͖Δ• CSS Gridॎͱԣͷྻ͕Ͱ͖Δ• FlexboxʹGridʹɺͦΕͧΕಘҙͳϨΠΞτ͕͋Δ• ॎԣʹྻ͍ͤͨ͞ͷͰ͋ΕCSS Grid͕͍͍ͯΔ• CSS Gridͷ߹ɺHTMLͷߏγϯϓϧʹͳΔʢͱࢥ͏ʣ
5. CSS GridΛɹཧղ͢ΔͨΊͷɹجૅࣝ5/8
CSS GridΛཧղ͢ΔͨΊͷجૅࣝ• άϦουίϯςφͱάϦουΞΠςϜ• άϦουϥΠϯ• άϦουτϥοΫ• άϦουηϧ• άϦουΤϦΞ༻ޠ͕ଟ͍……ɻͰ͓֮͑ͯ͘ͱཧղΛॿ͚Δɻ
άϦουίϯςφͱάϦουΞΠςϜ• άϦουίϯςφɿɻେΛܾΊΔɻ• άϦουΞΠςϜɿࢠɻͲͷʹೖΔ͔ΛܾΊΔɻ
άϦουίϯςφ• display: grid;·ͨdisplay: inline-grid;͕ࢦఆ͞Εͨཁૉɻ άϦουͷׂɺׂ͞ΕͨάϦουͷྻɾߦͷ෯ɾߴ͞ͱ͍ͬͨɺϨΠΞτใΛࢦఆ͢Δɻ/* άϦουίϯςφͷࢦఆ */.grid {display: grid;grid-template-columns: 100px 100px;grid-template-rows: 100px 100px;}
άϦουΞΠςϜ•άϦουίϯςφͷԼͷࢠཁૉΛάϦουΞΠςϜͱݺͿɻάϦουΞΠςϜʹɺׂ͞ΕͨάϦουͷͲ͜ʹҐஔ͢Δ͔ͳͲΛࢦఆ͢Δɻitem item item item /* άϦουίϯςφͷࢦఆ */.grid {display: grid;grid-template-columns: 100px 100px;grid-template-rows: 100px 100px;}/* άϦουΞΠςϜͷࢦఆ */.grid__item-1 { grid-column: 1; grid-row: 1; }.grid__item-2 { grid-column: 2; grid-row: 1; }.grid__item-3 { grid-column: 1; grid-row: 2; }.grid__item-4 { grid-column: 2; grid-row: 2; }
άϦουϥΠϯ• άϦουϥΠϯɺάϦουΛԣํɾॎํʹׂ͢Δܩઢͷ͜ͱɻ• ͦͷάϦουϥΠϯଠ͕͞ͳ͘ɺݟͨʹݱΕͳ͍ɻ
άϦουτϥοΫ•άϦουτϥοΫɺ֤ྻߦΛҙຯ͢Δɻ•άϦουτϥοΫͷαΠζͳͲΛࢦఆ͢ΔͨΊʹɺgrid-template-columnsgrid-template-rowsϓϩύςΟΛάϦουίϯςφʹࢦఆ͢Δɻ
άϦουηϧ• ߦͷάϦουτϥοΫͱྻͷάϦουτϥοΫ͕ަࠩ͢ΔՕॴΛʮάϦουηϧʯͱݺͿɻ
άϦουΤϦΞ• ෳͷߦͱྻͷάϦουτϥοΫ͕ަࠩ͢ΔൣғʮάϦουΤϦΞʯͱݺͿɻ• ͜ͷάϦουΤϦΞʹ໊લΛ͚ͭΔ͜ͱ͕Ͱ͖Δɻ
໊લͷ͚ํ
ྫ: άϦουΤϦΞͷࢦఆʢHTMLʣ• 3ߦ2ྻʹׂͯ͠ɺཁૉΛஔ͍ͨ͠abcd
ྫ: άϦουΤϦΞͷࢦఆʢCSSʣ• ΞεΩʔΞʔτͷΑ͏ʹஔͰ͖Δ.grid {display: grid;grid-template-columns: 150px 1fr;grid-template-rows: 50px 1fr 50px;grid-template-areas: "c a""b a""d a";}.grid__item-a { grid-area: a; }.grid__item-b { grid-area: b; }.grid__item-c { grid-area: c; }.grid__item-d { grid-area: d; }abcd
6. CSS Gridͷ͍ॴɹFlexboxͱͷ͍͚6/8
6.CSS Gridͷ͍ॴ ɹFlexboxͱͷ͍͚1.CSS Grid͕͍͍ͯΔͷΛཧղ͢Δ2.Flexbox͕͍͍ͯΔͷΛཧղ͢Δ3.࣮ࡍͷΣϒαΠτͷίί˓˓
1. CSS Grid͕͍͍ͯΔͷ• ͍ΘΏΔάϦουϨΠΞτ• େ͖͍෦Ͱݴ͑ɺΣϒαΠτͷେ• খ͍͞෦Ͱݴ͑ɺॎԣʹἧ͑Δඞཁͷ͋ΔϦετ• ߦͱྻͰɺ෯ߴ͞Λἧ͑Δඞཁ͕͋ΔͳΒCSS Grid
2. Flexbox͕͍͍ͯΔͷ• ԣ·ͨɺॎʹฒͿઢతͳUI• λϒɺαΠυϝχϡʔɺϖʔδૹΓɺύϯͣ͘Ϧετ• ߦ͝ͱɺྻ͝ͱʹΞΠςϜΛἧ͑ΔͷͰ͋ΕFlexbox
3. ࣮ࡍͷΣϒαΠτͷίί˓˓• Ծʹɺ͜ͷΑ͏ͳαΠτΛ࡞Δͱͯ͠ɻ
αΠτͷେ෦ͷϨΠΞτ
αΠτͷେ෦ͷϨΠΞτ• CSS GridΛ͏
Ϧετ෦ͷϨΠΞτ
Ϧετ෦ͷϨΠΞτ• ॎͱԣʹ෯ߴ͞Λἧ͍͑ͨ• CSS GridΛ͏ FlexboxͰؤுΕՄೳͰ͋Δ…
UIʢݕࡧϑΥʔϜɺύϯͣ͘ɺλϒʣ
UIʢݕࡧϑΥʔϜɺύϯͣ͘ɺλϒʣ• ԣ·ͨɺॎํʹཁૉ͕ฒͿͷ• FlexboxΛ͏
ը૾ͱจষͷϨΠΞτ
ը૾ͱจষͷϨΠΞτ• ςΩετΛճΓࠐ·ͤΔͷͰ͋ΕɺfloatΛ͏• ͦ͏Ͱͳ͍ͳΒFlexboxͰɻ• ߹ʹΑͬͯCSSGridͰɻ
ͬ͘͟Γཧղ͢ΔͳΒ…• େͷϨΠΞτ → CSS Grid• ϦετͷϨΠΞτ → CSS Grid, Flexbox• UIࣗମͷϨΠΞτ → Flexbox• ը૾ͱจষͷϨΠΞτ → float, Flexbox, CSS GridͦΕͧΕͷϨΠΞτํ๏ͷಛΛཧղͯ͠ɺ͏·͘׆༻͢Δɻ
7. CSS GridΛͬͨɹ؆୯ͳαϯϓϧΛɹ͍͔ͭ͘7/8
12.grid {display: grid;grid-gap: 10px;grid-template-columns: 150px 1fr;}.grid__item:nth-child(1) {background-color: tomato;}.grid__item:nth-child(2) {background-color: gold;}2ΧϥϜ
3ΧϥϜ123.grid {display: grid;grid-gap: 10px;grid-template-columns: 150px 1fr 100px;}.grid__item:nth-child(1) {background-color: tomato;}.grid__item:nth-child(2) {background-color: gold;}.grid__item:nth-child(3) {background-color: limegreen;}
ϔομʔ,̎ΧϥϜ,ϑολʔheadersubmainfooter.grid {display: grid;grid-gap: 10px;grid-template-columns: 150px 1fr;grid-template-rows: 100px auto 100px;grid-template-areas: "header header""sub main""footer footer";}.grid__header { grid-area: header; }.grid__sub { grid-area: sub; }.grid__main { grid-area: main; }.grid__footer { grid-area: footer; }
͍͍ײ͡ͷϦετ17.grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));}
ࢀߟʹͳΔαΠτ
https://gridbyexample.com/examples/Grid by Example
http://labs.jensimmons.com/The ExperimentalLayout Lab of JenSimmons
http://cssgridgarden.com/#jaGRID GARDEN
8. ·ͱΊ8/8
7. ·ͱΊ• άϦοτϨΠΞτͱ͍͑CSS Grid• ϨΠΞτʹ߹Θͤͨదͳ͍͚Λ͢Δ• CSS Grid͏͑Δʂ• ࣮Ҋ݅Ͱ͑Δʂ• IE11ʹରԠ͢ΔͷͰ͋ΕɺIE11͕͑ͳ͍ػೳආ͚ΔɻͦΕͰेศརɻ
[PR] CodeGrid
https://www.codegrid.net/• ࣥචਞݱͷϑϩϯτΤϯυɾΤϯδχΞ• جૅ͔Β࠷৽τϨϯυٕज़·ͰಡΈ͍ͨͱ͖ʹ͙͢ಡΊΔʂ• WebɾiOSΞϓϦ × ϝʔϧϚΨδϯ• ֹ݄800ԁ(੫ൈ)ͰɺશهࣄΞΫηεʴ݄4ճ৴• ແྉهࣄɺແྉߪಡظ͕ؒ͋ΔͷͰ͓ࢼ͍ͩ͘͠͞• CodeGrid - ͜Ε͔ΒͷάϦουϨΠΞτ શ6ճ
Question?
jpt_corp_official
terhechte
ivargrimstad
daisukeshinoku
taowata
vrallev
shohata
murajun1978
tapompom
jmatsu
cromwellryan
kevinliebholz
sonatard
cassininazir
akosma
schacon
eileencodes
bkeepers
nonsquared
lauravandoore
chrisshort
philnash