Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JSを使わなくてもCSSでできるようになったこと
Search
Fuminori Mori
January 11, 2020
Technology
0
2k
JSを使わなくてもCSSでできるようになったこと
鹿児島市のマークメイザンで2020年1月11日に開催された「ゆるやかな合同Web勉強会」でのLTのスライドです。
Fuminori Mori
January 11, 2020
Tweet
Share
More Decks by Fuminori Mori
See All by Fuminori Mori
GRID RANGERS
moonglows76
0
220
FLEXBOX-MEN: Apocalypse
moonglows76
4
490
Other Decks in Technology
See All in Technology
Android Audio: Beyond Winning On It
atsushieno
0
110
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
200
Obsidian応用活用術
onikun94
2
490
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
160
2025年夏 コーディングエージェントを統べる者
nwiizo
0
140
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
540
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.8k
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
170
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
390
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.7k
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
3
550
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Designing for humans not robots
tammielis
253
25k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Documentation Writing (for coders)
carmenintech
74
5k
Building Adaptive Systems
keathley
43
2.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Transcript
JSΛΘͳͯ͘ CSSͰͰ͖ΔΑ͏ʹͳͬͨ͜ͱ 2020-01-11 @ ΏΔ͔ͳ߹ಉWebษڧձ ίʔσΟϯάσβΠϯɹ ࢙ݑ h$PEJOH%FTJHO
ίʔσΟϯάσβΠϯ ɹ࢙ݑ ίʔμʔ ॻ੶ஶऀ ߨࢣ Πϕϯτओ࠵ऀ h$PEJOH%FTJHO
CSSͰʮಈ͖ʯΛ ఏڙͰ͖ΔΑ͏ʹͳͬͨʂ h$PEJOH%FTJHO
͜Ε·ͰJavaScriptͰ ࣮͖ͯͨ͜͠ͱɺ h$PEJOH%FTJHO
CSS͚ͩͰ Ͱ͖Δ͜ͱ͋ΔΑʔͬʂ h$PEJOH%FTJHO
✋✋ ݟͯΈ͍ͨਓʔʔʔʂ h$PEJOH%FTJHO
! ! ͋͟ʔʔʔͬ͢ʂ ! h$PEJOH%FTJHO
εϜʔζεΫϩʔϧʂʂ h$PEJOH%FTJHO
$0%&1&/ h$PEJOH%FTJHO
h$PEJOH%FTJHO
!!! ϝϦοτ ϓϩύςΟ1ͭͰ࣮! ʢscroll-behaviorʣ h$PEJOH%FTJHO
!!! σϝϦοτ ࡉ͔͍ௐͰ͖ͳʔ͍ h$PEJOH%FTJHO
✋✋ ͬͱ ✋✋ ݟͯΈ͍ͨਓʔʔʔʂ h$PEJOH%FTJHO
! ɹ ! ɹ ! ͋͟ʔʔʔͬ͢ʂ ! ɹ ! ɹ
h$PEJOH%FTJHO
εΫϩʔϧ్த͔Β ্෦ʹݻఆʂʂʂ h$PEJOH%FTJHO
$0%&1&/ h$PEJOH%FTJHO
h$PEJOH%FTJHO
!!! ϝϦοτ ϓϩύςΟ2ͭͰ࣮! ʢposi'onͱtopʣ h$PEJOH%FTJHO
!!! σϝϦοτ ࡉ͔͍ௐͰ͖ͳʔ͍ ʢຊ̎ճʣ h$PEJOH%FTJHO
ࡉ͔͍͜ͱݴΘͳ͍ͳΒ CSSͰ࣮͋Γ͔ʁ h$PEJOH%FTJHO
·ͱΊ h$PEJOH%FTJHO
ʮεϜʔζεΫϩʔϧʯ htmlཁૉʹ scroll-behavior: smooth; h$PEJOH%FTJHO
ʮεΫϩʔϧ్த͔Β্෦ʹݻఆʯ ରཁૉʹ posi%on: s%cky;ɹtop: 0; h$PEJOH%FTJHO
ؾʹͳͬͨΒ ͬͯΈΑʔʔʔʂ h$PEJOH%FTJHO
ຖ݄தԝӺۙ͘Ͱ ͯ͛ͯ͛ͳΏΔʔ͍ษڧձ ͯ͛Webͬͯ·͢ʂ h$PEJOH%FTJHO
ʢ࠷ۙຖ݄Ͱͳ͘ͳͬͯ·͕͢… ʣ h$PEJOH%FTJHO
ৄ͘͠ʮͯ͛Webʯ FacebookϖʔδͰʂ IUUQTXXXGBDFCPPLDPNUFHFXFC h$PEJOH%FTJHO
! ɹ ! ɹ ! ͋͟·ͨͬ͠ʂ ! ɹ ! ɹ
h$PEJOH%FTJHO