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
グリッドレイアウト これまでとこれから
Search
もりてつ
April 22, 2017
Technology
1
830
グリッドレイアウト これまでとこれから
2017年4月22日「CSS Talk vol.3」でのセッション「グリッドレイアウト これまでとこれから」のスライドです。
もりてつ
April 22, 2017
Tweet
Share
More Decks by もりてつ
See All by もりてつ
ブラウザ対応の傾向と対策 2020 / Browser compatibility trends and countermeasures 2020
m_n_t_p
0
960
PC同様の情報量と使い勝手をモバイルで確保するために / To keep the same amount of information and usability on mobile as PC
m_n_t_p
0
490
ブラウザのシェアと傾向と対策 2018改
m_n_t_p
0
320
ブラウザのシェアと傾向と対策2018
m_n_t_p
0
140
40代からのフロントエンドエンジニアリング Ver.3
m_n_t_p
0
150
Vue.jsトリビア(Vue.jsのコードネーム)
m_n_t_p
0
1k
単位をあやつる
m_n_t_p
2
870
IE9を斬ってFlexboxを使い始めたらサクサク捗った件
m_n_t_p
1
900
CSS Talk vol.2 Flexbox予告編
m_n_t_p
0
130
Other Decks in Technology
See All in Technology
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
390
FlutterアプリにおけるSLI/SLOを用いたユーザー体験の可視化と計測基盤構築
ostk0069
0
110
日経電子版のStoreKit2フルリニューアル
shimastripe
1
140
SSMRunbook作成の勘所_20241120
koichiotomo
3
160
TanStack Routerに移行するのかい しないのかい、どっちなんだい! / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
600
ドメインの本質を掴む / Get the essence of the domain
sinsoku
2
160
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
4
230
The Role of Developer Relations in AI Product Success.
giftojabu1
0
140
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
130
アプリエンジニアのためのGraphQL入門.pdf
spycwolf
0
100
心が動くエンジニアリング ── 私が夢中になる理由
16bitidol
0
100
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.4k
Featured
See All Featured
Visualization
eitanlees
145
15k
Happy Clients
brianwarren
98
6.7k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Ruby is Unlike a Banana
tanoku
97
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Speed Design
sergeychernyshev
25
620
The Invisible Side of Design
smashingmag
298
50k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
How STYLIGHT went responsive
nonsquared
95
5.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Transcript
άϦουϨΠΞτ ͜Ε·Ͱͱ͜Ε͔Β 2017.4.22. CSS Talk vol.3 Ӭฏ 5FQQFJ.PSJOBHB
ࠓճͷ༰ άϦου ϨΠΞτͱ ͜Ε·Ͱͷ άϦου ϨΠΞτ σϞ ͜Ε͔Βͷ άϦου ϨΠΞτ
$44 (SJE-BZPVU ·ͱΊ
ࣗݾհ Ӭฏ ʢΓͯͭʣ גࣜձࣾάϥουΩϡʔϒ ϓϩμΫτ։ൃνʔϜ ΤϯδχΞ
ࠓճͷ༰ άϦου ϨΠΞτͱ ͜Ε·Ͱͷ άϦου ϨΠΞτ σϞ ͜Ε͔Βͷ άϦου ϨΠΞτ
$44 (SJE-BZPVU ·ͱΊ
άϦουϨΠΞτͱ άϦουσβΠϯͱɺ8FCϖʔδͳͲͷσβΠϯख๏ͷҰ ͭͰɺը໘ϖʔδΛॎԣʹஅ͢ΔઢͰ֨ࢠঢ়ʹׂ͠ɺ ͜ΕΛΈ߹Θͤͯ෦ͷཁૉͷେ͖͞ஔΛܾఆ͍ͯ͠ ͘ํࣜɻಛʹɺϖʔδΛํ؟ࢴͷΑ͏ʹಉ͡େ͖͞ͷඍࡉͳ ਖ਼ํܗʹׂ͠ɺ͜ΕΛෳΈ߹Θͤͯཁૉ༨നΛߏ ͢Δํࣜɻ ग़యɿʮ*5༻ޠࣙయɹF8PSETʯ
άϦουϨΠΞτͱ άϦουσβΠϯͱɺ8FCϖʔδͳͲͷσβΠϯख๏ͷҰ ͭͰɺը໘ϖʔδΛॎԣʹஅ͢ΔઢͰ֨ࢠঢ়ʹׂ͠ɺ ͜ΕΛΈ߹Θͤͯ෦ͷཁૉͷେ͖͞ஔΛܾఆ͍ͯ͠ ͘ํࣜɻಛʹɺϖʔδΛํ؟ࢴͷΑ͏ʹಉ͡େ͖͞ͷඍࡉͳ ਖ਼ํܗʹׂ͠ɺ͜ΕΛෳΈ߹Θͤͯཁૉ༨നΛߏ ͢Δํࣜɻ ग़యɿʮ*5༻ޠࣙయɹF8PSETʯ άϦου
άϦουϨΠΞτͱ ํ؟ࢴ
άϦουϨΠΞτͱ
άϦουϨΠΞτͷಛ ৽ฉࡶࢽͳͲҹͷϨΠΞτͰΑ͘༻͍ΒΕΔख๏ Ͱɺจষը૾ɺ༨നͳͲ෦ͷߏཁૉͷڥքઢ͕ඞͣ֨ ࢠঢ়ͷઢ άϦουઢ ʹ߹͏Α͏ʹஔ͢Δ͜ͱͰɺ༷ʑͳେ ͖͞ͷཁૉΛෳࡶʹஔ͖ͯͬ͢͠Γͨ͠ݟ͍͢ߏʹ͢ Δ͜ͱ͕Ͱ͖Δɻ֨ࢠઢϨΠΞτͷܾఆ࣌ʹԾతʹҾ ͔ΕΔͷͰɺ࣮ࡍͷσβΠϯ্࣮ઢͱͯ͠දࣔ͞ΕΔΘ͚ Ͱͳ͍ɻ
ग़యɿʮ*5༻ޠࣙయɹF8PSETʯ
ࠓճͷ༰ άϦου ϨΠΞτͱ ͜Ε·Ͱͷ άϦου ϨΠΞτ σϞ ͜Ε͔Βͷ άϦου ϨΠΞτ
$44 (SJE-BZPVU ·ͱΊ
άϦουϨΠΞτͷ࣮ ଟ͍ͷʜʜ $44ϑϨʔϜϫʔΫΛ͏ํ๏
άϦουϨΠΞτͷ࣮ ଟ͍ͷʜʜ $44ϑϨʔϜϫʔΫΛ͏ํ๏ ը໘෯Λׂ͢Δ͜ͱ͕ଟ͍ ֤ཁૉͲΕ͚ͩͷ෯Λ͏͔ΫϥεͰࢦఆ
άϦουϨΠΞτͷ࣮ ͨ·ʹ͋Δͷʜʜ +BWB4DSJQUϥΠϒϥϦΛ͏ํ๏ ಈతʹ෯ɺߴ͞ɺ ϨΠΞτͳͲΛ มԽͤ͞Δ࣌ʹ
άϦουϨΠΞτ༻ྫ άϥουΩϡʔϒ8FCαΠτʢ݄ϦχϡʔΞϧʣ ˠαʔϏεҰཡͷͱ͜ΖͰάϦουϨΠΞτΛ༻
ࠓճͷ༰ άϦου ϨΠΞτͱ ͜Ε·Ͱͷ άϦου ϨΠΞτ σϞ ͜Ε͔Βͷ άϦου ϨΠΞτ
$44 (SJE-BZPVU ·ͱΊ
$44(SJE-BZPVU w8$ʹ༷ͯࡦఆத w݄ʹקࠂީิ͕ϦϦʔε wIUUQTXXXXPSH53DTTHSJE $44͚ͩͰʢϑϨʔϜϫʔΫແ͠Ͱʣ άϦουϨΠΞτͷ࣮͕؆୯ʹʂ
$44(SJE-BZPVU ֤ϒϥβ͕ਖ਼ࣜ࠾༻ͯ͠ूΊΔ 'JSFGPYˠ͔Β ϦϦʔε $ISPNFˠ͔Β ϦϦʔε 4BGBSJ J04 ˠJ04͔Β
ϦϦʔε
$44(SJE-BZPVU ରԠঢ়گ *&&EHFɿ ϕϯμʔϓϨϑΟοΫε͕ඞཁ Ҏલ͔ΒରԠ͞Ε͍͕༷͕ͯͨݹ͍··
ࠓճͷ༰ άϦου ϨΠΞτͱ ͜Ε·Ͱͷ άϦου ϨΠΞτ σϞ ͜Ε͔Βͷ άϦου ϨΠΞτ
$44 (SJE-BZPVU ·ͱΊ
$44(SJE-BZPVUσϞ αϯϓϧ
$44(SJE-BZPVUσϞ αϯϓϧɾඞཁͳ)5.-ͷهࡌ <div class="main"> <p class="area1"><span>Area 1</span></p> <p class="area2"><span>Area
2</span></p> <p class="area3"><span>Area 3</span></p> <p class="area4"><span>Area 4</span></p> </div>
$44(SJE-BZPVUσϞ αϯϓϧɾ$44Ͱཁૉͷࢦఆ .main{ display: grid; grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px; grid-gap: 6px; } $44(SJE-BZPVUΛ͍·͢Αͱએݴ ྻͷ෯ɻࠨ͔Βॱʹࢦఆ ߦͷߴ͞ɻ্͔Βॱʹࢦఆ ֤ྻɺ֤ߦͷִؒ
$44(SJE-BZPVUσϞ αϯϓϧɾ$44Ͱཁૉͷࢦఆ grid-template-columns: 100px 1fr 2fr; ͱॻ͘ͱʜ ྻɿQY ྻΊͱྻɿΓͷ෯ΛͰׂ
QY Γͷ෯
$44(SJE-BZPVUσϞ αϯϓϧɾ$44Ͱࢠཁૉͷࢦఆ .area3{ background-color: #c4ff91; grid-column: 1/3; grid-row: 2;
} ྻͷ։࢝ҐஔɺऴྃҐஔͷࢦఆ ʢͷͰͳ͍ʣ ߦͷ։࢝Ґஔͷࢦఆ
$44(SJE-BZPVUσϞ αϯϓϧɾ$44Ͱࢠཁૉͷࢦఆ grid-column: 1/3; grid-row: 2; ྻ͓Αͼߦͷ։࢝ɺऴྃҐஔࢦఆํ๏ ൪͔Β൪·Ͱͷྻ ൪͔Β൪·Ͱͷߦ
ऴྃҐஔলུՄ
$44(SJE-BZPVUσϞ αϯϓϧɾܗ )5.-$44ͷίʔυ$PEF1FOʹͯ IUUQDPEFQFOJPU@NPSJOBHBQFO&89HC-
ࠓճͷ༰ άϦου ϨΠΞτͱ ͜Ε·Ͱͷ άϦου ϨΠΞτ σϞ ͜Ε͔Βͷ άϦου ϨΠΞτ
$44 (SJE-BZPVU ·ͱΊ
͜Ε͔ΒͷάϦουϨΠΞτ $44(SJE-BZPVU·Δ͔ʁ $ISPNF'JSFGPY4BGBSJରԠ͞Ε͔ͨΓ *&&EHFͷରԠݹ͍༷ͷ·· ීٴ͢Δ·Ͱ͏গ͕͔͔࣌ؒ͠Δʁ
͜Ε͔ΒͷάϦουϨΠΞτ $44(SJE-BZPVUWT'MFYCPY 'MFYCPY ˠॎ·ͨԣͷํ
ʜʜ $44(SJE-BZPVU ˠॎԣ྆ํ ͏·͍͚͍ͯ͘͘͜ͱ͕ॏཁ
άϦουϨΠΞτ༻࣌ͷ৺͕͚ σβΠφʔɺσΟϨΫλʔͷํ ྻͷ෯ ߦͷߴ͞ ྻɺߦͷִؒ
QY QY QY QY QY QY QY QY QY ۩ମతͳࢦࣔΛԼ͍͞ ແ͍ͱΤϯδχΞ͕ࠔΓ·͢
άϦουϨΠΞτ༻࣌ͷ৺͕͚ ΤϯδχΞͱͯ͠ $44ϑϨʔϜϫʔΫ +BWB4DSJQUϥΠϒϥϦ $44(SJE-BZPVU ͦͷͱ͖ʹԠͯ͡ ͍͍͢ͷΛ ͍·͠ΐ͏
ࠓճͷ༰ άϦου ϨΠΞτͱ ͜Ε·Ͱͷ άϦου ϨΠΞτ σϞ ͜Ε͔Βͷ άϦου ϨΠΞτ
$44 (SJE-BZPVU ·ͱΊ
·ͱΊ άϦουϨΠΞτ ΤϯδχΞࢹ ͜Ε·Ͱɿ $44ϑϨʔϜϫʔΫͳͲΛ͏͜ͱ͕ଟ͔ͬͨ ͜Ε͔Βɿ $44(SJE-BZPVUΛ্ख͑͘ ָ࣮͕ʹͳΔʜʜͣɻ
·ͱΊ άϦουϨΠΞτ σβΠφʔɺσΟϨΫλʔࢹ ଟ͜Ε·Ͱ͜Ε͔Β͋·ΓมΘΓ·ͤΜ͕ʜ ΤϯδχΞଆͰ࣮͢Δํ๏ͷબࢶ͕ ͭ૿͑Δͱ͍͏͜ͱΛ ৺ʹཹΊ͍͚ͯͨͩΕ͍Ͱ͢ ˞෯ɺߴ͞ɺִؒͷࢦఆΕͳ͍Α͏ ɹΑΖ͓͘͠ئ͍͍ͨ͠·͢
ऴ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ