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
GRID RANGERS
Search
Fuminori Mori
June 25, 2017
Technology
0
210
GRID RANGERS
2017-06-24開催のMOBILE CONFERENCE 2017 in Kagoshimaで行ったセッション「GRID RANGERS」のスライドです。
Fuminori Mori
June 25, 2017
Tweet
Share
More Decks by Fuminori Mori
See All by Fuminori Mori
JSを使わなくてもCSSでできるようになったこと
moonglows76
0
1.7k
FLEXBOX-MEN: Apocalypse
moonglows76
4
450
Other Decks in Technology
See All in Technology
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
440
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
240
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
290
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
380
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
470
データベース02: データベースの概念
trycycle
0
160
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
200
VS CodeでAWSを操作しよう
smt7174
7
1.6k
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
380
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
300
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
210
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Faster Mobile Websites
deanohume
299
30k
Gamification - CAS2011
davidbonilla
76
4.6k
Statistics for Hackers
jakevdp
789
220k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Navigating Team Friction
lara
178
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
What's new in Ruby 2.0
geeforr
337
31k
Typedesign – Prime Four
hannesfritz
36
2.1k
For a Future-Friendly Web
brad_frost
172
9k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Transcript
GRID RANGERS display: grid Ͱ ࣗ༝ͳϨΠΞτΛखʹೖΕΑ͏ʂ @Mobile Conference 2017 in
Kagoshima ίʔσΟϯάσβΠϯɹ ࢙ݑ 1 © Coding Design, 2017
࣍ • ࣗݾհ • GRID RANGERS • ศརϙΠϯτ • CSS
Grid Layout • ཕϙΠϯτ • ·ͱΊ 2 © Coding Design, 2017
ࣗݾհ 3 © Coding Design, 2017
ࣗݾհ(1/3) • ໊લ ɹ࢙ݑ ʢΓɹ;ΈͷΓʣ • ੜ݄ ত516݄9 • ग़ɾݱॅॴ
ࣛࣇౡݝࣛࣇౡࢢ • ༰࢟ ؙϝΨω 4 © Coding Design, 2017
ࣗݾհ(2/3) • WebαΠτ੍࡞ • Webؔ࿈ٕज़ߨࢣ • ௩ֶԂλϥσβΠϯઐֶߍ • Webؔ࿈ॻ੶ࣥච •
HTML5&CSS3ϙέοτϦϑΝϨϯε ʢٕज़ධࣾץʣ • ΠϕϯτӡӦ • ͯ͛Webʢຖ݄݄͋ͨΓʣ 5 © Coding Design, 2017
ࣗݾհ(3/3) • ΧϨʔLOVE!! ⭐ΧϨʔ ঊ #ঊ • ϏʔϧLOVE!! ⭐ࢁ؍ޫϗςϧ #ελτΤʔϧࠇ
• νϣίϨʔτLOVE!! ⭐ύςΟεϦʔϠφΪϜϥ #Ḉຎνϣίνοϓε 6 © Coding Design, 2017
WebͷϨΠΞτ ·͍͠ 7 © Coding Design, 2017
ࡢFLEXBOX͕߈ུ͠ ͨͣͳͷʹ… 8 © Coding Design, 2017
͍͋ͭ·ͩੜ͖͍ͯͨʂ 9 © Coding Design, 2017
10 © Coding Design, 2017
WebͷϨΠΞτͻͱےೄͰ͍͔ͳ͍ʂ ͦ͏ɺ͍͋ͭେո्… Webzilla!! 11 © Coding Design, 2017
GRID RANGERS ʙdisplay: grid Ͱ ͞Βʹࣗ༝ͳϨΠΞτΛ खʹೖΕΑ͏ʂʙ 12 © Coding
Design, 2017
ॿ͚ͯʂ GRID RANGERSʂ 13 © Coding Design, 2017
14 © Coding Design, 2017
ݺΜ͔͍ͩʂ 15 © Coding Design, 2017
Grid LayoutΛͬͯ 16 © Coding Design, 2017
Ұॹʹ߈ུ͠Α͏ 17 © Coding Design, 2017
ͥͬ 18 © Coding Design, 2017
GRID RANGERS ศརϙΠϯτ 19 © Coding Design, 2017
GRID RANGERS > ศརϙΠϯτ Grid LayoutͷศརϙΠϯτ Λݟ͍ͯ͜͏ʂ 20 © Coding
Design, 2017
GRID RANGERS > ศརϙΠϯτ • HTML͕γϯϓϧ • CSS͕γϯϓϧ • ϖʔδશମͷϨΠΞτΛมߋ͍͢͠
• ϒϩοΫΛ͖ͭ͠ΊΔϨΠΞτ͕Ͱ͖Δ 21 © Coding Design, 2017
GRID RANGERS > ศརϙΠϯτ Ͱ͍ํΛݟͯΈΑ͏ʂ 22 © Coding Design, 2017
αϯϓϧΛݟ͍ͨਓ͍·͙͢ԼͷURLʹΞΫηεʂ https:/ /goo.gl/DKX8Z5 23 © Coding Design, 2017
GRID RANGERS CSS Grid Layout 24 © Coding Design, 2017
GRID RANGERS > CSS Grid Layout άϦου(֨ࢠ)ͷઃఆ 25 © Coding
Design, 2017
GRID RANGERS > CSS Grid Layout άϦου(֨ࢠ)ͷઃఆ CSS Grid Layoutཁૉͱࢠཁૉ͕ඞཁͩʂ
<div class="container"> <div class="header">header</div> <div class="main">main</div> <div class="footer">footer</div> </div> 26 © Coding Design, 2017
GRID RANGERS > CSS Grid Layout άϦου(֨ࢠ)ͷઃఆ display: grid; ͰཁૉʹCSS
Grid LayoutΛઃఆ͢Δʂ .container { display: grid; } ͦͯ͠ɺάϦουͷॎ෯ɾԣ෯ͷઃఆͩʂ 27 © Coding Design, 2017
GRID RANGERS > CSS Grid Layout άϦου(֨ࢠ)ͷઃఆ grid-template-columnsͰάϦουͷԣ෯ɺ grid-template-rowsͰάϦουͷॎ෯ΛઃఆͰ͖Δͧʂ .container
{ display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 100px 1fr 200px; } 28 © Coding Design, 2017
GRID RANGERS > CSS Grid Layout άϦου(֨ࢠ)ͷઃఆ fr ৽͍͠୯Ґͩʂ༨ͬͨྖҬΛࢦఆ͢Δͷʹ͑Δͧʂ 1fr
1frͱ͢Ε2ׂɺ1fr 2frͱ͢Ε1/3, 2/3ʹׂͰ͖Δͧʂ .container { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 100px 1fr 200px; } 29 © Coding Design, 2017
grid-template-columns - CSS | MDN 30 © Coding Design, 2017
FirefoxNightlyΛ͏ͱάϦου͕ݟ͑ͯศརͩͧʂ 31 © Coding Design, 2017
Powerful New Additions to the CSS Grid Inspector in Firefox
Nightly 32 © Coding Design, 2017
GRID RANGERS > CSS Grid Layout ࢠཁૉͷஔ 33 © Coding
Design, 2017
GRID RANGERS > CSS Grid Layout ࢠཁૉͷஔ grid-column ͰԣҐஔɺgrid-row ͰॎҐஔΛ੍ޚͰ͖ΔΘʂ
Ұ൪ͷάϦουͷ۠Γઢ͔Β1,2,3…ͱࢦఆ͢ΔΑʂ .main { grid-column: 2 / 3; /* ࠨ͔Β2൪ͷઢ͔Β3൪ͷઢͷؒ */ grid-row: 2 / 3; /* ্͔Β2൪ͷઢ͔Β3൪ͷઢͷؒ */ } 34 © Coding Design, 2017
GRID RANGERS > CSS Grid Layout ࢠཁૉͷஔ ൣғ͕άϦου1ͭͷͱ͖2ͭΊͷΛলུͰ͖ΔΘΑʂ .main {
grid-column: 2; /* grid-column: 2 / 3; ͱಉ͡ */ grid-row: 2; /* grid-row: 2 / 3; ͱಉ͡ */ } 35 © Coding Design, 2017
GRID RANGERS > CSS Grid Layout ࢠཁૉͷஔ spanΛ͏ͱάϦουͷϚε͕Կݸ͔ΛࢦఆͰ͖ΔΘʂ .main {
grid-column: 2 / span 2; /* grid-column: 2 / 4; ͱಉ͡ */ grid-row: 2 / span 2; /* grid-row: 2 / 4; ͱಉ͡ */ } 36 © Coding Design, 2017
GRID RANGERS > CSS Grid Layout ΤϦΞͷ໋໊ 37 © Coding
Design, 2017
GRID RANGERS > CSS Grid Layout ΤϦΞͷ໋໊ grid-template-areas ͰάϦουʹ໊લΛ͚ͭΒΕͬͪΑʂ .container
{ display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 100px 1fr 200px; grid-template-areas: "header header" "side main" "footer footer"; } 38 © Coding Design, 2017
GRID RANGERS > CSS Grid Layout ΤϦΞͷ໋໊ ࢠཁૉʹ grid-area ͰࢠཁૉͷҐஔΛ໊લͰࢦఆͰ͖ͬͲʂ
.main { grid-area: main; } 39 © Coding Design, 2017
GRID RANGERS > CSS Grid Layout άϦουؒͷ༨ന 40 © Coding
Design, 2017
GRID RANGERS > CSS Grid Layout ࢠཁૉؒͷ༨ന ཁૉʹ grid-column-gap Ͱԣͷ༨നɺ
ɹɹɹɹ grid-row-gap Ͱॎͷ༨നΛઃఆͰ͖Δʂ .container { /* লུ */ grid-column-gap: 20px; grid-row-gap: 30px; } 41 © Coding Design, 2017
GRID RANGERS > CSS Grid Layout ࣗಈஔ 42 © Coding
Design, 2017
GRID RANGERS > CSS Grid Layout ࣗಈஔ grid-auto-flow ͰࢠཁૉΛࣗಈͰஔͰ͖Δʂ
row, column, dense Λ͍Μͤʂ .container { grid-auto-flow: row dense; } 43 © Coding Design, 2017
GRID RANGERS ཕϙΠϯτ 44 © Coding Design, 2017
GRID RANGERS ཕϙΠϯτ ࣮·ͩة͏͍ͱ͜Ζ͕͋ΔCSS Grid Layoutʂ গ͚ͩ͠ൈਮͯ͠Έͨʂ 45 © Coding
Design, 2017
GRID RANGERS > ཕϙΠϯτ ϒϥβαϙʔτ • Can I use -
CSS Grid Layout http:/ /caniuse.com/#feat=css-grid 46 © Coding Design, 2017
47 © Coding Design, 2017
GRID RANGERS > ཕϙΠϯτ ϒϥβαϙʔτ • IE10Ҏ্αϙʔτɻͨͩ͠ɺݹ͍༷ɻ 48 © Coding
Design, 2017
ͨͩ͠ɺݹ͍༷ɻ ※৽͍༷͠ʹରԠதͷΑ͏Ͱ͢ɻ ࢀߟɿ Should I try to use the IE
implementation of CSS Grid Layout? 49 © Coding Design, 2017
50 © Coding Design, 2017
GRID RANGERS > ཕϙΠϯτ ϒϥβαϙʔτ [ݱঢ়] IE10, IE11, EdgeԼهͷΈରԠ •
άϦουͷॎ෯ɾԣ෯ͷઃఆ • ʹΑΔࢠཁૉͷஔ 51 © Coding Design, 2017
GRID RANGERS > ཕϙΠϯτ IEରࡦ • [ରࡦ1] ϓϩύςΟʹ -ms- Λ͚ͭΔ(Autoprefixer!)
• [ରࡦ2] ࣮͕ҟͳΔϓϩύςΟΛखಈͰௐ 52 © Coding Design, 2017
GRID RANGERS > ཕϙΠϯτ > IEରࡦ [ରࡦ1] ϓϩύςΟʹ -ms- Λ͚ͭΔ
(Autoprefixer!) ௐલ .container { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 100px 1fr 200px; } 53 © Coding Design, 2017
54 © Coding Design, 2017
GRID RANGERS > ཕϙΠϯτ > IEରࡦ [ରࡦ1] ϓϩύςΟʹ -ms- Λ͚ͭΔ(Autoprefixer!)
ௐޙ .container { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 100px 1fr 200px; -ms-grid-columns: 200px 1fr; -ms-grid-rows: 100px 1fr 200px; } 55 © Coding Design, 2017
56 © Coding Design, 2017
GRID RANGERS > ཕϙΠϯτ > IEରࡦ [ରࡦ2] ࣮͕ҟͳΔϓϩύςΟΛख ಈͰௐ ௐલ
.header { grid-column-start: 1; grid-column-end: 3; grid-row: 1; } 57 © Coding Design, 2017
GRID RANGERS > ཕϙΠϯτ > IEରࡦ [ରࡦ2] ࣮͕ҟͳΔϓϩύςΟΛख ಈͰௐ ௐޙ
.header { -ms-grid-column-start: 1; -ms-grid-column-span: 2; /* IEରࡦ ͍ͭ͘ԣʹͭͳ͛Δ͔ */ -ms-grid-row: 1; } 58 © Coding Design, 2017
59 © Coding Design, 2017
60 © Coding Design, 2017
·ͱΊ 61 © Coding Design, 2017
CSS Grid Layout ϨΠΞτ͢Δͷʹ ͢͝ʔ͘ศརʂ 62 © Coding Design, 2017
ͨͩ͠ɺ ରϒϥβʹҙʂ 63 © Coding Design, 2017
IE10, IE11, Edgeͷ ࣮ͷҧ͍ͷରࡦ͕ ࠷େͷϙΠϯτʂ 64 © Coding Design, 2017
͋͞࠷ޙͷରܾͩʂ WebzillaΛಈ͔ͯ͠ GRID RANGERSͰғ͏ʂ 65 © Coding Design, 2017
66 © Coding Design, 2017
͓ͬͱɺΈΜͳྑ͠ʹ ͳͬͨΈ͍ͨͩʂ WebͷϨΠΞτ͕ ͘͢͠ͳͬͨΜͩʂ 67 © Coding Design, 2017
͋Γ͕ͱ͏!܅ͷ׆༂Ͱ ੈքٹΘΕͨΑʂ 68 © Coding Design, 2017
͜Ε͔ΒCSS Grid LayoutΛͬͯੈքΛ ٹͬͯͶʂ 69 © Coding Design, 2017
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠οοʂ 70 © Coding Design, 2017