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

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

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

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

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

Avatar for Kazuyoshi Goto

Kazuyoshi Goto

December 01, 2017

More Decks by Kazuyoshi Goto

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

Other Decks in Design

See All in Design
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
3
29k
Of Ordination and Rebellion exploration sketches
Avatar for Rachel Poon rezaline
0
140
富山デザイン勉強会_デザイントレンド2026.pdf
Avatar for keita keita_yoshikawa
3
240
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
1
1.4k
広い関与の可能性に どう向き合うのか？ 私たちは。｜Timee MarketingDesign 2026-06-18
Avatar for bebe bebe
0
170
大企業インハウスデザイン組織における DesignOps改革の現在地 / DesignOps at Scale: Navigating Transformation in Large Enterprises
Avatar for NTT docomo Business nttcom
0
720
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
0
270
Rethinking IFUs: What Board Game Rulebooks Contribute to IFU Usability
Avatar for Chris Hass deadlinepoet
0
320
Figma MCPを活用するためのデザインハンドブック
Avatar for viviON vivion
7
18k
【優秀賞＋特別賞】くまモン食いしん坊弁当「くまモンの魔法の柑橘弁当」最終審査資料
Avatar for Shoko shoko_seven11
0
200
デザインを信じていますか
Avatar for sekig(ojiee) sekiguchiy
1
1.3k
速く作れるかではなく、速く学べるか ― 学習ループを回すパイロットの途中報告
Avatar for Sho Nagata nagata03
0
500

Featured

See All Featured
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.1k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.3k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
340
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.8k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
260
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
200
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Docker and Python
Avatar for Tania Allard trallard
47
3.9k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
600

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