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
今日から使える CSS Grid - MTDDC Meetup HOKKAIDO 2018 -
Search
Shotaro Sakamaki
June 09, 2018
Programming
8
2.4k
今日から使える CSS Grid - MTDDC Meetup HOKKAIDO 2018 -
MTDDC Meetup HOKKAIDO 2018
http://mtddc2018.mt-ezo.net/
で発表したスライドです。
Shotaro Sakamaki
June 09, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
Laravel標準バリデーションでできること
hmb_ok
2
360
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
220
受託開発でGitLab CI を活用していく
xiombatsg
1
130
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
14
3.4k
WebComponentsで フレームワークを1ページに共存させる
webuilder240
0
150
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.8k
Honoとhtmx
yusukebe
6
1.2k
TDDと今まで
kanayannet
0
140
複雑なドメインを扱うプロダクトの探索フェーズではいつどのようにテストをするのか / How to testing during exploratory phase
boykush
2
150
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
Dockerで始めるAWS Lambda開発
stutkhd0709
14
2.5k
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
520
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Side Projects
sachag
451
41k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
In The Pink: A Labor of Love
frogandcode
137
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
Web development in the modern age
philhawksworth
201
10k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Transcript
ࠓ͔Β͑Δ CSS Grid MTDDC Meetup HOKKAIDO 2018
͡Ίʹ
͡Ίʹ • ࡔר ᠳେʢ͔͞·͖ ͠ΐ͏ͨΖ͏ʣ • @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
ݱࡏ·Ͱͷ ༷ʑͳϨΠΞτํ๏ • <table> • float • position • table-cell
• inline-block • Flexbox • CSS Grid (New!)
<table>, 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… <div class=“grid”> <div class=“a”></div> <div class=“b”></div> <div class=“c”></div> <div class=“d”></div> <div class=“e”></div> </div>
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 Layout Module Level 1
ཁɺΛ࡞ͬͯ ͖ͳॴʹཁૉΛஔͰ͖Δ
ΣϒαΠτɾΞϓϦෳࡶ ͳϨΠΞτʹͳ͍ͬͯΔ • <table>͚ͩͩͱແཧɺͦͦදΈ༻ • float͚ͩͩͱແཧɺͦͦจষϨΠΞτ༻ • Flexbox͋Δ͚ͲɺͪΐͬͱΓͯͳ͍ • CSS
GridɺͦͷͨΊʹ࡞ΒΕͨ
CSS Grid άϦουϨΠΞτΛ࡞Γ͍͢ • <table>ΛͬͨςʔϒϧϨΠΞ τʹࣅ͍ͯΔʢͱࢥ͏…ʣ • <table>ͷΑ͏ʹHTMLଆͰϨΠ ΞτߏΛ࡞ΒͣɺCSSଆͰϨ ΠΞτߏΛ࡞Δ͜ͱ͕Ͱ͖Δ
ྫɿHTML & CSS • ϨΠΞτใΛCSSଆʹ࣋ͭͷͰɺHTMLͷߏ͕γϯϓϧʹ • CSSͰͲ͏͍͏ׂʹ͢Δ͔ɺͲ͜ʹஔ͢Δ͔Λࢦఆ͢Δɻ <div class="grid"> <div
class="title">Title</div> <div class="status">Status</div> <div class="memberList">Member List</div> <div class="gameWindow">Game Window</div> <div class="chatWindow">Chat Window</div> </div> .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; } }
None
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 NTHSJESPXTQBO BMJHOTFMG NTHSJEDPMVNOBMJHO ✅ KVTUJGZTFMG NTHSJESPXBMJHO ✅ IEͰ͑ΔCSS Gridؔ࿈ϓϩύςΟ
4. CSS GridͰ ɹͲΜͳϨΠΞτ͕Ͱ͖Δʁ 4/8
ΣϒαΠτ • ΣϒαΠτͷେͷϨΠΞτΛ࡞Δ
ΣϒαΠτͷ ϨεϙϯγϒରԠ • ը໘෯ʹΑͬͯϨΠΞτΛมߋ͢Δ
ॎԣʹἧ͑Δඞཁͷ͋Δ Ϧετ • ߦͷߴ͞Ͱ͋ͬͨΓɺྻͷ෯Λἧ͑Δ
ϑΥʔϜ • <table>ΛΘͳ͍ͰɺάϦουϨΠΞτͷϑΥʔϜΛ࡞Δ
ࡶࢽͷࢽ໘ͷΑ͏ͳ ϨΠΞτ • ෳࡶͳάϦουϨΠΞτ࡞ΕΔ
FlexboxͰՄೳ͔͠Εͳ͍͕... • FlexboxॎɾԣͲͪΒ͔ͷྻ͕Ͱ͖Δ • CSS Gridॎͱԣͷྻ͕Ͱ͖Δ • FlexboxʹGridʹɺͦΕͧΕಘҙͳϨΠΞτ͕͋Δ • ॎԣʹྻ͍ͤͨ͞ͷͰ͋ΕCSS
Grid͕͍͍ͯΔ • CSS Gridͷ߹ɺHTMLͷߏγϯϓϧʹͳΔʢͱࢥ͏ʣ
5. CSS GridΛ ɹཧղ͢ΔͨΊͷ ɹجૅࣝ 5/8
CSS GridΛཧղ͢ΔͨΊͷ جૅࣝ • άϦουίϯςφͱάϦουΞΠςϜ • άϦουϥΠϯ • άϦουτϥοΫ •
άϦουηϧ • άϦουΤϦΞ ༻ޠ͕ଟ͍……ɻͰ͓֮͑ͯ͘ͱཧղΛॿ͚Δɻ
άϦουίϯςφͱάϦουΞΠςϜ • άϦουίϯςφɿɻେΛܾΊΔɻ • άϦουΞΠςϜɿࢠɻͲͷʹೖΔ͔ΛܾΊΔɻ
άϦουίϯςφ • display: grid;·ͨdisplay: inline-grid;͕ࢦఆ͞Εͨཁૉɻ άϦουͷׂɺׂ͞ΕͨάϦουͷྻɾߦͷ෯ɾߴ͞ͱ͍ͬͨɺ ϨΠΞτใΛࢦఆ͢Δɻ <div class="grid"></div> /*
άϦουίϯςφͷࢦఆ */ .grid { display: grid; grid-template-columns: 100px 100px; grid-template-rows: 100px 100px; }
άϦουΞΠςϜ •άϦουίϯςφͷԼͷࢠཁૉΛάϦουΞΠςϜͱݺͿɻάϦο υΞΠςϜʹɺׂ͞ΕͨάϦουͷͲ͜ʹҐஔ͢Δ͔ͳͲΛࢦఆ ͢Δɻ <div class="grid"><!-- άϦουίϯςφ --> <div class="grid__item-1">item</div>
<!-- άϦουΞΠςϜ --> <div class="grid__item-2">item</div> <!-- άϦουΞΠςϜ --> <div class="grid__item-3">item</div> <!-- άϦουΞΠςϜ --> <div class="grid__item-4">item</div> <!-- άϦουΞΠςϜ --> </div> /* άϦουίϯςφͷࢦఆ */ .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ྻʹׂͯ͠ɺཁૉΛஔ͍ͨ͠ <div class="grid"> <div class="grid__item-a">a</div> <div class="grid__item-b">b</div>
<div class="grid__item-c">c</div> <div class="grid__item-d">d</div> </div>
ྫ: άϦουΤϦΞͷࢦఆʢ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; } <div class="grid"> <div class="grid__item-a">a</div> <div class="grid__item-b">b</div> <div class="grid__item-c">c</div> <div class="grid__item-d">d</div> </div>
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Ͱɻ • ߹ʹΑͬͯCSS
GridͰɻ
ͬ͘͟Γཧղ͢ΔͳΒ… • େͷϨΠΞτ → CSS Grid • ϦετͷϨΠΞτ → CSS
Grid, Flexbox • UIࣗମͷϨΠΞτ → Flexbox • ը૾ͱจষͷϨΠΞτ → float, Flexbox, CSS Grid ͦΕͧΕͷϨΠΞτํ๏ͷಛΛ ཧղͯ͠ɺ͏·͘׆༻͢Δɻ
7. CSS GridΛͬͨ ɹ؆୯ͳαϯϓϧΛ ɹ͍͔ͭ͘ 7/8
<div class="grid"> <div class="grid__item">1</div> <div class="grid__item">2</div> </div> .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ΧϥϜ <div class="grid"> <div class="grid__item">1</div> <div class="grid__item">2</div> <div class="grid__item">3</div> </div>
.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; }
ϔομʔ,̎ΧϥϜ,ϑολʔ <div class="grid"> <div class="grid__header">header</div> <div class="grid__sub">sub</div> <div class="grid__main">main</div> <div
class="grid__footer">footer</div> </div> .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; }
͍͍ײ͡ͷϦετ <div class="grid"> <div class="grid__item">1</div> <!-- লུ --> <div class="grid__item">7</div>
</div> .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
ࢀߟʹͳΔαΠτ
https://gridbyexample.com/examples/ Grid by Example
http://labs.jensimmons.com/ The Experimental Layout Lab of Jen Simmons
http://cssgridgarden.com/#ja GRID GARDEN
8. ·ͱΊ 8/8
7. ·ͱΊ • άϦοτϨΠΞτͱ͍͑CSS Grid • ϨΠΞτʹ߹Θͤͨదͳ͍͚Λ͢Δ • CSS Grid͏͑Δʂ
• ࣮Ҋ݅Ͱ͑Δʂ • IE11ʹରԠ͢ΔͷͰ͋ΕɺIE11͕͑ͳ͍ ػೳආ͚ΔɻͦΕͰेศརɻ
[PR] CodeGrid
https://www.codegrid.net/ • ࣥචਞݱͷϑϩϯτΤϯυɾΤϯδχΞ • جૅ͔Β࠷৽τϨϯυٕज़·ͰಡΈ͍ͨͱ͖ʹ͙͢ಡΊΔʂ • WebɾiOSΞϓϦ × ϝʔϧϚΨδϯ •
ֹ݄800ԁ(੫ൈ)ͰɺશهࣄΞΫηεʴ݄4ճ৴ • ແྉهࣄɺແྉߪಡظ͕ؒ͋ΔͷͰ͓ࢼ͍ͩ͘͠͞ • CodeGrid - ͜Ε͔ΒͷάϦουϨΠΞτ શ6ճ
Question?