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

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

Avatar for Fuminori Mori Fuminori Mori
January 11, 2020
Technology
0
2.1k

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

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

Avatar for Fuminori Mori

Fuminori Mori

January 11, 2020
Tweet

More Decks by Fuminori Mori

See All by Fuminori Mori
GRID RANGERS
Avatar for Fuminori Mori moonglows76
0
220
FLEXBOX-MEN: Apocalypse
Avatar for Fuminori Mori moonglows76
4
490

Other Decks in Technology

See All in Technology
社内お問い合わせBotの仕組みと学び
Avatar for Tomoyuki Nishimura nish01
1
580
ACA でMAGI システムを社内で展開しようとした話
Avatar for Yuji Masaoka | まっぴぃ mappie_kochi
1
320
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ：検査・適応で未来を開発 / AI-driven product owner. scrummat2025
Avatar for yosuke nagai yosuke_nagai
3
830
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing Hiroshima 2025 Edition
Avatar for HASEGAWA Tomoki tomzoh
0
130
Escaping_the_Kraken_-_October_2025.pdf
Avatar for Maarten Dalmijn mdalmijn
0
170
いまからでも遅くない！SSL/TLS証明書超入門（It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide）
Avatar for NoriMuraZ norimuraz
0
200
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
Avatar for Sansan R&D sansan_randd
0
130
M5製品で作るポン置きセルラー対応カメラ
Avatar for Hisaya OKADA sayacom
0
180
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
Avatar for Kenichi Kambara korodroid
2
480
Wasmのエコシステムを使った ツール作成方法
Avatar for asuka askua
0
140
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
1
580
これがLambdaレス時代のChatOpsだ！実例で学ぶAmazon Q Developerカスタムアクション活用法
Avatar for iwamot iwamot
PRO
6
1k

Featured

See All Featured
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
61k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5.1k
Docker and Python
Avatar for Tania Allard trallard
46
3.6k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.8k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.9k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
3
370
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k

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