Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
JSを使わなくてもCSSでできるようになったこと
Fuminori Mori
January 11, 2020
Technology
0
580
JSを使わなくてもCSSでできるようになったこと
鹿児島市のマークメイザンで2020年1月11日に開催された「ゆるやかな合同Web勉強会」でのLTのスライドです。
Fuminori Mori
January 11, 2020
Tweet
Share
More Decks by Fuminori Mori
See All by Fuminori Mori
moonglows76
0
180
moonglows76
4
350
Other Decks in Technology
See All in Technology
optim
0
190
manuelmeyer
0
130
udzura
2
250
youtalk
0
350
ch1aki
2
180
karamem0
1
720
buildersbox
0
200
soracom
0
120
1027kg
0
190
hashhub
3
16k
900groove
2
230
ihcomega56
1
510
Featured
See All Featured
bryan
100
11k
frogandcode
128
20k
philhawksworth
190
17k
philhawksworth
192
8.8k
robhawkes
52
2.8k
gr2m
83
11k
smashingmag
230
18k
kastner
54
1.9k
jeffersonlam
329
15k
sstephenson
145
12k
jonrohan
1021
380k
jonyablonski
19
1.2k
Transcript
JSΛΘͳͯ͘ CSSͰͰ͖ΔΑ͏ʹͳͬͨ͜ͱ 2020-01-11 @ ΏΔ͔ͳ߹ಉWebษڧձ ίʔσΟϯάσβΠϯɹ ࢙ݑ h$PEJOH%FTJHO
ίʔσΟϯάσβΠϯ ɹ࢙ݑ ίʔμʔ ॻ੶ஶऀ ߨࢣ Πϕϯτओ࠵ऀ h$PEJOH%FTJHO
CSSͰʮಈ͖ʯΛ ఏڙͰ͖ΔΑ͏ʹͳͬͨʂ h$PEJOH%FTJHO
͜Ε·ͰJavaScriptͰ ࣮͖ͯͨ͜͠ͱɺ h$PEJOH%FTJHO
CSS͚ͩͰ Ͱ͖Δ͜ͱ͋ΔΑʔͬʂ h$PEJOH%FTJHO
✋✋ ݟͯΈ͍ͨਓʔʔʔʂ h$PEJOH%FTJHO
! ! ͋͟ʔʔʔͬ͢ʂ ! h$PEJOH%FTJHO
εϜʔζεΫϩʔϧʂʂ h$PEJOH%FTJHO
$0%&1&/ h$PEJOH%FTJHO
h$PEJOH%FTJHO
!!! ϝϦοτ ϓϩύςΟ1ͭͰ࣮! ʢscroll-behaviorʣ h$PEJOH%FTJHO
!!! σϝϦοτ ࡉ͔͍ௐͰ͖ͳʔ͍ h$PEJOH%FTJHO
✋✋ ͬͱ ✋✋ ݟͯΈ͍ͨਓʔʔʔʂ h$PEJOH%FTJHO
! ɹ ! ɹ ! ͋͟ʔʔʔͬ͢ʂ ! ɹ ! ɹ
h$PEJOH%FTJHO
εΫϩʔϧ్த͔Β ্෦ʹݻఆʂʂʂ h$PEJOH%FTJHO
$0%&1&/ h$PEJOH%FTJHO
h$PEJOH%FTJHO
!!! ϝϦοτ ϓϩύςΟ2ͭͰ࣮! ʢposi'onͱtopʣ h$PEJOH%FTJHO
!!! σϝϦοτ ࡉ͔͍ௐͰ͖ͳʔ͍ ʢຊ̎ճʣ h$PEJOH%FTJHO
ࡉ͔͍͜ͱݴΘͳ͍ͳΒ CSSͰ࣮͋Γ͔ʁ h$PEJOH%FTJHO
·ͱΊ h$PEJOH%FTJHO
ʮεϜʔζεΫϩʔϧʯ htmlཁૉʹ scroll-behavior: smooth; h$PEJOH%FTJHO
ʮεΫϩʔϧ్த͔Β্෦ʹݻఆʯ ରཁૉʹ posi%on: s%cky;ɹtop: 0; h$PEJOH%FTJHO
ؾʹͳͬͨΒ ͬͯΈΑʔʔʔʂ h$PEJOH%FTJHO
ຖ݄தԝӺۙ͘Ͱ ͯ͛ͯ͛ͳΏΔʔ͍ษڧձ ͯ͛Webͬͯ·͢ʂ h$PEJOH%FTJHO
ʢ࠷ۙຖ݄Ͱͳ͘ͳͬͯ·͕͢… ʣ h$PEJOH%FTJHO
ৄ͘͠ʮͯ͛Webʯ FacebookϖʔδͰʂ IUUQTXXXGBDFCPPLDPNUFHFXFC h$PEJOH%FTJHO
! ɹ ! ɹ ! ͋͟·ͨͬ͠ʂ ! ɹ ! ɹ
h$PEJOH%FTJHO