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
820
グリッドレイアウト これまでとこれから
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
470
ブラウザのシェアと傾向と対策 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
880
CSS Talk vol.2 Flexbox予告編
m_n_t_p
0
130
Other Decks in Technology
See All in Technology
怖くないオフライン機能開発 〜基本的な技術で実現する現場向けオフライン機能 / Developing offline functions without fear ~ Offline functions for the field realized with basic technology
kaminashi
1
110
Deno Deploy で Web Cache API を 使えるようになったので試した知見
toranoana
1
110
小さな勉強会の始め方、広げ方、あるいは友達の作り方 / How to Start, Grow, and Build Connections with Small Study Groups
ar_tama
6
2.8k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
47k
【shownet.conf_】ShowNet 2024 ~ Inter * Network ~
shownet
PRO
0
530
分析者起点の企画を成功させた連携面の工夫
lycorptech_jp
PRO
1
260
【インフラエンジニアbooks】30分でわかる「AWS継続的セキュリティ実践ガイド」
hssh2_bin
4
1.7k
受託開発でもアジャイル開発できました / Agile in Contract Development
takaking22
9
4.4k
入門 バックアップ
ryuichi1208
18
6.8k
エムスリー全チーム紹介資料 / Introduction of M3 All Teams
m3_engineering
1
320
スタサプ ForSCHOOLアプリのシンプルな設計
recruitengineers
PRO
3
620
プロダクト開発の貢献をアピールするための目標設計や認知活動 / Goal design and recognition activities to promote product development contributions.
oomatomo
5
890
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.7k
Navigating Team Friction
lara
183
14k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
130k
Clear Off the Table
cherdarchuk
91
320k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
BBQ
matthewcrist
85
9.2k
KATA
mclloyd
27
13k
A designer walks into a library…
pauljervisheath
202
24k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
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Λ্ख͑͘ ָ࣮͕ʹͳΔʜʜͣɻ
·ͱΊ άϦουϨΠΞτ σβΠφʔɺσΟϨΫλʔࢹ ଟ͜Ε·Ͱ͜Ε͔Β͋·ΓมΘΓ·ͤΜ͕ʜ ΤϯδχΞଆͰ࣮͢Δํ๏ͷબࢶ͕ ͭ૿͑Δͱ͍͏͜ͱΛ ৺ʹཹΊ͍͚ͯͨͩΕ͍Ͱ͢ ˞෯ɺߴ͞ɺִؒͷࢦఆΕͳ͍Α͏ ɹΑΖ͓͘͠ئ͍͍ͨ͠·͢
ऴ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ