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

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

Fuminori Mori
January 11, 2020
Technology
0
1.7k

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

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

Fuminori Mori

January 11, 2020
Tweet

More Decks by Fuminori Mori

See All by Fuminori Mori
GRID RANGERS
moonglows76
0
210
FLEXBOX-MEN: Apocalypse
moonglows76
4
450

Other Decks in Technology

See All in Technology
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
260
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
競技としてのKaggle、役に立つKaggle
yu4u
3
1.5k
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
300
本当のAWS基礎
toru_kubota
0
520
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
210
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
190
LLM開発・活用の舞台裏@2024.04.25
yushin_n
1
290
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
Databricks における 『MLOps』
databricksjapan
2
170
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
360

Featured

See All Featured
Designing with Data
zakiwarfel
96
4.8k
How to Ace a Technical Interview
jacobian
272
22k
Designing Experiences People Love
moore
136
23k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
GitHub's CSS Performance
jonrohan
1025
450k
The Mythical Team-Month
searls
216
42k
Statistics for Hackers
jakevdp
789
220k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k

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