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
1.8k
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
460
Other Decks in Technology
See All in Technology
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
190
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
220
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
エンジニア向け会社紹介資料
caddi_eng
14
230k
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
160
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
760
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
210
Featured
See All Featured
How to Ace a Technical Interview
jacobian
274
23k
Ruby is Unlike a Banana
tanoku
96
10k
How GitHub (no longer) Works
holman
305
140k
Typedesign – Prime Four
hannesfritz
37
2.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
A better future with KSS
kneath
231
17k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Building Your Own Lightsaber
phodgson
101
5.9k
Designing Experiences People Love
moore
136
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
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