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
880
グリッドレイアウト これまでとこれから
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
990
PC同様の情報量と使い勝手をモバイルで確保するために / To keep the same amount of information and usability on mobile as PC
m_n_t_p
0
510
ブラウザのシェアと傾向と対策 2018改
m_n_t_p
0
340
ブラウザのシェアと傾向と対策2018
m_n_t_p
0
140
40代からのフロントエンドエンジニアリング Ver.3
m_n_t_p
0
160
Vue.jsトリビア(Vue.jsのコードネーム)
m_n_t_p
0
1.1k
単位をあやつる
m_n_t_p
2
900
IE9を斬ってFlexboxを使い始めたらサクサク捗った件
m_n_t_p
1
920
CSS Talk vol.2 Flexbox予告編
m_n_t_p
0
140
Other Decks in Technology
See All in Technology
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.6k
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
130
Building Products in the LLM Era
ymatsuwitter
10
5.4k
速くて安いWebサイトを作る
nishiharatsubasa
10
12k
N=1から解き明かすAWS ソリューションアーキテクトの魅力
kiiwami
0
130
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
200
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.6k
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
2
2.9k
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
210
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
1
700
抽象化をするということ - 具体と抽象の往復を身につける / Abstraction and concretization
soudai
15
3.3k
人はなぜISUCONに夢中になるのか
kakehashi
PRO
6
1.6k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Designing Experiences People Love
moore
140
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
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Λ্ख͑͘ ָ࣮͕ʹͳΔʜʜͣɻ
·ͱΊ άϦουϨΠΞτ σβΠφʔɺσΟϨΫλʔࢹ ଟ͜Ε·Ͱ͜Ε͔Β͋·ΓมΘΓ·ͤΜ͕ʜ ΤϯδχΞଆͰ࣮͢Δํ๏ͷબࢶ͕ ͭ૿͑Δͱ͍͏͜ͱΛ ৺ʹཹΊ͍͚ͯͨͩΕ͍Ͱ͢ ˞෯ɺߴ͞ɺִؒͷࢦఆΕͳ͍Α͏ ɹΑΖ͓͘͠ئ͍͍ͨ͠·͢
ऴ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ