HTML・CSS勉強会３

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

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

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

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