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
110
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
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
webサイトのiPhone X 対応
takanashi66
0
1.6k
web制作におけるGitフロー
takanashi66
0
580
広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』
takanashi66
0
290
CSS Grid Layout Module
takanashi66
0
270
Other Decks in Programming
See All in Programming
What Spring Developers Should Know About Jakarta EE
ivargrimstad
1
610
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
130
Perlで痩せる
yuukis
1
660
Parallel::Pipesの紹介
skaji
2
870
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
1k
當開發遇上包裝:AI 如何讓產品從想法變成商品
clonn
0
2.6k
イベントソーシングとAIの親和性ー物語とLLMに理解できるデータ
tomohisa
1
160
Agent Rules as Domain Parser
yodakeisuke
1
350
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
240
Zennの運営完全に理解した #完全に理解したTalk
wadayusuke
1
140
PT AI без купюр
v0lka
0
200
SpringBootにおけるオブザーバビリティのなにか
irof
1
890
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
How STYLIGHT went responsive
nonsquared
100
5.6k
BBQ
matthewcrist
88
9.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Designing for humans not robots
tammielis
253
25k
Embracing the Ebb and Flow
colly
85
4.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
The Cost Of JavaScript in 2023
addyosmani
49
8.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
Documentation Writing (for coders)
carmenintech
71
4.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.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Λ ͏ํ͕͍͍