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
100
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
TypeScriptのmoduleオプションを改めて整理する
bicstone
4
420
「兵法」から見る質とスピード
ickx
0
190
當開發遇上包裝:AI 如何讓產品從想法變成商品
clonn
0
2.5k
Proxmoxをまとめて管理できるコンソール作ってみました
karugamo
1
410
PT AI без купюр
v0lka
0
190
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.6k
技術的負債と戦略的に戦わざるを得ない場合のオブザーバビリティ活用術 / Leveraging Observability When Strategically Dealing with Technical Debt
yoshiyoshifujii
0
160
rbs-traceを使ってWEARで型生成を試してみた After RubyKaigi 2025〜ZOZO、ファインディ、ピクシブ〜 / tried rbs-trace on WEAR
oyamakei
0
1k
SpringBootにおけるオブザーバビリティのなにか
irof
1
890
「MCPを使ってる人」が より詳しくなるための解説
yamaguchidesu
0
590
がんばりすぎないコーディングルール運用術
tsukakei
1
180
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.6k
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
840
Building Adaptive Systems
keathley
41
2.6k
Faster Mobile Websites
deanohume
307
31k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Raft: Consensus for Rubyists
vanstee
137
7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.3k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
The Language of Interfaces
destraynor
158
25k
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Λ ͏ํ͕͍͍