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
940
グリッドレイアウト これまでとこれから
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
1k
PC同様の情報量と使い勝手をモバイルで確保するために / To keep the same amount of information and usability on mobile as PC
m_n_t_p
0
540
ブラウザのシェアと傾向と対策 2018改
m_n_t_p
0
370
ブラウザのシェアと傾向と対策2018
m_n_t_p
0
150
40代からのフロントエンドエンジニアリング Ver.3
m_n_t_p
0
170
Vue.jsトリビア(Vue.jsのコードネーム)
m_n_t_p
0
1.1k
単位をあやつる
m_n_t_p
2
940
IE9を斬ってFlexboxを使い始めたらサクサク捗った件
m_n_t_p
1
950
CSS Talk vol.2 Flexbox予告編
m_n_t_p
0
140
Other Decks in Technology
See All in Technology
DroidKnights 2025 - Jetpack XR 살펴보기: XR 개발은 어떻게 이루어지는가?
heesung6701
1
130
生成AIをテストプロセスに活用し"よう"としている話 #jasstnano
makky_tyuyan
0
180
技術職じゃない私がVibe Codingで感じた、AGIが身近になる未来
blueb
0
130
IAMのマニアックな話 2025を執筆して、 見えてきたAWSアカウント管理の現在
nrinetcom
PRO
4
600
今からでも間に合う! 生成AI「RAG」再入門 / Re-introduction to RAG in Generative AI
hideakiaoyagi
1
190
kotlin-lsp を Emacs で使えるようにしてみた / use kotlin-lsp in Emacs
nabeo
0
160
In Praise of "Normal" Engineers (LDX3)
charity
2
1k
OAuth/OpenID Connectで実現するMCPのセキュアなアクセス管理
kuralab
2
270
Agentic DevOps時代の生存戦略
kkamegawa
0
490
“プロダクトを好きになれるか“も QAエンジニア転職の大事な判断基準だと思ったの
tomodakengo
0
150
"SaaS is Dead" は本当か!? 生成AI時代の医療 Vertical SaaS のリアル
kakehashi
PRO
3
230
本部長の代わりに提案書レビュー! KDDI営業が毎日使うAIエージェント「A-BOSS」開発秘話
minorun365
PRO
14
1.9k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Invisible Side of Design
smashingmag
299
51k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
A Modern Web Designer's Workflow
chriscoyier
693
190k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Cost Of JavaScript in 2023
addyosmani
50
8.4k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
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Λ্ख͑͘ ָ࣮͕ʹͳΔʜʜͣɻ
·ͱΊ άϦουϨΠΞτ σβΠφʔɺσΟϨΫλʔࢹ ଟ͜Ε·Ͱ͜Ε͔Β͋·ΓมΘΓ·ͤΜ͕ʜ ΤϯδχΞଆͰ࣮͢Δํ๏ͷબࢶ͕ ͭ૿͑Δͱ͍͏͜ͱΛ ৺ʹཹΊ͍͚ͯͨͩΕ͍Ͱ͢ ˞෯ɺߴ͞ɺִؒͷࢦఆΕͳ͍Α͏ ɹΑΖ͓͘͠ئ͍͍ͨ͠·͢
ऴ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ