Upgrade to Pro — share decks privately, control downloads, hide ads and more …

エンジニアも知れば幸せなCSS基礎

Kazuyoshi Goto
December 01, 2017
Design
1
83

 エンジニアも知れば幸せなCSS基礎

TOWN BASH 2017/11 公開
https://town.connpass.com/event/71098/

Kazuyoshi Goto

December 01, 2017
Tweet

More Decks by Kazuyoshi Goto

See All by Kazuyoshi Goto
成功体験を伝えよう。
kazuyoshigoto
0
68
エンジニアこそ知っておきたいUX思考
kazuyoshigoto
1
550
Twitchと連動したMastodonのBotを作った
kazuyoshigoto
0
220
スマホのセンサーをJavaScriptで遊ぶ
kazuyoshigoto
0
420
ノンエンジニアのMastodon手探り構築記
kazuyoshigoto
0
97
Uploaded Webレイアウトの歴史と新時代「Grid」
kazuyoshigoto
0
120
InstagramとWordPressを軸に越境サイトを作った話
kazuyoshigoto
0
140
モバイル表示を超速にする「AMP」を試してみた
kazuyoshigoto
0
150
PSVR未だ買えないのでついカッとなって作ることを続けた話
kazuyoshigoto
1
190

Other Decks in Design

See All in Design
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
620
Первая беседа о Карте реализации историй
ashapiro
0
290
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
890
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.1k
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.2k
デザインシステム構築の進め方　基本から実践まで、具体的な手順を徹底解説
ncdc
1
210
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
420
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.4k
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
160
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
550
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
200
ENEOS社事例｜アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
270

Featured

See All Featured
How to train your dragon (web standard)
notwaldorf
88
5.7k
Practical Orchestrator
shlominoach
186
10k
Scaling GitHub
holman
458
140k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Six Lessons from altMBA
skipperchong
27
3.5k
Navigating Team Friction
lara
183
14k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Site-Speed That Sticks
csswizardry
0
25
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
A Modern Web Designer's Workflow
chriscoyier
693
190k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
The World Runs on Bad Software
bkeepers
PRO
65
11k

Transcript

  1. ΤϯδχΞ΋஌Ε͹޾ͤͳ
 $44جૅ ޙ౻࿨ྑ

  2. ࣗݾ঺հ ޙ౻࿨ྑ $*ࣄۀ෦ ,B[VZPTIJ(PUP

  3. ࠓճͷର৅ 8FCσβΠϯɾϑϩϯτʹ΋ڵຯͷ͋Δਓ ϑϩϯτ෼͔ΒΜ͚Ͳ৮ΔՄೳੑͷ͋Δਓ ࣮͸$44ΛงғؾͰίϐϖͯ͠Δਓ

  4. $44ͱ͸

  5. $BTDBEJOH4UZMF4IFFUT
 ΧεέʔςΟϯάελΠϧγʔτ ΢Σϒϖʔδͷݟӫ͑Λ੍ޚ͢Δݴޠɻ
 )5.-ͱซͤͯ࢖ΘΕΔɻ

  6. ͳͥ$44Λ࢖͏ͷ͔ )5.-ͷΈͰ΋ଟগݟӫ͑Λ੍ޚͰ͖Δ͕ɺ ϝϯςφϯεੑ͕௿͘࢖͍ճ͠΋ޮ͔ͳ͍ɻ ·ͨ)5.-ຊདྷͷจॻߏ଄Λଛͳ͏ͨΊɺ $44Λ࢖͏ɻ

  7. $44ͷه๏

  8. Q\GPOUTJ[FQY^ ʲηϨΫλʔʳ ελΠϧΛద༻ͤ͞Δର৅ɻ ྫ͸Qλά͢΂ͯΛର৅ʹ͢Δɻ ʲϓϩύςΟʳ ద༻͢ΔελΠϧͷ಺༰ɻ ྫ͸ϑΥϯταΠζΛQYʹ͢Δɻ

  9. Q\ GPOUTJ[FQY NBSHJOQY DPMPS ^ ϓϩύςΟ͸ෳ਺ॻ͚Δɻ ϓϩύςΟؒ͸ηϛίϩϯ  Ͱ۠੾Δɻ

  10. ηϨΫλʔͷछྨ

  11. )5.- Q\DPMPSG^ EJW\DPMPSG^ Q EJW\GPOUXFJHIUCPME^ Q੺͍ଠࣈQ EJW੨͍ଠࣈEJW ηϨΫλʔΛΧϯϚ Ͱ۠੾Δͱ ෳ਺ͷର৅ʹಉ͡ελΠϧΛద༻Ͱ͖Δɻ

  12. ֊૚Խ ΧεέʔσΟϯά VMMJ\DPMPSG^ PMMJ\DPMPSG^ VM MJVMҎԼͷMJ಺͸੺͍ࣈMJ VM PM MJPMҎԼͷMJ಺͸੨͍ࣈMJ PM

    ηϨΫλʔΛεϖʔεͰ۠੾Γ࿈ͶΔͱ
 ର৅ΛߜΕΔɻʢΧεέʔσΟϯάʣ

  13. DMBTT SFE\DPMPSG^ EJWCMVF\DPMPSG^ QDMBTTSFE ΫϥεSFEͰ੺ࣈ Q EJWDMBTTCMVF EJWʹΫϥεCMVFͰ੨ࣈ Q QDMBTTCMVF

    Կ΋มΘΒͳ͍Αɻ TQBO EJWλάʹΫϥεCMVFΛ෇༩ͨ࣌͠ʹ ελΠϧΛద༻͢Δɻ υοτ  ͱ޷͖ͳ໊લͰ ελΠϧΛఆٛͰ͖Δɻ

  14. *%ʢඇਪ঑ʣ JEOBNF\DPMPS^ QJEJEOBNF άϨʔͷࣈʹͳΔΑɻ Q )5.-ͷ࢓্༷ɺ*%͸ϖʔδʹ͔ͭ͠࢖͑ͳ͍ɻ Ϋϥεͱར༻ײ͸มΘΒͳ͍͕൚༻ੑ͕௿͘ɺ*%͸+BWB4DSJQUͰѻ͏͜ͱ΋ ଟ͍ͨΊɺׯবΛආ͚ΔҙຯͰ΋$44͸ΫϥεͷΈ࢖͏͜ͱ͕޷·͍͠ɻ γϟʔϓ 

    ͱ޷͖ͳ໊લͰ ελΠϧΛఆٛͰ͖Δɻ

  15. ಛघͳηϨΫλʔ

  16. YIPWFSʢϚ΢εΦϯʣ BIPWFS\DPMPSG^ BISFG  Χʔιϧ৐ͤΔͱ੺͘ͳΔΑ B

  17. Y ZʢYͱྡ઀͢ΔZʣ I Q\DPMPSG^ IλΠτϧI Q੺͍จࣈQ Qී௨ͷจࣈQ

  18. YZʢY௚ԼͷZʣ EJWQ\DPMPSG^ Qී௨ͷจࣈQ EJW Q੺͍จࣈQ Q੺͍จࣈQ TFDUJPO Qී௨ͷจࣈQ TFDUJPO EJW

  19. YdZʢYͷޙͷZʣ IdQ\DPMPSG^ IλΠτϧI Qී௨ͷจࣈQ Qී௨ͷจࣈQ Iݟग़͠I Q੺͍จࣈQ Q੺͍จࣈQ

  20. YpSTUDIJMEʢ࠷ॳͷཁૉʣ QpSTUDIJME\DPMPSG^ Q੺͍จࣈQ Qී௨ͷจࣈQ EJW Q੺͍จࣈQ Qී௨ͷจࣈQ EJW

  21. YMBTUDIJMEʢ࠷ޙͷཁૉʣ MJMTUDIJME\DPMPSG^ VM MJී௨ͷจࣈMJ MJී௨ͷจࣈMJ MJ੺͍จࣈMJ VM PM MJී௨ͷจࣈMJ MJී௨ͷจࣈMJ

    MJ੺͍จࣈMJ PM

  22. YpSTUMFUUFSʢ࠷ॳͷҰจࣈʣ QpSTUMFUUFS\DPMPSG^ Q੺͍จࣈQ Q੺͍จࣈQ

  23. ·ͩෳࡶͳ΋ͷ΋͋Γɺ
 ηϨΫλʔ͸Ԟ͕ਂ͍ɻ

  24. $44ͷద༻ํ๏͸
 छྨ

  25. )5.-λάʹ௚઀ॻ͘ ϋʔυίʔσΟϯά/( Ұ࣌తʹදࣔΛ੍ޚ͢Δ৔߹ʹ
 +BWB4DSJQUͰ%0.Λૢ࡞ͯ͠ ࢖͏͜ͱ͕ଟ͍ɻ QTUZMFDPMPSG ੺͍ࣈʹͳΔΑɻ Q

  26. TUZMFλάʹॻ͘ ϋʔυίʔσΟϯάඇਪ঑ɻ ͦͷϖʔδ͚ͩͰద༻͍ͤͨ͞ ελΠϧ͕͋Δ࣌ʹ࢖͏ɻ TUZMF SFE\DPMPSG^ CMVF\DPMPSG^ TUZMF QDMBTTSFE੺ࣈQ QDMBTTCMVF੨ࣈQ

    ˞ಛఆ৚݅Ͱڀۃతʹ͸͜Ε͕ϕετͳ৔߹΋

  27. DTTϑΝΠϧΛಡΈࠐΉ جຊͷద༻ํ๏ɻ )5.-ͱ$44ͷ؅ཧΛ෼཭͠ɺ αΠτશମͷελΠϧΛҰݩ؅ ཧͰ͖ΔͨΊɻ MJOLSFMTUZMFTIFFUISFGTUZMFDTT

  28. $44ͷཧղࠩͰΑ͋͘Δ൵ܶ )5.-ʹ௚઀΍Λ΍ͬͯ͠·͏ मਖ਼͞Εͨ$44ͷ৔ॴ͕෼͔Β ͣमਖ਼͕େมˍෛ࠴Խ ΤϯδχΞ͕௚઀)5.-͞ΘΕΔঢ়گ͕ओͳݪҼɻ Engineer Designer

  29. $44͸ϒϥ΢β͝ͱʹ
 ղऍ͕ҧ͏

  30. ԕ͍ੲɺང͔൴ํͷۜՏܥͰʜ ۜՏதͷδΣμΠ σβΠφʔ ͕
 ఇࠃ܉ .JDSPTPGU ͷ։ൃͨ͠
 σεɾελʔ *& ͱಆ͍ͬͯͨɻ

    *&ͷѱຐͷΑ͏ͳ$44όά͸
 σβΠφʔୡΛ௕͍ۤ೉ͷఈʹ
 ୟ͖མͱͨ͠ͷͩͬͨʜ

  31. σΟεϓϨΠղऍͷࠩ ༨നͷղऍͷࠩ จࣈͷॲཧͷࠩ ࢖͑ΔηϨΫλͷࠩ ࢖͑ΔϓϩύςΟͷࠩ ϑΥʔϜύʔπͷ σβΠϯͷࠩ ͦ΋ͦ΋ະରԠ όά FUD

  32. ͜Μͳ࣌୅΋͚͋ͬͨͲɺ
 ݱ୅͸͍ͩͿվળ͞Εͨɻ

  33. ༏౳ੜ ਖ਼͘͠ݴ͏͜ͱΛฉ͍ͯ͘ΕΔɻ ໰୊ࣇ ੲΑΓϚγ͚ͩͲϠϯνϟͳ఺΋ɻ

  34. Ϋϩεϒϥ΢βνΣοΫ͕ඞཁ

  35. ݱ୅ͷ$44Ͱ
 ٻΊΒΕΔ͜ͱ

  36. ʲ࠷ॏཁʳϨεϙϯγϒରԠ ಉҰ)5.-ͷ΢ΣϒϖʔδΛɺσΟεϓϨΠαΠζʹ ΑͬͯϨΠΞ΢τΛ࠷దԽͤ͞Δٕज़ɻ

  37. !NFEJBTDSFFOBOE NBYXJEUIQY \ QYҎԼͷ࣌ʹద༻͞ΕΔελΠϧ CPEZ\ GPOUTJ[FQY ^ DMBTTOBNF\ NBSHJOQY ^

    ^

  38. $44Ξχϝʔγϣϯ ૷০ͷΈͳΒͣɺ6*ͷΠϯλϥΫγϣϯ ൓Ԡ ʹར༻ ͢Δ͜ͱͰརศੑΛߴΊΔɻ

  39. DMBTTOBNF\ BOJNBUJPOCMJOLTJOpOJUF ^ !LFZGSBNFTCMJOL\ \PQBDJUZ^ \PQBDJUZ^ \PQBDJUZ^ ^

  40. ͜͏ͨ͠දࣔͷ੍ޚ͸
 +BWB4DSJQUΛ࢖͏ΑΓૣ͍ͯܰ͘ɻ

  41. ͞Βʹ

  42. $44% Ґஔ੍ޚͱΞχϝʔγϣϯΛۦ࢖͠$44Ͱ%ۭؒΛ࡞Δٕ๏ɻ
 ࣮༻ੑ͸ʜ·͋ඍົͱ͍͏͔ʜ

  43. $44͚ͩͰग़དྷΔ͜ͱ͸ଟ͍ɻ +BWB4DSJQU࢖͏લʹࢼͯ͠ΈΑ͏ɻ

  44. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ