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
Developer Joy == Developer Productivity (really!)
hollycummins
1
210
GraphQL あるいは React における自律的なデータ取得について
quramy
11
3k
2024 컴포즈 정원사
jisungbin
0
150
Go Code Generation at newmo / 2024-08-27 #newmo_layerx_go
genkey6
0
560
Ruby Parser progress report 2024
yui_knk
2
230
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
990
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
650
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
410
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
400
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1.1k
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Music & Morning Musume
bryan
46
6k
A Philosophy of Restraint
colly
202
16k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Six Lessons from altMBA
skipperchong
26
3.4k
Designing Experiences People Love
moore
138
23k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
The Cult of Friendly URLs
andyhume
76
6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Embracing the Ebb and Flow
colly
83
4.4k
Fireside Chat
paigeccino
31
2.9k
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?