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
VASILY流CSSコーディング
Search
AmatsukiKu
June 07, 2017
Programming
2
2k
VASILY流CSSコーディング
Fashion Tech meetup #4で発表した資料です。
デザインをWebに再現し続ける際に陥りがちな問題とそれらに対しVASILYではどのように対応しているかを紹介しています。
AmatsukiKu
June 07, 2017
Tweet
Share
More Decks by AmatsukiKu
See All by AmatsukiKu
ZOZOのグローバルECのフロントエンドアーキテクチャ設計 / Frontend Architecture Design of ZOZO
amatsukiku
13
8.1k
Lighthouseを用いたサイト改善 / Website Improvements Using Lighthouse
amatsukiku
0
1.8k
新しくなったMaterial Designを触ってみた / Tried Material Design 2018
amatsukiku
0
3.1k
test-queueによるテスト高速化
amatsukiku
1
900
Other Decks in Programming
See All in Programming
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
370
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
920
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.2k
XP, Testing and ninja testing ZOZ5
m_seki
3
300
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
960
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
640
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
400
私はどうやって技術力を上げたのか
yusukebe
43
17k
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.3k
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
Featured
See All Featured
It's Worth the Effort
3n
187
28k
How to train your dragon (web standard)
notwaldorf
96
6.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
A Modern Web Designer's Workflow
chriscoyier
697
190k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
How GitHub (no longer) Works
holman
315
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
A designer walks into a library…
pauljervisheath
209
24k
Transcript
7"4*-:ྲྀ $44ίʔσΟϯά ,FOKJ(POOPLBNJ 'BTIJPO5FDINFFUVQ
ݖक݈࢚ ʢ͝Μͷ͔Έ͚Μ͡ʣ !"NBUTVLJ,V 7"4*-: *OD 'SPOUFOEFOHJOFFS w ৽ଔͱͯ͠7"4*-:ʹೖࣾ w *20/ͳͲͷ1$ɾεϚϗαΠτΛ୲
w ࠓ݄͔ΒωΠςΟϒΞϓϦ։ൃʹ+PJO
ࠓͷτϐοΫ σβΠϯΛ8FC্ʹ࠶ݱ͠ଓ͚ΔࡍʹؕΓ͕ͪͳͱରԠํ๏
։ൃ࣌ʹؕΓ͕ͪͳͱͦͷରԠ๏ ୯७ͳݟམͱ͠ ݟ͑ͳ͍σβΠϯ ӡ༻࣌ʹؕΓ͕ͪͳͱͦͷରԠ๏ มߋ࿙Ε
ҙਤ͠ͳ͍มߋ ·ͱΊ ࣍
։ൃ࣌ʹؕΓ͕ͪͳͱͦͷରԠ๏ ୯७ͳݟམͱ͠ ݟ͑ͳ͍σβΠϯ ӡ༻࣌ʹؕΓ͕ͪͳͱͦͷରԠ๏ มߋ࿙Ε
ҙਤ͠ͳ͍มߋ ·ͱΊ ࣍
σβΠϯͱݟൺͳ͕Β࣮ʹޡΓ͕ͳ͍͔Λ֬ೝ͢Δͷ ؒҧ͍୳͠ͷΑ͏ͳͷ ୯७ͳݟམͱ͠ σβΠϯσʔλ ࣮ࡍʹίʔσΟϯάͨ͠ͷ
ҙͷը૾Λಁաɺ֦େɾॖ খͯ͠ॏͶΒΕΔ֦ுػೳ ରԠϒϥβ $ISPNF 4BGBSJ 'JSFGPY 0QFSB *& &EHF
1FSGFDU1JYFM
ॏͶͯෆ໌ྎͳ߹ σʔλ͕ҟͳΔͱॏͶͯΘ͔Γʹ͍͘ ϞοΫσʔλΛ༻͍Δ
w σβΠϯͱಉ͡Λ࣋ͭσʔλΛ:".-ʹఆٛ w ։ൃڥͰͷΈσʔλΛ্ॻ͖͢Δ3BJMTͷ ϔϧύʔϝιουͱ࣮ͯ͠ ϞοΫσʔλͷద༻ DPOpHNPDLJUFNZNM
։ൃ࣌ʹؕΓ͕ͪͳͱͦͷରԠ๏ ୯७ͳݟམͱ͠ ݟ͑ͳ͍σβΠϯ ӡ༻࣌ʹؕΓ͕ͪͳͱͦͷରԠ๏ มߋ࿙Ε
ҙਤ͠ͳ͍มߋ ·ͱΊ ࣍
w ෳߦͷςΩετ w Ξχϝʔγϣϯ ݟ͑ͳ͍σβΠϯ
࣮σʔλ͕ೖΔ͜ͱͰɺվߦ͕ඞཁͱΘ͔Δ͜ͱΑ͋͘Δ w ͍ϒϥϯυ໊ࣄલʹڞ༗ w 6/*5&%"33084HSFFOMBCFMSFMBYJOH w ("--"3%"("-"/5& w ඞཁʹԠͯ͡σʔλϕʔεΛௐɺ࠷େจࣈͳͲσʔλ ͷಛΛڞ༗
ෳߦͷςΩετ
Ξχϝʔγϣϯ࣮ʹ੍ݶ͕ଟ͍͜ͱ͋ΔͷͰɺ Πϝʔδ͚ͩฉ͖ɺ࣮ͨ͠ͷΛ֬ೝͯ͠Β͍ௐ Ξχϝʔγϣϯ
։ൃ࣌ʹؕΓ͕ͪͳͱͦͷରԠ๏ ୯७ͳݟམͱ͠ ݟ͑ͳ͍σβΠϯ ӡ༻࣌ʹؕΓ͕ͪͳͱͦͷରԠ๏ มߋ࿙Ε
ҙਤ͠ͳ͍มߋ ·ͱΊ ࣍
σʔλϕʔε"1*ͱൺɺ$44৽ँ͕ܹ͍͠ ʢදࣔ͢Δ༰ಉ͡Ͱݟͨม͑Δʣ ཧ͕͍ͱɺ$44ϧʔϧॠؒ͘ʹංେԽ ӡ༻࣌ʹى͜Δ͜ͱ
ӡ༻Λ͍ͯ͠ΔͱมߋՕॴ͕ൣғʹٴͿվम͕ى͜Δ w Ұཡͷϒϥϯυ໊ͷӳޠදهͱຊޠදهΛಉ͡ ߦ͔Βೋߦʹ w αΠτશମͷϘʔμʔΧϥʔͷมߋ w ϩΰͱςʔϚΧϥʔͷมߋ มߋ࿙Ε ڞ௨Խ͖͢ՕॴͰ͍ͯ͠ͳ͍ͱมߋ࿙Ε͕ى͖Δ
σβΠϯଆͰ4LFUDIͷγϯϘϧͱͯ͠ɺίʔσΟϯάଆ Ͱ4BTTͷఆϞδϡʔϧͱͯ͠ڞ௨Խ ڞ௨Խ γϯϘϧΛฤू͢Δ͜ͱͰɺσβΠϯશମ͕मਖ਼͞ΕΔ
ఆɾϞδϡʔϧԽ TUZMFTIFFUTTIBSFEDPNNPOTBTT TUZMFTIFFUTTIBSFENJYJOTTBTT σβΠϯ্ͷΧϥʔύϨοτʹ૬ ίʔσΟωʔτϞδϡʔϧ
։ൃ࣌ʹؕΓ͕ͪͳͱͦͷରԠ๏ ୯७ͳݟམͱ͠ ݟ͑ͳ͍σβΠϯ ӡ༻࣌ʹؕΓ͕ͪͳͱͦͷରԠ๏ มߋ࿙Ε
ҙਤ͠ͳ͍มߋ ·ͱΊ ࣍
$44ͷελΠϧద༻ൣғͷͰҙਤ͍ͯ͠ͳ͍ՕॴΛมߋ ίʔσΟϯάنͰద༻ൣғΛݶఆ ҙਤͤ͵มߋ w 7JFX$44 w ໋໊نଇ ྫɿ͋Δϖʔδ͚ͩݟग़͠Λେ͖ͨͭ͘͠Γ͕ଞͷϖʔδͷ ݟग़͠େ͖͘ͳͬͯ͠·ͬͨ
I IͷΑ͏ͳ୯७ͳηϨ ΫλʔͰଞͷϖʔδʹӨ ڹΛ༩͑ͳ͍ TUZMFTIFFUTTFUTTQJOEFYTBTT ڞ௨ϑΝΠϧ ɹϨΠΞτʹؔ͢Δ Ϋϥε Ϟδϡʔϧͷϩʔυ
ࠩݕग़πʔϧ େنͳϦϑΝΫλϦϯά࣌ʹओཁϖʔδʹରͯ͠πʔϧ Λ༻͍ͯޮతʹ֬ೝ ΧϥϜམ͕ͪൃੜ ͍ͯ͠Δ ࠩͷݕग़ ։ൃલ ։ൃޙ ࠩ
։ൃ࣌ʹؕΓ͕ͪͳͱͦͷରԠ๏ ୯७ͳݟམͱ͠ ݟ͑ͳ͍σβΠϯ ӡ༻࣌ʹؕΓ͕ͪͳͱͦͷରԠ๏ มߋ࿙Ε
ҙਤ͠ͳ͍มߋ ·ͱΊ ࣍
w πʔϧΛ༻͍Δ͜ͱͰޮతʹσβΠϯͱ ࣮ͷͣΕΛ֬ೝ w ڞ௨ԽΛҙࣝ͢Δ͜ͱͰมߋ࿙ΕΛࢭ w نͰյΕʹ͍͘ίʔυΛҡ࣋ ·ͱΊ