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
FLEXBOX-MEN: Apocalypse
Search
Fuminori Mori
June 11, 2016
Technology
4
450
FLEXBOX-MEN: Apocalypse
2016-06-11開催のHTML Party かごんま 2016で行ったセッション「FLEXBOX-MEN: Apocalypse」のスライド。
Fuminori Mori
June 11, 2016
Tweet
Share
More Decks by Fuminori Mori
See All by Fuminori Mori
JSを使わなくてもCSSでできるようになったこと
moonglows76
0
1.7k
GRID RANGERS
moonglows76
0
210
Other Decks in Technology
See All in Technology
本当のAWS基礎
toru_kubota
0
520
データベース02: データベースの概念
trycycle
0
160
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
1
140
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
160
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
ココがすごいぜ!Playwright Component Test
rakus_fe
0
120
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
140
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
250
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
0
190
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
300
開発パフォーマンスを最大化するための開発体制
ham0215
2
400
require(ESM)とECMAScript仕様
uhyo
3
610
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Code Reviewing Like a Champion
maltzj
514
39k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Into the Great Unknown - MozCon
thekraken
10
990
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
Producing Creativity
orderedlist
PRO
337
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Transcript
FLEXBOX-MEN: Apocalypse ʙdisplay: flex Ͱ ॊೈʹϨΠΞτ͠Α͏ʂʙ @HTML Party ͔͝Μ· 2016
ίʔσΟϯάσβΠϯɹ ࢙ݑ 1 © Coding Design, 2016
࣍ • ࣗݾհ • FLEXBOX-MEN: Apocalypse • ϨΠΞτํ๏ͷൺֱ • ศརϙΠϯτ
• Flexbox • ཕϙΠϯτ • ϑϨʔϜϫʔΫ • ·ͱΊ 2 © Coding Design, 2016
ࣗݾհ 3 © Coding Design, 2016
ࣗݾհ(1/3) • ໊લ ɹ࢙ݑ ʢΓɹ;ΈͷΓʣ • ੜ݄ ত516݄9 • ग़ɾݱॅॴ
ࣛࣇౡݝࣛࣇౡࢢ • ༰࢟ ؙϝΨω 4 © Coding Design, 2016
ࣗݾհ(2/3) • WebαΠτ੍࡞ • Webؔ࿈ٕज़ߨࢣ • Webؔ࿈ॻ੶ࣥච • ΠϕϯτӡӦ 5
© Coding Design, 2016
ࣗݾհ(3/3) • ΧϨʔLOVE!! ⭐ΧϨʔ ঊ #ঊ • ϏʔϧLOVE!! ⭐ࢁ؍ޫϗςϧ #ελτΤʔϧࠇ
• νϣίϨʔτLOVE!! ⭐ύςΟεϦʔϠφΪϜϥ #Ḉຎνϣίνοϓε 6 © Coding Design, 2016
WebͷϨΠΞτ ·͍͠ 7 © Coding Design, 2016
ո्ͷΑ͏ʹ Ε·͘Δ 8 © Coding Design, 2016
Ռͨͯ͠߈ུͰ͖Δ དྷΔͷ͔… 9 © Coding Design, 2016
10 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse 11 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse WebͷϨΠΞτͻͱےೄͰ͍͔ͳ͍ʂ ͦ͏ɺ͍͋ͭେո्… Webzilla!! 12 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse ϨΠΞτํ๏ͷൺֱ 13 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > ϨΠΞτํ๏ͷൺֱ Webzilla Λ߈ུ͢Δ ༷ʑͳϨΠΞτํ๏ ͕ΘΕͨʂ 14 ©
Coding Design, 2016
FLEXBOX-MEN: Apocalypse > ϨΠΞτํ๏ͷൺֱ 1. table 2. float 3. inline-block
4. position 15 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > ϨΠΞτํ๏ͷൺֱ ͲΕଳʹ͖ͨ͢͠ ʹ͠… 16 © Coding Design,
2016
͏ʔΉɺWebzilla खڧ͍ʂ 17 © Coding Design, 2016
ॿ͚ͯʂ FLEXBOX-MENʂ 18 © Coding Design, 2016
19 © Coding Design, 2016
ݺΜ͔͍ͩʂ 20 © Coding Design, 2016
FlexboxΛͬͯ 21 © Coding Design, 2016
Ұॹʹ߈ུ͠Α͏ 22 © Coding Design, 2016
ͥͬ 23 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse ศརϙΠϯτ 24 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > ศརϙΠϯτ FlexboxͷศརϙΠϯτͱ ࣮ࡍͷ͍ํΛݟ͍ͯ͜͏ʂ 25 © Coding Design,
2016
FLEXBOX-MEN: Apocalypse > ศརϙΠϯτ • HTML͕ߥΕͳ͍ • ্ԼਅΜதد͕ͤͰ͖Δ • ཁૉͷฒସ͕͑Ͱ͖Δ
• ཁૉͷվߦ࣌ʹ伱͕ؒͰ͖ͳ͍ • εΫϩʔϧόʔ͕දࣔ͞ΕΔ 26 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > ศརϙΠϯτ ͜Ε·Ͱͷ͕Ұڍʹղܾʂ Ͱ͍ํΛݟͯΈΑ͏ʂ 27 © Coding Design,
2016
FLEXBOX-MEN: Apocalypse Flexbox 28 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox Flexboxͷجຊ 29 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox Flexboxͷجຊ Flexboxཁૉͱࢠཁૉ͕ඞཁͩʂ <div class="container"> <div class="item">item
1</div> <div class="item">item 2</div> <div class="item">item 3</div> </div> 30 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox Flexboxͷجຊ display: flex; ͰཁૉʹFlexboxΛઃఆ͢Δʂ .container {
display: flex; } 31 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox Flexboxͷجຊ flex-direction ͰࢠཁૉͷϨΠΞτΛ੍ޚͰ͖Δͧʂ row, row-reverse,
column, column-reverse ͩʂ .container { display: flex; flex-direction: column-reverse; } 32 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉͷਫฏํͷἧ͑ 33 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉͷਫฏํͷἧ͑ justify-content Ͱࢠཁૉͷਫฏํͷἧ͑Λ੍ޚͰ͖ΔΘʂ flex-start, flex-end,
center, space-between, space-around Αʂ .container { display: flex; justify-content: center; } 34 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉͷਨํͷἧ͑ 35 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉͷਨํͷἧ͑ align-items Ͱࢠཁૉͷਨํͷἧ͑Λ੍ޚͰ͖ΔͬͪΑʂ flex-start, flex-end,
center, baseline, stretch ͡ΌͬͲʂ .container { display: flex; align-items: center; } 36 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉͷંฦ͠ 37 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉͷંฦ͠ flex-wrap ͰࢠཁૉͷંΓฦ͠Λ੍ޚͰ͖Δͥʂ nowrap, wrap,
wrap-reverse ͩʂ .container { display: flex; flex-wrap: wrap-reverse; } 38 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉ͕ॎʹ ෳฒΜͩ࣌ͷἧ͑ 39 © Coding Design,
2016
FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉ͕ॎʹෳฒΜͩ࣌ͷἧ͑ align-content Ͱࢠཁૉ͕ॎʹෳฒΜͩ࣌ͷἧ͑Λ੍ޚͰ͖Δʂ flex-start, flex-end,
center, space-between, space-around Λ͍ Μͤʂ .container { display: flex; align-content: flex-end; } 40 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉ͝ͱʹࢦఆ 41 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉ͝ͱʹࢦఆ flex-basis Ͱݸผͷࢠཁૉͷ࠷খ෯Λ੍ޚͰ͖ͬͨͬͲʂ widthϓϩύςΟʹࢦఆ͢ΔΑ͏ͳ ͬͰͳʂ
.item:nth-child(2) { flex-basis: 200px; } 42 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉ͝ͱʹࢦఆ align-self Ͱݸผͷࢠཁૉͷਨํͷἧ͑Λ੍ޚͰ͖ͬͪʂ flex-start, flex-end,
center, baseline, stretch ΛೖΕΜͦʂ .item:nth-child(2) { align-self: flex-end; } 43 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox ࢠཁૉ͝ͱʹࢦఆ order Ͱݸผͷࢠཁૉͷॱ൪Λ੍ޚͰ͖Δͧʂͨ·͕͕ͬʂ ͡ΌͬͲʂ
.item:nth-child(2) { order: -1; } 44 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse ཕϙΠϯτ 45 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse ཕϙΠϯτ ࣮·ͩة͏͍ͱ͜Ζ͕͋ΔFlexboxʂ গ͚ͩ͠ൈਮͯ͠Έͨʂ 46 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > ཕϙΠϯτ ϒϥβαϙʔτ • Can I use -
Flexible Box Layout Module http:/ /caniuse.com/#feat=flexbox 47 © Coding Design, 2016
48 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > ཕϙΠϯτ ϒϥβαϙʔτ • IE10Ҏ্αϙʔτ • ରࡦɿ IE9ҎԼfloatͰϨΠΞτ͢Δ͔ɺ
flexibility.js Λ ͏͔ɺαϙʔτ֎ʹ͢Δ͔ • flexibility.jsະ༻ɻ͓͢͢Ί͠·ͤΜ 49 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > ཕϙΠϯτ ϒϥβαϙʔτ • Android4.3Ҏલݹ͍༷Ͱͷ࣮ • ྫʣAndroid4.4Ҏ߱ display:
flex; ɹˠ Android4.3Ҏલ display: -webkit-box; • ରࡦɿ Sass flexbox mixin Λ͏͔ɺαϙʔτ֎ʹ͢Δ͔ 50 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > ཕϙΠϯτ όά • IE10, IE11 • ཁૉʹmin-heightΛࢦఆ͢Δͱalign-items͕ޮ͔ͳ͍
• ରࡦɿ ཁૉͷ͞Βʹཁૉʹdisplay: flex; flex-direction: column;Λઃఆ 51 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > ཕϙΠϯτ όά • IE10, IE11 • ࢠཁૉʹflex-basisΛઃఆ͠ͳ͍ͱ͍จষΛંΓฦ͞ͳ͍
• ରࡦɿ ෯ʹ߹Θͤͯࢠཁૉʹflex-basisͱmax-widthΛઃఆ • max-widthΛࢦఆ͢Δͷbox-sizing: border-box;ʹରԠͤ͞Δ ͨΊ 52 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > ཕϙΠϯτ όά • IE10, IE11 • ࢠཁૉʹimgཁૉΛೖΕΔͱը૾ͷॎԣൺ่͕ΕΔ
• ରࡦɿ ࢠཁૉdivཁૉͳͲΛೖΕɺͦͷதʹimgཁૉΛೖΕ Δ 53 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > ཕϙΠϯτ όά ৄ͘͠ Flexbugs ΛνΣοΫʂओʹIE10, 11͕ଟ͍ʂ όάɾղܾࡦͷσϞ͕͋ΔΑʂ
• Flexbugs 54 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > ཕϙΠϯτ JavaScriptͰͷૢ࡞ • flex-directionorderͰॱ൪Λม͑ͯDOMͷॱ൪มΘ͍ͬͯ ͳ͍ • CSSͰॱ൪Λม͑ΔલͷHTML͕ϕʔεʹ೦಄ʹஔ͘ɻ
55 © Coding Design, 2016
flex-direction flex-wrap justify-content align-items flex-basis… 56 © Coding Design, 2016
ϒϥβαϙʔτ όά JavaScriptͷରԠ… 57 © Coding Design, 2016
͋͋ɺ͏಄͕͍ͬͺ ͍ͩ͊͊͊ʂʂʂʂ 58 © Coding Design, 2016
ͽΜΆʔΜ 59 © Coding Design, 2016
ͦΜͳ͋ͳͨʹ࿕ใɻ 60 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse ϑϨʔϜϫʔΫ 61 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse ϑϨʔϜϫʔΫ ͜ΜʹͪɻͰ͢ɻ όάରࡦ͞ΕͯͨΓ͢ΔͷͰɺϑϨʔϜϫʔΫΛ͓͏Ͷʂ 62 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > ϑϨʔϜϫʔΫ • Flexboxͷࣗ༝ʹ͍͍ͨਓ͚ • Sass flexbox mixin
• Autoprefixer • طଘͷFlexboxάϦουΛ͍͍ͨਓ͚(CSS) • Flexbox Grid • FlexboxάϦουΛΧελϚΠζ͍͍ͯͨ͠ਓ͚(Sass) • Flexbox Grid Sass 63 © Coding Design, 2016
·ͱΊ 64 © Coding Design, 2016
Flexbox ϨΠΞτ͢Δͷʹ ͢͝ʔ͘ศརʂ 65 © Coding Design, 2016
ͨͩ͠ɺ ରϒϥβʹҙʂ 66 © Coding Design, 2016
ϒϥβ͝ͱʢओʹIE10,11ʣͷ όάʹҙʂ 67 © Coding Design, 2016
͋͞࠷ޙͷରܾͩʂ WebzillaΛಈ͔ͯ͠ ಎ۸ʹೖΕΑ͏ʂ 68 © Coding Design, 2016
͋Γ͕ͱ͏!܅ͷ׆༂Ͱ ੈքٹΘΕͨΑʂ 69 © Coding Design, 2016
͜Ε͔ΒFlexboxΛ ͬͯੈքΛٹͬͯͶʂ 70 © Coding Design, 2016
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠οοʂ 71 © Coding Design, 2016