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
280
CSS Grid Layout Module
フロントエンド夏祭り in 広島でのLT
井上拓
August 19, 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
広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』
takanashi66
0
300
Other Decks in Technology
See All in Technology
OPENLOGI Company Profile for engineer
hr01
1
45k
serverless team topology
_kensh
3
240
GPUをつかってベクトル検索を扱う手法のお話し~NVIDIA cuVSとCAGRA~
fshuhe
0
150
20251029_Cursor Meetup Tokyo #02_MK_「あなたのAI、私のシェル」 - プロンプトインジェクションによるエージェントのハイジャック
mk0721
PRO
5
1.8k
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
180
SOTA競争から人間を超える画像認識へ
shinya7y
0
600
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
380
re:Inventに行くまでにやっておきたいこと
nagisa53
0
660
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
shuta13
3
220
AIエージェントによる業務効率化への飽くなき挑戦-AWS上の実開発事例から学んだ効果、現実そしてギャップ-
nasuvitz
5
1.4k
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
emiki
0
250
What's new in OpenShift 4.20
redhatlivestreaming
0
330
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Raft: Consensus for Rubyists
vanstee
140
7.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Fireside Chat
paigeccino
41
3.7k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
How to Ace a Technical Interview
jacobian
280
24k
The Cult of Friendly URLs
andyhume
79
6.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Become a Pro
speakerdeck
PRO
29
5.6k
BBQ
matthewcrist
89
9.9k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
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͕·ͩ෦తʹ͔͠ରԠͯ͠ͳ͍
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠