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
井上拓
August 19, 2017
Technology
0
250
CSS Grid Layout Module
フロントエンド夏祭り in 広島でのLT
井上拓
August 19, 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
広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』
takanashi66
0
290
Other Decks in Technology
See All in Technology
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
130
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
210
Mastering Quickfix
daisuzu
1
110
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
2
480
Flutterによる 効率的なAndroid・iOS・Webアプリケーション開発の事例
recruitengineers
PRO
0
120
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.2k
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
10
1.3k
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
230
Platform Engineering for Software Developers and Architects
syntasso
1
520
Zennのパフォーマンスモニタリングでやっていること
ryosukeigarashi
0
230
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
190
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
We Have a Design System, Now What?
morganepeng
50
7.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Writing Fast Ruby
sferik
627
61k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Raft: Consensus for Rubyists
vanstee
136
6.6k
The Pragmatic Product Professional
lauravandoore
31
6.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Transcript
None
CSS Grid Layout Module Ҫ্
CSS Grid Layout Moduleͱ
CSS Grid Layout Moduleͱ • CSS3Ͱࡦఆ͕ਐΊΒΕ͍ͯΔɺFlexible Box Layout Moduleʹ͙࣍৽ͨͳϨΠΞτϞ δϡʔϧɻ
• ίϯςφΛॎԣͷ֨ࢠঢ়ʹׂͯ͠ཁૉΛࣗ ༝ʹஔग़དྷΔ
CSS Grid Layout Module Ҫ্
ϒϥβ࣮ঢ়گ
ϒϥβ࣮ঢ়گ • Ϟμϯϒϥβجຊతʹ࣮ࡁΈ
ʊਓਓਓਓਓਓਓʊ ʼɹ ҆ఆͷIEɹ ʻ ʉY^Y^Y^Y^Y^Yʉ
ॻ͖ํ
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
ʊਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ ಥવͷΞεΩʔΞʔτɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^Yʉ
ײతͰݟ͍͢
Flexible Box Layout Module ͱ CSS Grid Layout Module
Ͳ͕͍͍ͬͪͷ • ઢతͳஔFlexible Box Layout Module • ෳࡶͳஔCSS Grid Layout
Module
·ͱΊ
·ͱΊ • Ϟμϯϒϥβ࣮ࡁΈͳͷͰɺ͏ͬ ͯେৎ • ΞεΩʔΞʔτͷΑ͏ͳهड़Ͱɺཁૉͷஔ͕ ؆୯͔ͭݟ͍͢
ҙ • IEʹϕϯμʔϓϨϑΟοΫε͕ඞཁ • autoprefixer͕·ͩ෦తʹ͔͠ରԠͯ͠ͳ͍
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠