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

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

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

 エンジニアも知れば幸せな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
74
エンジニアこそ知っておきたいUX思考
Avatar for Kazuyoshi Goto kazuyoshigoto
1
610
Twitchと連動したMastodonのBotを作った
Avatar for Kazuyoshi Goto kazuyoshigoto
0
240
スマホのセンサーを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
130
InstagramとWordPressを軸に越境サイトを作った話
Avatar for Kazuyoshi Goto kazuyoshigoto
0
150
モバイル表示を超速にする「AMP」を試してみた
Avatar for Kazuyoshi Goto kazuyoshigoto
0
150
PSVR未だ買えないのでついカッとなって作ることを続けた話
Avatar for Kazuyoshi Goto kazuyoshigoto
1
200

Other Decks in Design

See All in Design
7 Core Values of Round-L
Avatar for Round-L wired888
0
1.7k
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
Avatar for kkaru kkaru
0
550
株式会社バクタム　会社説明資料
Avatar for Bactum Inc. bactum
0
330
Marpで推しCSSスライドを作ろう！ / marp-with-favorite-css
Avatar for ふじえもん fujiemon
0
590
株式会社Muture_ソーシャル推進事業
Avatar for Muture muture
PRO
0
150
mento Design Team Portfolio
Avatar for mento _official mento0fficial
1
670
エンジニアでも捗る デザイナー的思考入門
Avatar for Tsubasa SEKIGUCHI tinykitten
1
1.2k
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
Avatar for Andrew Shapiro ashapiro
0
140
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
Avatar for trivia trivia
0
540
Yumika Yamada Portfolio
Avatar for Yumii yumii
0
1.4k
街・都市という眼差し。まちづくりにおける規範と実践
Avatar for S.SAKAMON sakamon
0
130
そのUIコンポーネント、これから先も使えますか？―Headless UI,Open UI,グローバルデザインシステム
Avatar for sakito sakito
2
1.7k

Featured

See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
112
20k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
339
57k
Done Done
Avatar for chrislema chrislema
185
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
36
2.5k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.9k
The Language of Interfaces
Avatar for Des Traynor destraynor
161
25k

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