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

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

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

 エンジニアも知れば幸せな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
78
エンジニアこそ知っておきたいUX思考
Avatar for Kazuyoshi Goto kazuyoshigoto
1
630
Twitchと連動したMastodonのBotを作った
Avatar for Kazuyoshi Goto kazuyoshigoto
0
250
スマホのセンサーをJavaScriptで遊ぶ
Avatar for Kazuyoshi Goto kazuyoshigoto
0
430
ノンエンジニアのMastodon手探り構築記
Avatar for Kazuyoshi Goto kazuyoshigoto
0
110
Uploaded Webレイアウトの歴史と新時代「Grid」
Avatar for Kazuyoshi Goto kazuyoshigoto
0
130
InstagramとWordPressを軸に越境サイトを作った話
Avatar for Kazuyoshi Goto kazuyoshigoto
0
150
モバイル表示を超速にする「AMP」を試してみた
Avatar for Kazuyoshi Goto kazuyoshigoto
0
160
PSVR未だ買えないのでついカッとなって作ることを続けた話
Avatar for Kazuyoshi Goto kazuyoshigoto
1
210

Other Decks in Design

See All in Design
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
490
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.5k
第18回サイゼミ
Avatar for LW lw
1
3.1k
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
220
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
0
290
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
140
hicard_credential_202601
Avatar for hicard hicard
0
130
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
780
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
600
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
110
OSO2025-マサカリと太陽：伝え方の情報デザイン
Avatar for majimasachi majimasachi
0
670
文化のデザイン - Soft Impact of Design
Avatar for Atsushi Homma atsushihomma
0
130

Featured

See All Featured
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.5k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
0
100
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
200
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
430
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.2k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
260
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
0
740
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
How to make the Groovebox
Avatar for あそなす asonas
2
1.9k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
170

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