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

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

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