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
リアルパンくずナビLT
Search
Emi MATSUDA
December 03, 2016
Technology
0
790
リアルパンくずナビLT
Emi MATSUDA
December 03, 2016
Tweet
Share
More Decks by Emi MATSUDA
See All by Emi MATSUDA
CSSでblend-modeを使ってみよう!
matsudaemi
0
240
コワくないmicroInteractionの考え方・作り方
matsudaemi
0
120
コワくないJS:オープニングトーク
matsudaemi
1
220
コワくない.js1@フレームワークの話
matsudaemi
0
200
Other Decks in Technology
See All in Technology
React Server ComponentsでAPI不要の開発体験
polidog
PRO
0
350
20250807_Kiroと私の反省会
riz3f7
0
270
Amazon S3 Vectorsは大規模ベクトル検索を低コスト化するサーバーレスなベクトルデータベースだ #jawsugsaga / S3 Vectors As A Serverless Vector Database
quiver
2
1k
生成AIによるソフトウェア開発の収束地点 - Hack Fes 2025
vaaaaanquish
34
16k
MCPサーバーを活用したAWSコスト管理
arie0703
0
130
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
brainpadpr
2
560
EKS Pod Identity における推移的な session tags
z63d
1
160
はじめての転職講座/The Guide of First Career Change
kwappa
5
4.4k
ABEMAにおける 生成AI活用の現在地 / The Current Status of Generative AI at ABEMA
dekatotoro
0
390
AIに頼りすぎない新人育成術
cuebic9bic
3
330
GISエンジニアよ 現場に行け!
sudataka
1
140
データモデリング通り #2オンライン勉強会 ~方法論の話をしよう~
datayokocho
0
190
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
4 Signs Your Business is Dying
shpigford
184
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Facilitating Awesome Meetings
lara
55
6.5k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Six Lessons from altMBA
skipperchong
28
4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Fireside Chat
paigeccino
39
3.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Transcript
WEBͰΑ͘͏ΞϨͷ໊শʹ͍ͭͯɺ 5͚ͩಥ͖٧Ίͯߟ͑ͯΈΔɻ 2016.12.3 ؔϑϩϯτΤϯυUG ΕLTେձ EMI Matsuda
୭ʁ ڈ·Ͱձࣾһɻࠓࣦۀऀɻ Webϑϩϯτܥɻ جຊJS͖ɻJSͷ͓ࣄଟΊɻ ͪΖΜHTMLCSS Γ·͢Αʁ ݪཧओٛతͰͳ͍ϨϕϧͰ ηϚϯςΟΫε͖ɻ
WebͰΑ͘͏ʮΞϨʯʁ
ίϨɻ ͳΜͯݺΜͰ·͢ʁ
“ύϯͣ͘φϏήʔγϣϯ”
ʮύϯͣ͘ʯͷޠݯʁ
“ϔϯθϧͱάϨʔςϧ”
ϔϯθϧͱάϨʔςϧ άϦϜಐɻ 2ਓʹࣺͯΒΕΔɻ ḷ͖ͬͯͨಓඪʹύϯͣ͘ɻ ύϯͣ͘Λௗʹ৯ΒΕΔɻ ໎ࢠɻ ͓՛ࢠͷՈʹͨͲΓண͘ɻ
ϔϯθϧͱάϨʔςϧ άϦϜಐɻ 2ਓʹࣺͯΒΕΔɻ ḷ͖ͬͯͨಓඪʹύϯͣ͘ɻ ύϯͣ͘Λௗʹ৯ΒΕΔɻ ໎ࢠɻ ͓՛ࢠͷՈʹͨͲΓண͘ɻ…
ύϯͣ͘ͷʁ
ݩͷॴʹΔͨΊ ḷ͖ͬͯͨ௨ΓͷಓےΛࣔ͢ ͦΕ͕ௗʹ৯ΒΕͯͳ͘ͳͬͨ ݁Ռ…͓՛ࢠͷՈΛΈ͚ͭΔ ετʔϦʔͷதͰɺΊͬͪΌେࣄʂʂʂ
ύϯͣ͘φϏͷʁ
ݱࡏͷϖʔδͷ αΠτͰͷҐஔɻ
ḷ͖ͬͯͨಓඪ͡Όͳ͍ʂ
ͨͱ͑ɺ͜Μͳύϯͣ͘ φϏɻ
Googleݕࡧ ʮ௨ൢɹίʔτʯ
Googleݕࡧ ʮ௨ൢɹίʔτʯ ↓ZOZOTOWN http://zozo.jp/women-category/jacket-outerwear/
Googleݕࡧ ʮ௨ൢɹίʔτʯ ↓ZOZOTOWN http://zozo.jp/women-category/jacket-outerwear/ ↓ίʔτৄࡉ http://zozo.jp/shop/reca/goods/14772026/? did=31771774
Googleݕࡧ ʮ௨ൢɹίʔτʯ ↓ZOZOTOWN http://zozo.jp/women-category/jacket-outerwear/ ↓ίʔτৄࡉ http://zozo.jp/shop/reca/goods/14772026/? did=31771774 ❌ ❌ ❌
↓
ຊདྷͷετʔϦʔʹ ͋ΘͤΔͱ ͜͏͍͏φϏʹͳΔͷͰʁ
demo https://matsudaemi.github.io/real-bread-crumb/demo/
ݩͷॴʹΔͨΊ ḷ͖ͬͯͨ௨ΓͷಓےΛࣔ͢ ͦΕ͕ௗʹ৯ΒΕͯͳ͘ͳͬͨ ݁Ռ…͓՛ࢠͷՈΛΈ͚ͭΔ ετʔϦʔͷதͰɺΊͬͪΌେࣄʂʂʂ
ݩͷॴʹΔͨΊ ḷ͖ͬͯͨ௨ΓͷಓےΛࣔ͢ ͦΕ͕ௗʹ৯ΒΕͯͳ͘ͳͬͨ ݁Ռ…͓՛ࢠͷՈΛΈ͚ͭΔ ετʔϦʔͷதͰɺΊͬͪΌେࣄʂʂʂ
ͬͺΓɺʮύϯͣ͘φϏʯͬͯίτόɺ Ίͨ΄͏͍͍Μ͡Όͳ͍ʁ
topic path category nav ͱ͔ͱ͔ɻ৭ʑ͍͍͋ͬͯΜ͡Όͳ͍ʁ
ͩ͘Βͳ͍ݴ͍͕͔Γσγλ⭐
͜ΜͳJS࡞ͬͯΔͱ͔ώϚ͔ɻ
ࣦۀதͰ͢ɻ ͓ࣄืूதͰ͢ɻ ʢࠓͷͱ͜ɺձࣾʹॴଐ͢Δ༧ఆ͋Γ·ͤΜʣ
͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ