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 Layout Module
Search
井上拓
March 16, 2018
Programming
0
92
CSS Grid Layout Module
広島フロントエンド勉強会 Vol.17『CSS Grid Layout Module IE対応』
井上拓
March 16, 2018
Tweet
Share
More Decks by 井上拓
See All by 井上拓
これからはじめるGit
takanashi66
0
670
Laravel Mixではじめるwebpack
takanashi66
0
440
gulpやめてLaravel Mixはじめた話
takanashi66
1
180
LT-WordPressの開発をプラグインで管理する
takanashi66
0
320
広島フロントエンド勉強会 Vol.18 『gulpの基本とgulp4』
takanashi66
1
170
webサイトのiPhone X 対応
takanashi66
0
1.5k
web制作におけるGitフロー
takanashi66
0
500
広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』
takanashi66
0
280
CSS Grid Layout Module
takanashi66
0
250
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
0
390
私のEbitengineの第一歩
qt_luigi
0
450
The Shape of a Service Object
inem
0
520
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
650
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
220
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
660
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
150
What you can do with Ruby on WebAssembly
kateinoigakukun
0
170
LangChainの現在とv0.3にむけて
os1ma
4
920
あなたのアプリ、ログはでてますか?あるいはログをだしてますか? (Funabashi.dev用 軽量版)
uzulla
2
120
Kotlin 2.0 and Beyond
antonarhipov
2
150
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
Fireside Chat
paigeccino
31
2.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Atom: Resistance is Futile
akmur
261
25k
Visualization
eitanlees
142
15k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
How to Think Like a Performance Engineer
csswizardry
16
960
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
The Invisible Customer
myddelton
119
13k
Facilitating Awesome Meetings
lara
49
5.9k
Debugging Ruby Performance
tmm1
72
12k
Transcript
CSS Grid Layout Module Ҫ্
CSS Grid Layout Moduleͱ
CSS Grid Layout Moduleͱ • 2࣍ݩϨΠΞτΛ࣮ݱ͢ΔCSSϓϩύςΟ • άϦουʹԊͬͯɺ͖ͳॱ൪ʹஔͨ͠Γ ݁߹ͨ͠ΓͰ͖Δ
CSS Grid Layout Module Ҫ্
ϒϥβ࣮ঢ়گ
ϒϥβ࣮ঢ়گ • Ϟμϯϒϥβجຊతʹ࣮ࡁΈ
ॻ͖ํ
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; } CSS
None
.container{ display: grid; grid-template-columns: 100px 1fr 100px; grid-template-rows: auto auto
auto; } CSS
IFBEFS OBW NBJO TJEFCBS GPPUFS 100px 1fr 100px auto auto
auto grid-template-columns grid-template-rows
fr • ૬ର୯Ґ • 1frར༻Մೳͳۭؒͷׂ߹ • grid-template-columns: 1fr 2fr 1fr;
͜ͷྫͩͱ1ྻ͕1/4ɺ2ྻ͕1/2ɺ3ྻ ͕1/4ʹͳΔ
None
.item_header, .item_footer{ grid-column: 1/4; } CSS
ʊਓਓਓਓਓਓਓʊ ʼɹ 1/4?? ɹ ʻ ʉY^Y^Y^Y^Y^Yʉ
1 2 3 1 2 3 )FBEFS 'PPUFS /BW $POUFOUT
4JEFCBS 4 4 grid-template-columns grid-template-rows
1 2 3 1 2 3 )FBEFS 'PPUFS /BW $POUFOUT
4JEFCBS 4 4 grid-template-columns grid-template-rows
None
None
IE11ʹରԠͤ͞Δ
IE11ରԠ .container{ display: -ms-grid; -ms-grid-columns: 100px 1fr 100px; -ms-grid-rows: 1fr
1fr 1fr; }
None
None
IE11ରԠ .item_header{ -ms-grid-column: 1; -ms-grid-row: 1; -ms-grid-column-span: 3; }
IE11ରԠ .item_footer{ -ms-grid-column: 1; -ms-grid-row: 3; -ms-grid-column-span: 3; }
1 2 3 1 2 3 )FBEFS 'PPUFS /BW $POUFOUT
4JEFCBS 4 4 grid-template-columns grid-template-rows
1 2 3 1 2 3 )FBEFS 'PPUFS /BW $POUFOUT
4JEFCBS -ms-grid-column -ms-grid-row
None
IE11ରԠ .item_nav{ -ms-grid-column: 1; -ms-grid-row: 2; } .item_main{ -ms-grid-column: 2;
-ms-grid-row: 2; } .item_sidebar{ -ms-grid-column: 3; -ms-grid-row: 2; }
None
display: grid; display: -ms-grid; grid-template-columns: -ms-grid-columns: grid-template-rows: -ms-grid-rows: ηϧͷ݁߹ -ms-grid-column-span:
grid-row -ms-grid-row: grid-column -ms-grid-column:
ಛघͳॻ͖ํ
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
grid-template-areas • ΞΠςϜʹ໊લΛ͚ͭͯɺࢹ֮తʹΘ͔Γ͢ ͘هड़Ͱ͖Δɻ
<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 1fr 100px; grid-template-rows: auto auto
auto; CSS
grid-template-areas: "header header header" "nav main sidebar" "footer footer footer”;
} CSS
ʊਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ·ΔͰΞεΩʔΞʔτɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^ʉ
ʊਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹɹ ɹIE11ඇରԠɹ ɹɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^ʉ
ͱࢥ͍ͬͯͨΒ
None
ࢼͯ͠Έͨ
gulp.task('sass', () =>{ gulp.src(cmnpath + 'sass/*.scss') .pipe(plumber()) .pipe(sass()) .pipe(autoprefixer({ browsers:
[ 'last 2 versions' ], grid: true, cascade: false })) .pipe(gulp.dest(cmnpath + 'css')) .pipe(browserSync.stream()); }); HVMQpMFKT
.container{ max-width: 600px; margin: 0 auto; display: grid; grid-template-columns: 100px
1fr 100px; grid-template-rows: 1fr 1fr 1fr; } .item_header,.item_footer{ grid-column: 1/4; } 4$44
.container { max-width: 600px; margin: 0 auto; display: -ms-grid; display:
grid; -ms-grid-columns: 100px 1fr 100px; grid-template-columns: 100px 1fr 100px; -ms-grid-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; } .item_header, .item_footer { -ms-grid-column: 1; -ms-grid-column-span: 3; grid-column: 1/4; } $44
None
None
.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; } .container{ max-width: 600px; margin: 0 auto; display: grid; grid-template-columns: 100px 1fr 100px; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "header header header" "nav main sidebar" "footer footer footer"; } 4$44
.item_sidebar { -ms-grid-row: 2; -ms-grid-column: 3; grid-area: sidebar; } .item_footer
{ -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: footer; } .container { max-width: 600px; margin: 0 auto; display: -ms-grid; display: grid; -ms-grid-columns: 100px 1fr 100px; grid-template-columns: 100px 1fr 100px; -ms-grid-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "header header header” "nav main sidebar” "footer footer footer"; } .item_header { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: header; } .item_nav { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: nav; } .item_main { -ms-grid-row: 2; -ms-grid-column: 2; grid-area: main; } $44
None
None
·ͱΊ
·ͱΊ • ϨΠΞτ͕͍ͩͿָʹͭ͘ΕΔ • BootstrapΈ͍ͨʹHTML͕ԚΕͳ͍
·ͱΊ • autoprefixer͕͍ͭͷؒʹ͔ਐԽ͍ͯͨ͠ɻ • autoprefixer͏ͳΒgrid-template-areasΛ ͏ํ͕͍͍