Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JSを使わなくてもCSSでできるようになったこと

582e704d86157b464e1933c6d104cce0?s=47 Fuminori Mori
January 11, 2020
Technology
0
990

 JSを使わなくてもCSSでできるようになったこと

鹿児島市のマークメイザンで2020年1月11日に開催された「ゆるやかな合同Web勉強会」でのLTのスライドです。

582e704d86157b464e1933c6d104cce0?s=128

Fuminori Mori

January 11, 2020
Tweet

More Decks by Fuminori Mori

See All by Fuminori Mori
582e704d86157b464e1933c6d104cce0?s=48 moonglows76
0
190
582e704d86157b464e1933c6d104cce0?s=48 moonglows76
4
370

Other Decks in Technology

See All in Technology
13d936e697fe0f4fa96f926d0a712f6c?s=48 sansanbuildersbox
PRO
0
280
Ad5c154f422a9204af738d173aad4d4c?s=48 kinunori
0
300
0c2e1fea502b8934820eacdfca778d8c?s=48 tommy351
1
170
532348a1aba5a909e283624c3d2a9a95?s=48 shift_evolve
0
1.9k
B3d3a2cce932eca144b8c13a63966404?s=48 alblue
2
420
F04982ad61107b5408ad139966596316?s=48 hanhan1978
3
270
Dc20c893cac0daddd607dfc9a5855d27?s=48 amarelo_n24
0
430
3ed35dce7bdede37814ccbb952cbf026?s=48 techtver
0
220
67683b0a8d24009c731787b49881a9de?s=48 tomuro
1
510
7fccfb690a818ed2f3a15fc21d426d5a?s=48 texmeijin
2
110
966e29b84ae7dbde170f66b0bc75b7a6?s=48 ishiayaya
0
100
Bf4ef03d51107cf4cfa0c5146503b387?s=48 thorikawa
0
210

Featured

See All Featured
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
181
14k
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
106
5.5k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
55
5k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
800
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
261
25k
78b475797a14c84799063c7cd073962f?s=48 holman
295
140k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
446
29k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
18k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
129
22k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
7k
78b475797a14c84799063c7cd073962f?s=48 holman
464
280k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
4k

Transcript

  1. JSΛ࢖Θͳͯ͘΋ CSSͰͰ͖ΔΑ͏ʹͳͬͨ͜ͱ 2020-01-11 @ ΏΔ΍͔ͳ߹ಉWebษڧձ ίʔσΟϯάσβΠϯɹ৿ ࢙ݑ h$PEJOH%FTJHO 

  2. ίʔσΟϯάσβΠϯ ৿ɹ࢙ݑ ίʔμʔ ॻ੶ஶऀ ߨࢣ Πϕϯτओ࠵ऀ h$PEJOH%FTJHO 

  3. CSSͰʮಈ͖ʯΛ ఏڙͰ͖ΔΑ͏ʹͳͬͨʂ h$PEJOH%FTJHO 

  4. ͜Ε·ͰJavaScriptͰ ࣮૷͖ͯͨ͜͠ͱɺ h$PEJOH%FTJHO 

  5. CSS͚ͩͰ Ͱ͖Δ͜ͱ͋ΔΑʔͬʂ h$PEJOH%FTJHO 

  6. ✋✋ ݟͯΈ͍ͨਓʔʔʔʂ h$PEJOH%FTJHO 

  7. ! ! ͋͟ʔʔʔͬ͢ʂ ! h$PEJOH%FTJHO 

  8. εϜʔζεΫϩʔϧʂʂ h$PEJOH%FTJHO 

  9. $0%&1&/ h$PEJOH%FTJHO 

  10. h$PEJOH%FTJHO 

  11. !!! ϝϦοτ ϓϩύςΟ1ͭͰ࣮૷! ʢscroll-behaviorʣ h$PEJOH%FTJHO 

  12. !!! σϝϦοτ ࡉ͔͍ௐ੔͸Ͱ͖ͳʔ͍ h$PEJOH%FTJHO 

  13. ✋✋ ΋ͬͱ ✋✋ ݟͯΈ͍ͨਓʔʔʔʂ h$PEJOH%FTJHO 

  14. ! ɹ ! ɹ ! ͋͟ʔʔʔͬ͢ʂ ! ɹ ! ɹ

    h$PEJOH%FTJHO 

  15. εΫϩʔϧ్த͔Β ্෦ʹݻఆʂʂʂ h$PEJOH%FTJHO 

  16. $0%&1&/ h$PEJOH%FTJHO 

  17. h$PEJOH%FTJHO 

  18. !!! ϝϦοτ ϓϩύςΟ2ͭͰ࣮૷! ʢposi'onͱtopʣ h$PEJOH%FTJHO 

  19. !!! σϝϦοτ ࡉ͔͍ௐ੔͸Ͱ͖ͳʔ͍ ʢຊ೔̎ճ໨ʣ h$PEJOH%FTJHO 

  20. ࡉ͔͍͜ͱݴΘͳ͍ͳΒ CSSͰ࣮૷΋͋Γ͔΋ʁ h$PEJOH%FTJHO 

  21. ·ͱΊ h$PEJOH%FTJHO 

  22. ʮεϜʔζεΫϩʔϧʯ͸ htmlཁૉʹ scroll-behavior: smooth; h$PEJOH%FTJHO 

  23. ʮεΫϩʔϧ్த͔Β্෦ʹݻఆʯ͸ ର৅ཁૉʹ posi%on: s%cky;ɹtop: 0; h$PEJOH%FTJHO 

  24. ؾʹͳͬͨΒ ࢖ͬͯΈΑʔʔʔʂ h$PEJOH%FTJHO 

  25. ຖ݄தԝӺۙ͘Ͱ ͯ͛ͯ͛ͳΏΔʔ͍ษڧձ ͯ͛Web΍ͬͯ·͢ʂ h$PEJOH%FTJHO 

  26. ʢ࠷ۙຖ݄Ͱ͸ͳ͘ͳͬͯ·͕͢… ʣ h$PEJOH%FTJHO 

  27. ৄ͘͠͸ʮͯ͛Webʯ FacebookϖʔδͰʂ IUUQTXXXGBDFCPPLDPNUFHFXFC h$PEJOH%FTJHO 

  28. ! ɹ ! ɹ ! ͋͟·ͨͬ͠ʂ ! ɹ ! ɹ

    h$PEJOH%FTJHO