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

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

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

 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
180
582e704d86157b464e1933c6d104cce0?s=48 moonglows76
4
350

Other Decks in Technology

See All in Technology
5c097a7b75c8802b073774faa7276503?s=48 optim
0
190
7252086bae9203045dd7f5664fd96a07?s=48 manuelmeyer
0
130
2cf373725ded741824c50fd571eda6e1?s=48 udzura
2
250
Cc568a0b1284645f9fb927b2343eb87e?s=48 youtalk
0
350
0411ad77d29734ecd0980c5b9b62848f?s=48 ch1aki
2
180
9cdd446fb259ec93e52d4388f60197f8?s=48 karamem0
1
720
9c733dc2d65e7dcce91fa62be8bbb2ee?s=48 buildersbox
0
200
7cd783377515bdf8207062840b7b2f4e?s=48 soracom
0
120
70357f859596e494c8373be7a87966b1?s=48 1027kg
0
190
Add4ea030be9e6aa7a319fc8c1b587c6?s=48 hashhub
3
16k
8611672fd60a86cd19c972c61df3c99f?s=48 900groove
2
230
Fb025419ed38f98df595eb2eafc859f4?s=48 ihcomega56
1
510

Featured

See All Featured
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
128
20k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
17k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
8.8k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
52
2.8k
24fc194843a71f10949be18d5a692682?s=48 gr2m
83
11k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
230
18k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
54
1.9k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
329
15k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
145
12k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1021
380k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
19
1.2k

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