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
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
220
推し書籍📚 / Books and a QA Engineer
ak1210
0
120
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
330
Claude Code に プロジェクト管理やらせたみた
unson
7
4.8k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
980
AWS CDKの仕組み / how-aws-cdk-works
gotok365
10
750
CDK Vibe Coding Fes
tomoki10
1
450
TLSから見るSREの未来
atpons
2
200
【LT会登壇資料】TROCCO新コネクタ「スマレジ」を活用した直営店データの分析
kazari0425
1
140
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
0
150
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
1
430
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
470
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
4 Signs Your Business is Dying
shpigford
184
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Navigating Team Friction
lara
187
15k
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