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

HTML・CSS勉強会3

Ce075075c165a8428a5974ac00b7a5cf?s=47 rhythm191
November 21, 2019

 HTML・CSS勉強会3

Gino inc. でやったHTML・CSS勉強会です。

デザインシステムについて話しました。

元のキーノートはここ
https://github.com/rhythm191/html-conference-in-gino

Ce075075c165a8428a5974ac00b7a5cf?s=128

rhythm191

November 21, 2019
Tweet

Transcript

  1. )5.-ɾ$44ษڧձ̏ σβΠϯγεςϜฤ (JOPJODۚݪ

  2. ΧΦεʹΑ͏ͦ͜ʂ ᶃ ᶄ ᶅ ᶆ ࠓ ί ί ֎෦ͷσβΠφʔ ʹґཔͯͨ͠ࠒ

    .͞Μ͕ qPDTTͯͨ͠ࠒ ,͞Μ͕ σβΠϯͯͨ͠ࠒ
  3. ंྠͷ࠶ൃ໌Λ͠ଓ͚ͨ݁Ռ

  4. ͳͥ૿͑ͯ͠·ͬͨͷ͔

  5. σβΠϯؤுΓ͗͢͡ΌͶ

  6. ंྠͷ࠶ൃ໌Λ͢Δਓʑ w σβΠφʔ w ಉ͡໰୊ΛԿ౓΋σβΠϯ͍ͯ͠Δ w ຖճಉ͡ύʔπΛίʔυʹམͱ͠ࠐΜͰΔ w ΤϯδχΞ w

    ίϯϙʔωϯτ͝ͱʹΧελϜελΠϧΛ؅ཧͯ͠Δ w ίʔυࣗମ͕ཚࡶʹͳ͍ͬͯͬͯΔ
  7. ͦ΋ͦ΋6*࡞ΔͷΉͣ͘Ͷ w 6*ίϯϙʔωϯτʹ੝ΓࠐΉཁૉ͕ଟ͘ͳͬͨ ϘλϯͰߟ͑ͳ͍ͱ͍͚ͳ͍͜ͱ w Ϙλϯࣗମͷܗঢ় w എܠ৭ w ςΩετ

    w ςΩετΧϥʔ w ϑΥϯταΠζ w ΞΠίϯ w Ξχϝʔγϣϯ w ϑΟʔυόοΫ w Ϩεϙϯγϒ w ΞΫηγϏϦςΟ w ΩʔϘʔυΠϯλϥΫγϣϯ w 8"*"3*" w ̎ॏૹ৴ w IPWFS࣌ͷঢ়ଶ w GPDVT࣌ͷঢ়ଶ w BDUJWF࣌ͷঢ়ଶ w EJTBCMFE࣌ͷঢ়ଶ
  8. ΞΠσΞ͔ΒϦϦʔε·Ͱͷ ྲྀΕ w ΞΠσΞ w 8' w 6*69ϨϏϡʔ w ࢓༷ϨϏϡʔ

    w ϏδϡΞϧσβΠϯ w 6*69ϨϏϡʔ w ࢓༷ϨϏϡʔ w )5.-࣮૷ w ίʔυϨϏϡʔ w QBJ[B૊ΈࠐΈ w ݕূ w ϦϦʔε
  9. ໰୊ͷ·ͱΊ w ύλʔϯ͕໌จԽ͞Εͯͳ͍ͨΊ౷Ұײ͕ͳ͍ w ΞΠσΞϦϦʔε·ͰͷϦʔυλΠϜ͕஗͍ w 6*ͷΫΦϦςΟΛ֬อ͢Δ࢓૊Έ͕ͳ͍

  10. %FTJHO4ZTUFNͰ΍Γ͍ͨ͜ͱ w Ұ؏ͨ͠σβΠϯϧʔϧ΍ϒϥϯυΠϝʔδΛߏங͢Δ w 6*΍ϖʔδߏ੒ΛύλʔϯԽ͠ɺ࠶ར༻Մೳʹ͢Δ͜ͱ w ίϯϙʔωϯτΛ૊Έ߹ΘͤͯϓϩτλΠϐϯά͍ͨ͠

  11. %FTJHO4ZTUFN  QBJ[BΛσβΠϯͨΊͷϓϩμΫτ 

  12. %FTJHO4ZTUFNʹؚ·ΕΔ΋ͷ w σβΠϯݪଇ w ϒϥϯυΠϝʔδ w πʔϧ 4LFUDIϥΠϒϥϦͱ͔ w 6*ύλʔϯɾ6*ϥΠϒϥϦ

    w 7PJDF5POF w υΩϡϝϯτ
  13. %FTJHO4ZTUFNͷྫ w .BSWFMIUUQTNBSWFMBQQDPNTUZMFHVJEF w "UUSBTJBOIUUQTXXXBUMBTTJBOEFTJHO w )FSPLVIUUQTEFTJHOIFSPLBJDPN w 1JOUFSFTUIUUQTQJOUFSFTUHJUIVCJPHFTUBMU

  14. σβΠϯݪଇͱ͸ʁ w ϓϩμΫτ΍σβΠϯͷํ޲ੑ΍͋ΓํΛ໌จԽͨ͠΋ͷ w σβΠϯͷίϯηϓτ w ୭ʹର͢ΔσβΠϯͳͷ͔ w ϒϥϯυΠϝʔδʹͭͳ͕Δ΋ͷ w

    σβΠϯͰ΍ͬͯ͸͍͚ͳ͍͜ͱ
  15. σβΠϯݪଇ  ʮΒ͠͞ʯΛ໌จԽ͢Δ͜ͱ

  16. QBJ[BΒ͠͞ͱ͸ʁ

  17. ผʑͷϝϯλϧϞσϧ͕ ܗ੒͞ΕΔ

  18. 1JOUFSFTU w ໌շ w ௚ײతͰֶशͷඞཁ͕ͳ͘ɺ࣍ʹԿΛ͢Δ͔෼͔Δ w ׆ؾ w ΧϥϑϧͰ༂ಈతͰ͍͍ҙຯͰ༧૝֎ w

    յΕͳ͍ w Կ͕ى͍ͬͯ͜Δ͔໌֬ʹϑΟʔυόοΫͨ͠ΓɺϛεΛى ͮ͜͠Β͘͠ɺϛεͬͯ΋ݩʹ໭ͤΔΑ͏ʹ͢Δ
  19. 4IPQJGZͷ৔߹ w 1VUNFSDIBOUTpSTUʢചΓखΛୈҰʹ͢Δʣ w &NQPXFSCVUEPO`UPWFSXIFMNʢྗΛ༩͑Δ͕ѹ౗͠ ͳ͍ʣ w #VJMEBDPIFTJWFFYQFSJFODFʢີ઀ͳମݧΛߏங͢Δʣ w #FQPMJTIFECVUOPUPSOBNFOUBMʢચ࿅͞Ε͍ͯΔ͕૷

    ০తͰ͸ͳ͍ʣ
  20. ελΠϧλΠϧ

  21. 7PJDF5POF w จষ΍τʔϯ͸ϓϩμΫτͷҹ৅ʹେ͖͘Өڹ͢Δ w ஸೡͰ੣࣮PSཅؾͰલ޲͖ w ೔෇ͷϑΥʔϚοτͱ͔

  22. 7PJDF5POFͷྫ

  23. ύλʔϯͱڞ௨ݴޠԽ

  24. σβΠϯύλʔϯ w σβΠϯͷ໰୊Λղܾ͢ΔͨΊͷ࠶ར༻Մೳͳղܾࡦ w ίϯϙʔωϯτϥΠϒϥϦ w ΧϥʔύϨοτ w ΞΠίϯ

  25. ྫ͑͹'VUVSF-FBSOͷ৔߹ w IUUQTEFTJHOTZTUFNGVUVSFMFBSODPN

  26. ύʔπͷ੾Γ෼͚ύλʔϯ w ػೳύλʔϯ w ໨తୡ੒ͷͨΊʹଅ͍ͨ͠ߦಈͷύλʔϯ w ೝ஌ύλʔϯ w දݱ͍ͨ͠ݸੑ΍ಛ௃ͷύλʔϯ

  27. ػೳύλʔϯ w ໨తୡ੒ͷͨΊʹଅ͍ͨ͠ߦಈͷύλʔϯ w Ϙλϯ w ϝχϡʔ w ϑΥʔϜ

  28. 'FBUVSF-FBSOͷ৔߹

  29. ΋͏গ͠ػೳతʹΑͬͯΈΔ

  30. ࢹ֮తώΤϥϧΩʔ

  31. ೝ஌ύλʔϯ w දݱ͍ͨ͠ݸੑ΍ಛ௃ͷύλʔϯ w ৭ w λΠϙάϥϑΟ w ΞΠίϯ w

    Ξχϝʔγϣϯ
  32. ྫ͑͹৭ w ੨͍จࣈ΍ϥϕϧͬΆ͍ͷ͸ΫϦοΫͰ͖Δʢ͸ͣʣ

  33. ڞ௨ݴޠԽ w ֓೦ʹରͯͦ͠ΕΛઆ໌͢Δݴ༿ΛܾΊͯҙຯ͚ͮ͢Δ w ίϯϙʔωϯτͷ໋໊ w ৭ͷ໋໊

  34. 4JOHMFTPVSDFPGUSVUI

  35. 4JOHMFTPVSDFPGUSVUIʁ w σβΠϯγεςϜ͸σβΠϯΛޠΔ্Ͱ །Ұͷ৘ใݯʹͳΔ΂͖

  36. ࠓ·Ͱͷ w ͍ΖΜͳൃੜݯ͔ΒQBJ[Bʹ૊Έࠐ·Ε͖ͯͨ ։ൃऀ σβΠφʔ اըऀ QBJ[B QBJ[B

  37. ͜Ε͔Β w σβΠϯγεςϜʹू໿͠ɺ͔͜͜Βग़ྗ͢Δ QBJ[B σβΠϯγεςϜ ։ൃऀ σβΠφʔ اըऀ

  38. ৽͍͠ϫʔΫϑϩʔ σβΠϯݪଇ σβΠϯ γεςϜ ΞΠσΞ ϓϩτλΠϐϯά ϏδϡΞϧ σβΠϯ ϦϦʔε σβΠϯ

    γεςϜ։ൃ ϓϩμΫτ ։ൃ
  39. ·ͱΊ w σβΠϯ໰୊ͷղܾͷͨΊʹσβΠϯγεςϜΛ࡞Ζ͏ w Ұ؏ͨ͠σβΠϯϧʔϧ΍ϒϥϯυΠϝʔδΛߏங͢Δ w 6*΍ϖʔδߏ੒ΛύλʔϯԽ͠࠶ར༻Մೳʹ͢Δ͜ͱ w ίϯϙʔωϯτΛ૊Έ߹ΘͤͯϓϩτλΠϐϯά͢Δ