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.5k
今日から使える 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
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
130
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
2.3k
Click-free releases & the making of a CLI app
oheyadam
2
120
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.7k
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
120
Ethereum_.pdf
nekomatu
0
470
イベント駆動で成長して委員会
happymana
1
340
as(型アサーション)を書く前にできること
marokanatani
10
2.7k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
Macとオーディオ再生 2024/11/02
yusukeito
0
370
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
300
Featured
See All Featured
A better future with KSS
kneath
238
17k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Designing Experiences People Love
moore
138
23k
How to Ace a Technical Interview
jacobian
276
23k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Invisible Side of Design
smashingmag
298
50k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Bash Introduction
62gerente
608
210k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
900
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
A designer walks into a library…
pauljervisheath
204
24k
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?