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
20250913_JAWS_sysad_kobe
takuyay0ne
2
250
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
240
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
880
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.3k
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
330
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1.1k
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
460
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
380
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A designer walks into a library…
pauljervisheath
207
24k
The Invisible Side of Design
smashingmag
301
51k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
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͕·ͩ෦తʹ͔͠ରԠͯ͠ͳ͍
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠