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
94
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
690
Laravel Mixではじめるwebpack
takanashi66
0
440
gulpやめてLaravel Mixはじめた話
takanashi66
1
180
LT-WordPressの開発をプラグインで管理する
takanashi66
0
330
広島フロントエンド勉強会 Vol.18 『gulpの基本とgulp4』
takanashi66
1
180
webサイトのiPhone X 対応
takanashi66
0
1.5k
web制作におけるGitフロー
takanashi66
0
510
広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』
takanashi66
0
290
CSS Grid Layout Module
takanashi66
0
250
Other Decks in Programming
See All in Programming
EventSourcingの理想と現実
wenas
6
2.2k
Realtime API 入門
riofujimon
0
130
Server Driven Compose With Firebase
skydoves
0
430
Quine, Polyglot, 良いコード
qnighy
4
610
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
300
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
210
JavaでLチカしたい! / JJUG CCC 2024 Fall LT
nhayato
0
110
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.1k
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.1k
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
4.1k
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
4
480
Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting
uskey512
1
470
Featured
See All Featured
Building Applications with DynamoDB
mza
90
6.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Gamification - CAS2011
davidbonilla
80
5k
Music & Morning Musume
bryan
46
6.2k
4 Signs Your Business is Dying
shpigford
180
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Why You Should Never Use an ORM
jnunemaker
PRO
54
9k
BBQ
matthewcrist
85
9.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
520
Six Lessons from altMBA
skipperchong
26
3.5k
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Λ ͏ํ͕͍͍