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

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

Avatar for Kazuyoshi Goto Kazuyoshi Goto
December 01, 2017
Design
1
89

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

TOWN BASH 2017/11 公開
https://town.connpass.com/event/71098/
Avatar for Kazuyoshi Goto

Kazuyoshi Goto

December 01, 2017
Tweet

More Decks by Kazuyoshi Goto

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

Other Decks in Design

See All in Design
なぜ今必要？Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
Avatar for Hiroki Tani hilokifigma
1
950
セブンデックス カルチャーブック
Avatar for セブンデックス sevendex
1
12k
“使いやすい”が生産性を変える！業務を効率化するためのUX/UI設計ポイント
Avatar for NCDC ncdc
2
310
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
840k
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ！
Avatar for Akiko Kurono cremacrema
0
1.1k
RAKSUL_DESIGN_DECK_20250319
Avatar for RAKSUL raksulrecruiting
0
230
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
Avatar for ICHICHI ichichi
2
630
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
Avatar for Shingo Suzuki shingo2000
1
1.4k
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
Avatar for gaussbeam gaussbeam
0
1.1k
Дизайн услуги через её визуализацию с Картой процесса-опыта
Avatar for Andrew Shapiro ashapiro
0
320
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
Avatar for ちげ chige
7
1.1k
事業部のデザイナーの働き方　みてねみまもりGPSの場合
Avatar for MIXI DESIGN mixi_design
PRO
0
100

Featured

See All Featured
BBQ
Avatar for Matthew Crist matthewcrist
88
9.6k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.7k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
91
6k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
105
19k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
344
40k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.6k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ