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
720
リアルパンくずナビLT
Emi MATSUDA
December 03, 2016
Tweet
Share
More Decks by Emi MATSUDA
See All by Emi MATSUDA
CSSでblend-modeを使ってみよう!
matsudaemi
0
210
コワくないmicroInteractionの考え方・作り方
matsudaemi
0
120
コワくないJS:オープニングトーク
matsudaemi
1
210
コワくない.js1@フレームワークの話
matsudaemi
0
190
Other Decks in Technology
See All in Technology
Fargateを使った研修の話
takesection
0
140
グローバル展開を見据えたサービスにおける機械翻訳プラクティス / dp-ai-translating
cyberagentdevelopers
PRO
1
160
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
6
1.2k
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
590
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
AIを駆使したゲーム開発戦略: 新設AI組織の取り組み / sge-ai-strategy
cyberagentdevelopers
PRO
1
130
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
180
小規模に始めるデータメッシュとデータガバナンスの実践
kimujun
3
610
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
ガバメントクラウド先行事業中間報告を読み解く
sugiim
1
1.5k
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
What's new in Ruby 2.0
geeforr
342
31k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Designing the Hi-DPI Web
ddemaree
280
34k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Gamification - CAS2011
davidbonilla
80
5k
The Invisible Side of Design
smashingmag
297
50k
Building an army of robots
kneath
302
42k
Docker and Python
trallard
40
3.1k
A designer walks into a library…
pauljervisheath
202
24k
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࡞ͬͯΔͱ͔ώϚ͔ɻ
ࣦۀதͰ͢ɻ ͓ࣄืूதͰ͢ɻ ʢࠓͷͱ͜ɺձࣾʹॴଐ͢Δ༧ఆ͋Γ·ͤΜʣ
͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ