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.6k
今日から使える 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
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.5k
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
880
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
170
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
110
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
280
Rails アプリ地図考 Flush Cut
makicamel
1
130
GoとPHPのインターフェイスの違い
shimabox
2
210
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
240
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
2
440
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
250
バッチを作らなきゃとなったときに考えること
irof
2
520
コードを読んで理解するko build
bells17
1
110
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
A designer walks into a library…
pauljervisheath
205
24k
The Cult of Friendly URLs
andyhume
78
6.2k
Making Projects Easy
brettharned
116
6k
Bash Introduction
62gerente
611
210k
GitHub's CSS Performance
jonrohan
1030
460k
KATA
mclloyd
29
14k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Designing for humans not robots
tammielis
250
25k
It's Worth the Effort
3n
184
28k
Building an army of robots
kneath
303
45k
BBQ
matthewcrist
87
9.5k
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?