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
広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』
Search
井上拓
September 27, 2017
Technology
0
290
広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』
広島フロントエンド勉強会 Vol.12のスライド
井上拓
September 27, 2017
Tweet
Share
More Decks by 井上拓
See All by 井上拓
これからはじめるGit
takanashi66
0
690
Laravel Mixではじめるwebpack
takanashi66
0
450
gulpやめてLaravel Mixはじめた話
takanashi66
1
180
LT-WordPressの開発をプラグインで管理する
takanashi66
0
330
広島フロントエンド勉強会 Vol.18 『gulpの基本とgulp4』
takanashi66
1
180
CSS Grid Layout Module
takanashi66
0
95
webサイトのiPhone X 対応
takanashi66
0
1.5k
web制作におけるGitフロー
takanashi66
0
520
CSS Grid Layout Module
takanashi66
0
250
Other Decks in Technology
See All in Technology
日経電子版のStoreKit2フルリニューアル
shimastripe
1
150
SRE×AIOpsを始めよう!GuardDutyによるお手軽脅威検出
amixedcolor
0
200
Shopifyアプリ開発における Shopifyの機能活用
sonatard
4
260
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
Engineer Career Talk
lycorp_recruit_jp
0
190
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.9k
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
190
TanStack Routerに移行するのかい しないのかい、どっちなんだい! / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
600
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
1
120
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
170
Lambda10周年!Lambdaは何をもたらしたか
smt7174
2
130
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
4
130
Into the Great Unknown - MozCon
thekraken
32
1.5k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Faster Mobile Websites
deanohume
305
30k
How to train your dragon (web standard)
notwaldorf
88
5.7k
What's new in Ruby 2.0
geeforr
343
31k
Agile that works and the tools we love
rasmusluckow
327
21k
What's in a price? How to price your products and services
michaelherold
243
12k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Building an army of robots
kneath
302
43k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Transcript
CSS Grid Layout Module Ҫ্
ౡϑϩϯτΤϯυษڧձ ౡϑϩϯτΤϯυษڧձౡͰ׆ಈ͢Δϑϩ ϯτΤϯυΤϯδχΞͷΈΛղܾ͢Δू·ΓͰ ͢ɻ ຖ݄ςʔϚʹԊͬͯɺϚʔΫΞοϓɺελΠϦϯ άͷٙΈΛղܾ͠·͠ΐ͏ɻ ڞʹٙΈͷղܾɺ৽ͨͳٕज़ͷशಘΛ௨͠ ͯౡͷweb੍࡞ͷϨϕϧΞοϓΛࢦ͠·͢ɻ
None
None
1st Anniversary
• 2016/09/09 Vol.1ʰFlexboxΛ͍͜ͳ͢ʱ • 2016/10/07 Vol.2ʰ։ൃΛศརʹ͢Δπʔϧͨͪʱ • 2016/11/04 Vol.3ʰθϩ͔Β࢝ΊΔReact.jsʱ •
2016/12/17 Vol.4ʰࠓ͔Β͑Δgulp.js ϋϯζΦϯʱ • 2017/01/13 Vol.5ʰώϩϑϩ͓Έ૬ஊձ ~ίʔσΟϯάฤ~ʱ • 2017/02/03 Vol.6ʰώϩϑϩ͓Έ૬ஊձ ~CSSฤ~ʱ
• 2017/03/03 Vol.7ʰϑϩϯτΤϯυLT with LTۦಈ։ൃ&IoTLTౡʱ • 2016/04/01 Vol.8ʰ࣍ੈCSSΛઌऔΔʮPostCSSʯϋϯζΦϯʱ • 2016/05/13
Vol.9ʰJavaScriptͷجૅͷ͖ʱ • 2016/06/09 Vol.10ʰPugΛͬͨޮతͳίʔσΟϯάʱ • 2016/08/05 ಛผ൛ʰ͜Ε͔Β࢝ΊΔWebVRʱ • 2016/09/08 Vol.12ʰCSS Grid Layout Moduleʱ
ԆࢀՃਓ 168ਓ
ࠓޙͱΑΖ͓͘͠ئ͍͠·͢
CSS Grid Layout Module Ҫ্
࣍ • CSS Grid Layout Moduleͱ • ϒϥβ࣮ঢ়گ • ༻ޠ
• ϓϩύςΟ • σϞ
CSS Grid Layout Moduleͱ
CSS Grid Layout Moduleͱ • 2࣍ݩϨΠΞτΛ࣮ݱ͢ΔCSSϓϩύςΟ • άϦουʹԊͬͯɺ͖ͳॱ൪ʹஔͨ͠Γ ݁߹ͨ͠ΓͰ͖Δ
CSS Grid Layout Module Ҫ্
ϒϥβ࣮ঢ়گ
ϒϥβ࣮ঢ়گ • Ϟμϯϒϥβجຊతʹ࣮ࡁΈ
༻ޠ
༻ޠ • ίϯςφ • άϦου • άϦουΞΠςϜ • τϥοΫ •
Ϊϟοϓ
άϦουΞΠςϜ 1 2 3 4 1 2 3 4 5
ίϯςφ τϥοΫ Ϊϟοϓ άϦου
ϓϩύςΟ
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
IFBEFS OBW NBJO TJEFCBS GPPUFS දࣔ݁Ռ
ʊਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ·ΔͰΞεΩʔΞʔτɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^ʉ
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
fr • ૬ର୯Ґ • 1frར༻Մೳͳۭؒͷׂ߹ • grid-template-columns: 1fr 2fr 1fr;
͜ͷྫͩͱ1ྻ͕1/4ɺ2ྻ͕1/2ɺ3ྻ ͕1/4ʹͳΔ
.container{ grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 2fr 1fr; }
CSS
σϞ
goo.gl/LhSwNc σϞϦϙδτϦ GitHub
·ͱΊ
·ͱΊ • Ϟμϯϒϥβ࣮ࡁΈͳͷͰɺ͏ͬ ͯେৎ • ΞεΩʔΞʔτͷΑ͏ͳهड़Ͱɺཁૉͷஔ͕ ؆୯͔ͭݟ͍͢
ҙ • IEʹϕϯμʔϓϨϑΟοΫε͕ඞཁ • autoprefixer͕·ͩ෦తʹ͔͠ରԠͯ͠ͳ͍