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
3k
test-queueによるテスト高速化
amatsukiku
1
880
Other Decks in Programming
See All in Programming
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
11
2.8k
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
820
事業戦略を理解してソフトウェアを設計する
masuda220
PRO
22
6.2k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
360
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
330
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
250
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
920
Passkeys for Java Developers
ynojima
3
880
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.8k
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
560
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
780
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
The Pragmatic Product Professional
lauravandoore
35
6.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
How STYLIGHT went responsive
nonsquared
100
5.6k
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 نͰյΕʹ͍͘ίʔυΛҡ࣋ ·ͱΊ