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
広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』
Search
井上拓
September 27, 2017
Technology
0
290
広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』
広島フロントエンド勉強会 Vol.12のスライド
井上拓
September 27, 2017
Tweet
Share
More Decks by 井上拓
See All by 井上拓
これからはじめるGit
takanashi66
0
720
Laravel Mixではじめるwebpack
takanashi66
0
480
gulpやめてLaravel Mixはじめた話
takanashi66
1
210
LT-WordPressの開発をプラグインで管理する
takanashi66
0
340
広島フロントエンド勉強会 Vol.18 『gulpの基本とgulp4』
takanashi66
1
200
CSS Grid Layout Module
takanashi66
0
110
webサイトのiPhone X 対応
takanashi66
0
1.6k
web制作におけるGitフロー
takanashi66
0
580
CSS Grid Layout Module
takanashi66
0
270
Other Decks in Technology
See All in Technology
Kotlin Coroutine Mechanisms: A Surprisingly Deep Rabbithole
amanda_hinchman
2
100
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
130
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1.1k
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
17
5.7k
Prox Industries株式会社 会社紹介資料
proxindustries
0
330
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
230
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
240
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
170
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
770
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
410
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.2k
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
30
11k
Featured
See All Featured
Designing for Performance
lara
609
69k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
What's in a price? How to price your products and services
michaelherold
246
12k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
How GitHub (no longer) Works
holman
314
140k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Transcript
CSS Grid Layout Module Ҫ্
ౡϑϩϯτΤϯυษڧձ ౡϑϩϯτΤϯυษڧձౡͰ׆ಈ͢Δϑϩ ϯτΤϯυΤϯδχΞͷΈΛղܾ͢Δू·ΓͰ ͢ɻ ຖ݄ςʔϚʹԊͬͯɺϚʔΫΞοϓɺελΠϦϯ άͷٙΈΛղܾ͠·͠ΐ͏ɻ ڞʹٙΈͷղܾɺ৽ͨͳٕज़ͷशಘΛ௨͠ ͯౡͷweb੍࡞ͷϨϕϧΞοϓΛࢦ͠·͢ɻ
None
None
1st Anniversary
• 2016/09/09 Vol.1ʰFlexboxΛ͍͜ͳ͢ʱ • 2016/10/07 Vol.2ʰ։ൃΛศརʹ͢Δπʔϧͨͪʱ • 2016/11/04 Vol.3ʰθϩ͔Β࢝ΊΔReact.jsʱ •
2016/12/17 Vol.4ʰࠓ͔Β͑Δgulp.js ϋϯζΦϯʱ • 2017/01/13 Vol.5ʰώϩϑϩ͓Έ૬ஊձ ~ίʔσΟϯάฤ~ʱ • 2017/02/03 Vol.6ʰώϩϑϩ͓Έ૬ஊձ ~CSSฤ~ʱ
• 2017/03/03 Vol.7ʰϑϩϯτΤϯυLT with LTۦಈ։ൃ&IoTLTౡʱ • 2016/04/01 Vol.8ʰ࣍ੈCSSΛઌऔΔʮPostCSSʯϋϯζΦϯʱ • 2016/05/13
Vol.9ʰJavaScriptͷجૅͷ͖ʱ • 2016/06/09 Vol.10ʰPugΛͬͨޮతͳίʔσΟϯάʱ • 2016/08/05 ಛผ൛ʰ͜Ε͔Β࢝ΊΔWebVRʱ • 2016/09/08 Vol.12ʰCSS Grid Layout Moduleʱ
ԆࢀՃਓ 168ਓ
ࠓޙͱΑΖ͓͘͠ئ͍͠·͢
CSS Grid Layout Module Ҫ্
࣍ • CSS Grid Layout Moduleͱ • ϒϥβ࣮ঢ়گ • ༻ޠ
• ϓϩύςΟ • σϞ
CSS Grid Layout Moduleͱ
CSS Grid Layout Moduleͱ • 2࣍ݩϨΠΞτΛ࣮ݱ͢ΔCSSϓϩύςΟ • άϦουʹԊͬͯɺ͖ͳॱ൪ʹஔͨ͠Γ ݁߹ͨ͠ΓͰ͖Δ
CSS Grid Layout Module Ҫ্
ϒϥβ࣮ঢ়گ
ϒϥβ࣮ঢ়گ • Ϟμϯϒϥβجຊతʹ࣮ࡁΈ
༻ޠ
༻ޠ • ίϯςφ • άϦου • άϦουΞΠςϜ • τϥοΫ •
Ϊϟοϓ
άϦουΞΠςϜ 1 2 3 4 1 2 3 4 5
ίϯςφ τϥοΫ Ϊϟοϓ άϦου
ϓϩύςΟ
IFBEFS OBW NBJO TJEFCBS GPPUFS දࣔ݁Ռ
<div class="container"> <div class="item item_header">header</div> <div class="item item_nav">nav</div> <div class="item
item_main">main</div> <div class="item item_sidebar">sidebar</div> <div class="item item_footer">footer</div> </div> HTML
.container{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 30px 30px
30px; grid-gap: 10px; } CSS
IFBEFS OBW NBJO TJEFCBS GPPUFS 100px 100px 100px 30px 30px
30px grid-template-columns grid-template-rows
.item_header, .item_footer{ grid-column: 1/4; } CSS
ʊਓਓਓਓਓਓਓʊ ʼɹ 1/4?? ɹ ʻ ʉY^Y^Y^Y^Y^Yʉ
1 2 3 4 1 2 3 4
1 2 3 4 1 2 3 4
ɹ͜ͷฆΒΘ͍͠ॻ͖ํ Ͳ͏ʹ͔ͳΒͳ͍ͷʁ
<div class="container"> <div class="item item_header">header</div> <div class="item item_nav">nav</div> <div class="item
item_main">main</div> <div class="item item_sidebar">sidebar</div> <div class="item item_footer">footer</div> </div> HTML
.item_header{grid-area: header;} .item_nav{grid-area: nav;} .item_main{grid-area: main;} .item_sidebar{grid-area: sidebar;} .item_footer{grid-area: footer;}
CSS
.container{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 30px 30px
30px; grid-gap: 10px; CSS
grid-template-areas: "header header header" "nav main sidebar" "footer footer footer”;
} CSS
IFBEFS OBW NBJO TJEFCBS GPPUFS දࣔ݁Ռ
ʊਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ·ΔͰΞεΩʔΞʔτɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^ʉ
repeat • ܁Γฦ͠ಉ͡Λهड़Ͱ͖Δ • repeat(ճ, )
.container{ grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; }
CSS
.container{ grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); } CSS
fr • ૬ର୯Ґ • 1frར༻Մೳͳۭؒͷׂ߹ • grid-template-columns: 1fr 2fr 1fr;
͜ͷྫͩͱ1ྻ͕1/4ɺ2ྻ͕1/2ɺ3ྻ ͕1/4ʹͳΔ
.container{ grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 2fr 1fr; }
CSS
σϞ
goo.gl/LhSwNc σϞϦϙδτϦ GitHub
·ͱΊ
·ͱΊ • Ϟμϯϒϥβ࣮ࡁΈͳͷͰɺ͏ͬ ͯେৎ • ΞεΩʔΞʔτͷΑ͏ͳهड़Ͱɺཁૉͷஔ͕ ؆୯͔ͭݟ͍͢
ҙ • IEʹϕϯμʔϓϨϑΟοΫε͕ඞཁ • autoprefixer͕·ͩ෦తʹ͔͠ରԠͯ͠ͳ͍