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
720
Laravel Mixではじめるwebpack
takanashi66
0
490
gulpやめてLaravel Mixはじめた話
takanashi66
1
210
LT-WordPressの開発をプラグインで管理する
takanashi66
0
340
広島フロントエンド勉強会 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
590
CSS Grid Layout Module
takanashi66
0
270
Other Decks in Technology
See All in Technology
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
getty708
0
200
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
470
データ戦略部門 紹介資料
sansan33
PRO
1
3.3k
claude codeでPrompt Engineering
iori0311
0
380
QAを早期に巻き込む”って どうやるの? モヤモヤから抜け出す実践知
moritamasami
2
170
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
110
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
ymotongpoo
3
210
P2P通信の標準化 WebRTCを知ろう
faithandbrave
6
2.3k
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
880
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
20
5.7k
BEYOND THE RAG🚀 ~とりあえずRAG?を超えていけ! 本当に使えるAIエージェント&生成AIプロダクトを目指して~ / BEYOND-THE-RAG-Toward Practical-GenerativeAI-Products-AOAI-DevDay-2025
jnymyk
4
230
SREを知らずに SREマネージャーになった話 / How I Became an SRE Manager Without Knowing What SRE Is
moneyforward
0
280
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
BBQ
matthewcrist
89
9.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
How STYLIGHT went responsive
nonsquared
100
5.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
What's in a price? How to price your products and services
michaelherold
246
12k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Statistics for Hackers
jakevdp
799
220k
Speed Design
sergeychernyshev
32
1k
Side Projects
sachag
455
43k
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͕·ͩ෦తʹ͔͠ରԠͯ͠ͳ͍