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
220
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
2k
FLEXBOX-MEN: Apocalypse
moonglows76
4
480
Other Decks in Technology
See All in Technology
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
430
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
540
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.2k
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
1.5k
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
130
エンジニア向け技術スタック情報
kauche
1
250
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
170
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
3
120
Witchcraft for Memory
pocke
1
310
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
140
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Being A Developer After 40
akosma
90
590k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Rails Girls Zürich Keynote
gr2m
94
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Scaling GitHub
holman
459
140k
Navigating Team Friction
lara
187
15k
Raft: Consensus for Rubyists
vanstee
140
7k
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