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
950
PC同様の情報量と使い勝手をモバイルで確保するために / To keep the same amount of information and usability on mobile as PC
m_n_t_p
0
480
ブラウザのシェアと傾向と対策 2018改
m_n_t_p
0
310
ブラウザのシェアと傾向と対策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
860
IE9を斬ってFlexboxを使い始めたらサクサク捗った件
m_n_t_p
1
890
CSS Talk vol.2 Flexbox予告編
m_n_t_p
0
130
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
27
12k
急成長中のWINTICKETにおける品質と開発スピードと向き合ったQA戦略と今後の展望 / winticket-autify
cyberagentdevelopers
PRO
1
160
ガバメントクラウド先行事業中間報告を読み解く
sugiim
1
1.4k
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
470
プロダクト成長に対応するプラットフォーム戦略:Authleteによる共通認証基盤の移行事例 / Building an authentication platform using Authlete and AWS
kakehashi
1
150
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
21
3.5k
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
220
「視座」の上げ方が成人発達理論にわかりやすくまとまってた / think_ perspective_hidden_dimensions
shuzon
2
4.8k
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
140
Automated Promptingを目指すその前に / Before we can aim for Automated Prompting
rkaga
0
110
よくわからんサービスについての問い合わせが来たときの強い味方 Amazon Q について
kazzpapa3
0
220
Featured
See All Featured
Teambox: Starting and Learning
jrom
132
8.7k
Building an army of robots
kneath
302
42k
Rails Girls Zürich Keynote
gr2m
93
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Producing Creativity
orderedlist
PRO
341
39k
The Cult of Friendly URLs
andyhume
78
6k
Documentation Writing (for coders)
carmenintech
65
4.4k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
Unsuck your backbone
ammeep
668
57k
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
A Philosophy of Restraint
colly
203
16k
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Λ্ख͑͘ ָ࣮͕ʹͳΔʜʜͣɻ
·ͱΊ άϦουϨΠΞτ σβΠφʔɺσΟϨΫλʔࢹ ଟ͜Ε·Ͱ͜Ε͔Β͋·ΓมΘΓ·ͤΜ͕ʜ ΤϯδχΞଆͰ࣮͢Δํ๏ͷબࢶ͕ ͭ૿͑Δͱ͍͏͜ͱΛ ৺ʹཹΊ͍͚ͯͨͩΕ͍Ͱ͢ ˞෯ɺߴ͞ɺִؒͷࢦఆΕͳ͍Α͏ ɹΑΖ͓͘͠ئ͍͍ͨ͠·͢
ऴ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ