Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
CSS Grid Layout Module
井上拓
August 19, 2017
Technology
0
170
CSS Grid Layout Module
フロントエンド夏祭り in 広島でのLT
井上拓
August 19, 2017
Tweet
Share
More Decks by 井上拓
See All by 井上拓
Laravel Mixではじめるwebpack
takanashi66
0
330
gulpやめてLaravel Mixはじめた話
takanashi66
1
130
LT-WordPressの開発をプラグインで管理する
takanashi66
0
210
広島フロントエンド勉強会 Vol.18 『gulpの基本とgulp4』
takanashi66
1
100
CSS Grid Layout Module
takanashi66
0
41
webサイトのiPhone X 対応
takanashi66
0
1.2k
web制作におけるGitフロー
takanashi66
0
350
広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』
takanashi66
0
230
pugを使った効率的なコーディング
takanashi66
1
250
Other Decks in Technology
See All in Technology
HTTP Session Architecture Pattern
chiroito
1
400
ZOZOTOWNのProduction Readiness Checklistと信頼性向上の取り組み / Improvement the reliability of ZOZOTOWN with Production Readiness Checklist
akitok_
5
1.5k
⚡Lightdashを試してみた
k_data_analyst
0
190
Power BIのモバイルと都 +1 / Tokyo
ishiayaya
0
140
AWS CLI入門_20220513
suzakiyoshito
0
3.7k
Poolにおける足を止めないシステム基盤構築
winebarrel
3
670
Learning from AWS Customer Security Incidents [2022]
ramimac
0
510
srenext2022-skaru
mixi_engineers
0
430
長年運用されてきたモノリシックアプリケーションをコンテナ化しようとするとどんな問題に遭遇するか? / SRE NEXT 2022
nulabinc
PRO
15
7.3k
Data-Driven Healthcare - Techplay
kotaroito
0
110
技術広報の役割を定義してみた 2022年春
afroscript
3
2.4k
Dagu | オンプレ向けワークフローエンジン(WebUI 同梱)
yohamta
0
110
Featured
See All Featured
Docker and Python
trallard
27
1.5k
Making the Leap to Tech Lead
cromwellryan
113
6.9k
The Cult of Friendly URLs
andyhume
68
4.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
38
12k
It's Worth the Effort
3n
172
25k
Optimizing for Happiness
mojombo
365
63k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Facilitating Awesome Meetings
lara
29
3.9k
GraphQLとの向き合い方2022年版
quramy
16
8.1k
BBQ
matthewcrist
74
7.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
103
16k
Atom: Resistance is Futile
akmur
255
20k
Transcript
None
CSS Grid Layout Module Ҫ্
CSS Grid Layout Moduleͱ
CSS Grid Layout Moduleͱ • CSS3Ͱࡦఆ͕ਐΊΒΕ͍ͯΔɺFlexible Box Layout Moduleʹ͙࣍৽ͨͳϨΠΞτϞ δϡʔϧɻ
• ίϯςφΛॎԣͷ֨ࢠঢ়ʹׂͯ͠ཁૉΛࣗ ༝ʹஔग़དྷΔ
CSS Grid Layout Module Ҫ্
ϒϥβ࣮ঢ়گ
ϒϥβ࣮ঢ়گ • Ϟμϯϒϥβجຊతʹ࣮ࡁΈ
ʊਓਓਓਓਓਓਓʊ ʼɹ ҆ఆͷIEɹ ʻ ʉY^Y^Y^Y^Y^Yʉ
ॻ͖ํ
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
ʊਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ ಥવͷΞεΩʔΞʔτɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^Yʉ
ײతͰݟ͍͢
Flexible Box Layout Module ͱ CSS Grid Layout Module
Ͳ͕͍͍ͬͪͷ • ઢతͳஔFlexible Box Layout Module • ෳࡶͳஔCSS Grid Layout
Module
·ͱΊ
·ͱΊ • Ϟμϯϒϥβ࣮ࡁΈͳͷͰɺ͏ͬ ͯେৎ • ΞεΩʔΞʔτͷΑ͏ͳهड़Ͱɺཁૉͷஔ͕ ؆୯͔ͭݟ͍͢
ҙ • IEʹϕϯμʔϓϨϑΟοΫε͕ඞཁ • autoprefixer͕·ͩ෦తʹ͔͠ରԠͯ͠ͳ͍
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠