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
1.9k
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
8k
Lighthouseを用いたサイト改善 / Website Improvements Using Lighthouse
amatsukiku
0
1.8k
新しくなったMaterial Designを触ってみた / Tried Material Design 2018
amatsukiku
0
3k
test-queueによるテスト高速化
amatsukiku
1
860
Other Decks in Programming
See All in Programming
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
670
PHPで書いたAPIをGoに書き換えてみた 〜パフォーマンス改善の可能性を探る実験レポート〜
koguuum
0
160
メモリウォールを超えて:キャッシュメモリ技術の進歩
kawayu
0
1.9k
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
160
Rollupのビルド時間高速化によるプレビュー表示速度改善とバンドラとASTを駆使したプロダクト開発の難しさ
plaidtech
PRO
1
170
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
1
140
地域ITコミュニティの活性化とAWSに移行してみた話
yuukis
0
240
音声プラットフォームのアーキテクチャ変遷から学ぶ、クラウドネイティブなバッチ処理 (20250422_CNDS2025_Batch_Architecture)
thousanda
0
180
ComposeでWebアプリを作る技術
tbsten
0
110
The Implementations of Advanced LR Parser Algorithm
junk0612
1
310
ミリしらMCP勉強会
watany
4
760
AI Agents with JavaScript
slobodan
0
230
Featured
See All Featured
Building Adaptive Systems
keathley
41
2.5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Adopting Sorbet at Scale
ufuk
76
9.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
GitHub's CSS Performance
jonrohan
1030
460k
Navigating Team Friction
lara
184
15k
Music & Morning Musume
bryan
47
6.5k
It's Worth the Effort
3n
184
28k
Six Lessons from altMBA
skipperchong
27
3.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.4k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
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 نͰյΕʹ͍͘ίʔυΛҡ࣋ ·ͱΊ