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
sqlcを利用してsqlに型付けを
kamiyam
0
230
pytest プラグインを開発して DRY に自動テストを書こう
inuatsu
2
250
XP2024 っていう国際会議に行ってきたよの記 / XP2024 Conference Report
bonotake
4
180
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
1.1k
CSC305 Lecture 01
javiergs
PRO
1
140
Cancel Next.js Page Navigation: Full Throttle
ypresto
1
130
推しの夫に恋のGPS「ときメーター」#M5Stack #IoT #M5JPTour2024
riyu
0
220
(Deep|Web) Link support with expo-router
mrtry
0
120
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
270
C#および.NETに対する誤解をひも解く
ymd65536
0
230
Subclassing, Composition, Python, and You
hynek
3
110
Infrastructure as Code でセキュリティを楽にしよう!
konokenj
5
1.4k
Featured
See All Featured
Speed Design
sergeychernyshev
22
470
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
1
250
Mobile First: as difficult as doing things right
swwweet
222
8.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
44
2k
Testing 201, or: Great Expectations
jmmastey
38
7k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Facilitating Awesome Meetings
lara
49
6k
Faster Mobile Websites
deanohume
304
30k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
48k
How GitHub Uses GitHub to Build GitHub
holman
473
290k
Web development in the modern age
philhawksworth
205
10k
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?