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
300
広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』
広島フロントエンド勉強会 Vol.12のスライド
井上拓
September 27, 2017
Tweet
Share
More Decks by 井上拓
See All by 井上拓
これからはじめるGit
takanashi66
0
730
Laravel Mixではじめるwebpack
takanashi66
0
500
gulpやめてLaravel Mixはじめた話
takanashi66
1
210
LT-WordPressの開発をプラグインで管理する
takanashi66
0
350
広島フロントエンド勉強会 Vol.18 『gulpの基本とgulp4』
takanashi66
1
200
CSS Grid Layout Module
takanashi66
0
110
webサイトのiPhone X 対応
takanashi66
0
1.6k
web制作におけるGitフロー
takanashi66
0
600
CSS Grid Layout Module
takanashi66
0
280
Other Decks in Technology
See All in Technology
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
970
Product Management Conference -AI時代に進化するPdM-
kojima111
0
270
TypeScript入門
recruitengineers
PRO
33
11k
プロダクトの成長に合わせたアーキテクチャの段階的進化と成長痛、そして、ユニットエコノミクスの最適化
kakehashi
PRO
1
110
ライブサービスゲームQAのパフォーマンス検証による品質改善の取り組み
gree_tech
PRO
0
410
mruby(PicoRuby)で ファミコン音楽を奏でる
kishima
2
490
「魔法少女まどか☆マギカ Magia Exedra」のグローバル展開を支える、開発チームと翻訳チームの「意識しない協創」を実現するローカライズシステム
gree_tech
PRO
0
420
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
4
1.9k
役割は変わっても、変わらないもの 〜スクラムマスターからEMへの転身で学んだ信頼構築の本質〜 / How to build trust
shinop
0
150
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
140
コスト削減の基本の「キ」~ コスト消費3大リソースへの対策 ~
smt7174
2
310
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
tobiaslampertlotum
0
120
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Unsuck your backbone
ammeep
671
58k
Bash Introduction
62gerente
614
210k
Documentation Writing (for coders)
carmenintech
73
5k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Writing Fast Ruby
sferik
628
62k
Statistics for Hackers
jakevdp
799
220k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
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͕·ͩ෦తʹ͔͠ରԠͯ͠ͳ͍