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

HTML・CSS勉強会3

rhythm191
November 21, 2019

 HTML・CSS勉強会3

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

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

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

rhythm191

November 21, 2019
Tweet

More Decks by rhythm191

Other Decks in Technology

Transcript

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

    View Slide

  2. ΧΦεʹΑ͏ͦ͜ʂ
    ᶃ ᶄ
    ᶅ ᶆ

    ί
    ί
    ֎෦ͷσβΠφʔ
    ʹґཔͯͨ͠ࠒ
    .͞Μ͕
    qPDTTͯͨ͠ࠒ
    ,͞Μ͕
    σβΠϯͯͨ͠ࠒ

    View Slide

  3. ंྠͷ࠶ൃ໌Λ͠ଓ͚ͨ݁Ռ

    View Slide

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

    View Slide

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

    View Slide

  6. ंྠͷ࠶ൃ໌Λ͢Δਓʑ
    w σβΠφʔ
    w ಉ͡໰୊ΛԿ౓΋σβΠϯ͍ͯ͠Δ
    w ຖճಉ͡ύʔπΛίʔυʹམͱ͠ࠐΜͰΔ
    w ΤϯδχΞ
    w ίϯϙʔωϯτ͝ͱʹΧελϜελΠϧΛ؅ཧͯ͠Δ
    w ίʔυࣗମ͕ཚࡶʹͳ͍ͬͯͬͯΔ

    View Slide

  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࣌ͷঢ়ଶ

    View Slide

  8. ΞΠσΞ͔ΒϦϦʔε·Ͱͷ
    ྲྀΕ
    w ΞΠσΞ
    w 8'
    w 6*69ϨϏϡʔ
    w ࢓༷ϨϏϡʔ
    w ϏδϡΞϧσβΠϯ
    w 6*69ϨϏϡʔ
    w ࢓༷ϨϏϡʔ
    w )5.-࣮૷
    w ίʔυϨϏϡʔ
    w QBJ[B૊ΈࠐΈ
    w ݕূ
    w ϦϦʔε

    View Slide

  9. ໰୊ͷ·ͱΊ
    w ύλʔϯ͕໌จԽ͞Εͯͳ͍ͨΊ౷Ұײ͕ͳ͍
    w ΞΠσΞϦϦʔε·ͰͷϦʔυλΠϜ͕஗͍
    w 6*ͷΫΦϦςΟΛ֬อ͢Δ࢓૊Έ͕ͳ͍

    View Slide

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

    View Slide

  11. %FTJHO4ZTUFN

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

    View Slide

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

    View Slide

  13. %FTJHO4ZTUFNͷྫ
    w .BSWFMIUUQTNBSWFMBQQDPNTUZMFHVJEF
    w "UUSBTJBOIUUQTXXXBUMBTTJBOEFTJHO
    w )FSPLVIUUQTEFTJHOIFSPLBJDPN
    w 1JOUFSFTUIUUQTQJOUFSFTUHJUIVCJPHFTUBMU

    View Slide

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

    View Slide

  15. σβΠϯݪଇ

    ʮΒ͠͞ʯΛ໌จԽ͢Δ͜ͱ

    View Slide

  16. QBJ[BΒ͠͞ͱ͸ʁ

    View Slide

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

    View Slide

  18. 1JOUFSFTU
    w ໌շ
    w ௚ײతͰֶशͷඞཁ͕ͳ͘ɺ࣍ʹԿΛ͢Δ͔෼͔Δ
    w ׆ؾ
    w ΧϥϑϧͰ༂ಈతͰ͍͍ҙຯͰ༧૝֎
    w յΕͳ͍
    w Կ͕ى͍ͬͯ͜Δ͔໌֬ʹϑΟʔυόοΫͨ͠ΓɺϛεΛى
    ͮ͜͠Β͘͠ɺϛεͬͯ΋ݩʹ໭ͤΔΑ͏ʹ͢Δ

    View Slide

  19. 4IPQJGZͷ৔߹
    w 1VUNFSDIBOUTpSTUʢചΓखΛୈҰʹ͢Δʣ
    w &NQPXFSCVUEPO`UPWFSXIFMNʢྗΛ༩͑Δ͕ѹ౗͠
    ͳ͍ʣ
    w #VJMEBDPIFTJWFFYQFSJFODFʢີ઀ͳମݧΛߏங͢Δʣ
    w #FQPMJTIFECVUOPUPSOBNFOUBMʢચ࿅͞Ε͍ͯΔ͕૷
    ০తͰ͸ͳ͍ʣ

    View Slide

  20. ελΠϧλΠϧ

    View Slide

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

    View Slide

  22. 7PJDF5POFͷྫ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. 'FBUVSF-FBSOͷ৔߹

    View Slide

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

    View Slide

  30. ࢹ֮తώΤϥϧΩʔ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  34. 4JOHMFTPVSDFPGUSVUI

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide