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
280
広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』
広島フロントエンド勉強会 Vol.12のスライド
井上拓
September 27, 2017
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
CSS Grid Layout Module
takanashi66
0
92
webサイトのiPhone X 対応
takanashi66
0
1.5k
web制作におけるGitフロー
takanashi66
0
500
CSS Grid Layout Module
takanashi66
0
250
Other Decks in Technology
See All in Technology
自作Cコンパイラ 8時間の奮闘
soukouki
0
850
Tricentisにおけるテスト自動化へのAI活用ご紹介/20240910Shunsuke Katakura
shift_evolve
0
200
Agile in Automotive Industry, puzzles and lights.
hiranabe
3
1.4k
watsonx.ai Dojo 環境準備について
oniak3ibm
PRO
0
300
Google CloudのLLM活用の選択肢を広げるVertex AIのパートナーモデル
nayuts
0
130
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
220
開発生産性を始める前に開発チームができること / optim-improve-development-productivity.pdf
optim
0
110
PdMはどのように全てのスピードを上げられるか ~ 非連続進化のための具体的な取り組み ~
sansantech
PRO
4
1.3k
o1のAPIで実験してみたが 制限きつすぎて辛かった話
pharma_x_tech
0
200
『GRANBLUE FANTASY: Relink』最高の「没入感」を実現するカットシーン制作手法とそれを支える技術
cygames
1
140
Privacy Sandbox on Android / DroidKaigi 2024
7pairs
1
270
AI活用したくてもできなかった不動産SaaSの今とこれから
nealle
0
330
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
610
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Docker and Python
trallard
39
3k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
We Have a Design System, Now What?
morganepeng
48
7.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
A Tale of Four Properties
chriscoyier
155
22k
Scaling GitHub
holman
458
140k
Designing the Hi-DPI Web
ddemaree
278
34k
Producing Creativity
orderedlist
PRO
340
39k
Code Reviewing Like a Champion
maltzj
517
39k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
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͕·ͩ෦తʹ͔͠ରԠͯ͠ͳ͍