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
890
Other Decks in Programming
See All in Programming
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
2
740
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
520
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
170
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
280
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
350
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
330
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
930
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
Understanding Kotlin Multiplatform
l2hyunwoo
0
250
Go製CLIツールをnpmで配布するには
syumai
2
1.1k
実践!App Intents対応
yuukiw00w
0
110
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
1
910
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Building Applications with DynamoDB
mza
95
6.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Designing for Performance
lara
610
69k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
BBQ
matthewcrist
89
9.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
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 نͰյΕʹ͍͘ίʔυΛҡ࣋ ·ͱΊ